Salesforce Lightning Component – Radar Chart

To create Radar chart in lightning component, we will be using chart.js library. If you are new to lightning then please go through basics and also I would suggest to go through lightning trailhead modules.

Lightning Component for Radar Chart
Lightning Component for Radar Chart

Apex class

/**
 * Author	:	Jitendra Zaa
 * Desc		:	Controller class used to create demo RadarData to be used in Lightning Component
 * */
public class RadarChartData {
	
    @AuraEnabled
    public static String getLeadJSON(){
        
        List<Lead> lstLead = [SELECT Id, LeadSource FROM Lead limit 100 ];
        Map<String,Integer> mapLeadSource = new Map<String,Integer>();
        
        for(Lead l : lstLead)
        {
            if(mapLeadSource.containsKey(l.LeadSource))
            {
                mapLeadSource.put(l.LeadSource, mapLeadSource.get(l.LeadSource) + 1 ) ;
            }else{
                mapLeadSource.put(l.LeadSource, 1) ;        
            }
        }
        
        RadarDataWrapper radarData = new RadarDataWrapper();
        for(String key : mapLeadSource.keySet())
        {
            radarData.radarLabels.add(key);
            radarData.radarData.add(mapLeadSource.get(key));
        }
        
        return System.json.serialize(radarData);
    }
    
    /**
     * Wrapper class to serialize as JSON as return Value
     * */
    class RadarDataWrapper
    {
       public List<String> radarLabels {get;set;}
       public List<Integer> radarData {get;set;}
        
        public RadarDataWrapper(){
            radarLabels = new List<String>();
            radarData = new List<Integer>();
        }
    }
    
}

Annotation @AuraEnabled is used to provide access to lightning components that they can apex methods from Javascript. In above Apex class we have used wrapper class, where we are populating labels for Radar chart and value associated with them and returning JSON string.

RadarChart.cmp

<aura:component controller="RadarChartData" implements="force:appHostable">
    <ltng:require scripts="/resource/Chart_js/" afterScriptsLoaded="{!c.init}"/>

<div class="heading">
    	Radar Chart showing Lead count by Source
    </div>


<div>  
        <canvas aura:id="radarChart" id="radarCHart123" width="400" height="400"/>
    </div>

</aura:component>

We have specified that this component implements “force:appHostable” means we can create tab for this component and it can be accessed from Salesforce1 mobile navigation. External library “chart.js” is loaded from static resource named “chart_js” with the help of “ltng:require” tag. Once this javascript file is loaded, we are informing lightning framework to execute method “init()” of js controller.

RadarChartController.js

({
	init : function(component, event, helper) { 
		helper.setupRadarChart(component);
	}
})

Above Javascript controller simply calls method of javascript helper.

RadarChartHelper.js

({
    setupRadarChart : function(component) {
        
        var action = component.get("c.getLeadJSON");
        action.setCallback(this, function(a){
            var jsonRetVal = JSON.parse(a.getReturnValue()); 
            console.log(jsonRetVal.radarLabels);
            
            var radarChartData = {
			labels: jsonRetVal.radarLabels,
			datasets: [
                { 
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: jsonRetVal.radarData
                }
            ]
        };
      
        var el = component.find('radarChart').getElement();
        var ctx = el.getContext('2d');
        new Chart(ctx).Radar(radarChartData);   
            
        });
        $A.enqueueAction(action); 
	},  
	
})

Apex method is called from javascript helper. Once it is executed and result is returned, we are setting various values from JSON string returned in Radar chart library.

RadarChart.css

.THIS.heading {
    margin-top : 10px;
    font-weight:bold;
}
.THIS{
    padding-left : 10px;
}

Posted

in

by


Related Posts

Comments

3 responses to “Salesforce Lightning Component – Radar Chart”

  1. […] Jitendra zaa Jitendra became an MVP last year and has many Github projects based on Salesforce Heroku. Recently created a nice post on creating a radar chart as a lightning component. […]

  2. tammersalem Avatar
    tammersalem

    This is an awesome use of lightning components and chart.js !!!
    Fantastic article!!

  3. Priyanka Singh Avatar
    Priyanka Singh

    How can i access reports and dashboards into lightening component.My requirement is to show reports & dashboards into napili template but it is giving error while showing some reports.please tell how to do it or other approaches?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading