Salesforce Advanced: Using Plotly in Lightning Component

Plotly has Javascript open source library that can be used to easily create powerful graphs.
But can we use it in Salesforce Lightning Component? We can.
Under some consideration.

First, in Lightning we cannot reference external javascript files, therefore the plotly library must be downloaded and saved as static resource.
Second, Lightning component with API higher than 39 uses locker service which make the component more secure but also more isolate, therefore you will need to use component with API version 39 (or less).

With those settings it is possible and quite easy to use Plotly.
Here is very simple example of Lightning component embedded in account Lightning page that display the total opportunities amount grouped by opportunities type.

1.Apex controller - use to collect opportunities data

public with sharing class PlotlyDemoController{


    @AuraEnabled
    public static String getAccountData(String accountId){
    
        map<String, object> m_retData = new map<String, object>();
        
        
        map<String, decimal> m_oppType_Amt = new map<String, decimal>();
        
        for(Opportunity opp : [select Id,Type,Amount from Opportunity where AccountId = :accountId]){
            if(! m_oppType_Amt.containsKey(opp.Type)){
                m_oppType_Amt.put(opp.Type, 0);
            }
            
            m_oppType_Amt.put(opp.Type, opp.Amount + m_oppType_Amt.get(opp.Type));
        }
        
        m_retData.put('labels', m_oppType_Amt.keySet());
        m_retData.put('values', m_oppType_Amt.values());
        
        return JSON.serialize(m_retData);
    }

}

2.Lightning component

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="PlotlyDemoController">
    <ltng:require scripts="{!$Resource.plotlyCode}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <div id="myDiv" style="width:600px;height:400px;"></div>
</aura:component>

3.Lighting Controller

({
    scriptsLoaded : function(component, event, helper) {
        var getAccountDataAction = component.get("c.getAccountData");
        
        getAccountDataAction.setParams({
            'accountId' : component.get("v.recordId")
        });
        
        getAccountDataAction.setCallback(this, function(response){
            
            var resData = JSON.parse(response.getReturnValue());
            
            var data = [
              {
                x: resData.labels,
                y: resData.values,
                type: 'bar'
              }
            ];
            
            Plotly.newPlot('myDiv', data);
        });
        
        $A.enqueueAction(getAccountDataAction);
    }
})

😏

Salesforce Advanced

Using Plotly in Lightning Component

No comments:

Post a Comment

Retire of Permission on Profiles