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.

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;
}