Ticker

6/recent/ticker-posts

Lightning custom donut chart using Highcharts | Aura component custom chart

 

Lightning custom donut chart using Highcharts | Aura component custom chart


DonutChart.apxc 

public class DonutChart {
@AuraEnabled
    public static String getOppJSON(){
        
        List<Opportunity> lstopp = [SELECT Id, StageName FROM Opportunity];
        Map<String,Integer> mapLeadSource = new Map<String,Integer>();
        
        for(Opportunity l : lstopp)
        {
            if(mapLeadSource.containsKey(l.StageName))
            {
                mapLeadSource.put(l.StageName, mapLeadSource.get(l.StageName)+1) ;
            }else{
                mapLeadSource.put(l.StageName, 1) ;
            }
        }
        system.debug('map values--'+mapLeadSource);
        list<RadarDataWrapper> radarData = new list<RadarDataWrapper>();
        
        for(String key : mapLeadSource.keySet())
        {
            RadarDataWrapper rdw = new RadarDataWrapper();
            rdw.name=key;
            rdw.y=mapLeadSource.get(key);
            radarData.add(rdw);
        }
        system.debug('rdw---'+radarData);
        return System.json.serialize(radarData);
        //return null;
    }
    
    /**
* Wrapper class to serialize as JSON as return Value
* */
    class RadarDataWrapper
    {
        @AuraEnabled
        public String name;
        @AuraEnabled
        public integer y;
        
    }
}


DonutChart.cmp 

<aura:component controller="DonutChart" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
    <ltng:require scripts="{!join(',',$Resource.Highcharts,
                           $Resource.highchart3d,
                           $Resource.Highchartsexport
                           )}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
    <aura:attribute name="chartType" type="string"/>
    <aura:attribute name="chartTitle" type="string" default="Opportunity and Stage"/>
    <aura:attribute name="chartSubTitle" type="string" default="Displaying Opportunity Count by Stage"/>
    <aura:attribute name="data" type="string"/>
    
    <div class="slds-card">
        <div class="slds-grid slds-wrap slds-grid--pull-padded">
            <div class="slds-col--padded cusdiv">
                <div aura:id="donutchart" style="height: 400px"></div>
            </div>
        </div>
    </div>
</aura:component>


DonutChartController.js

({
    afterScriptsLoaded : function(component, event, helper) 
    {
        helper.doInit(component,event,helper);
    }    
    
})


DonutChartHelper.js

({
    doInit : function(component, event, helper) 
    {
        var action = component.get("c.getOppJSON"); 
        action.setCallback(this, function(response) { 
            var state = response.getState(); 
            //alert(state);
            if (state === "SUCCESS") { 
                var dataObj= response.getReturnValue(); 
                //jsonData = dataObj;
                console.log('===='+dataObj);
                component.set("v.data",dataObj);
                helper.donutchart(component,event,helper);
                
            } 
        });
        $A.enqueueAction(action);
    },
 
    donutchart : function(component,event,helper) {
        var jsonData = component.get("v.data");
        var dataObj = JSON.parse(jsonData);
        
        new Highcharts.Chart({
            chart: {
                renderTo: component.find("donutchart").getElement(),
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45
                }
            },
            title: {
                text: component.get("v.chartTitle")
            },
            subtitle: {
                text: component.get("v.chartSubTitle")
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b>'
            },
            plotOptions: {
                pie: {
                    innerSize: 100,
                    depth: 45,
                    style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                        shadow: true
                        
                    }
                }
            },
            series: [{
                type: 'pie',
                name:'Count',
                data:dataObj
            }]
            
        });
        
    }
})









Post a Comment

0 Comments