Charts in Lightning component

In one of the recent Salesforce1 Mobile app project , we need to display charts in lightning components .

I researched some of the available options to accomplish same , and here i  landed with some of the Javascript Charting Libraries .


  • JustGuage (To draw Guage Chart )
  • ChartJS     (To draw rest of the charts )




Here are the few steps to include chart in lightning components .

1. Download resource file and create static resources .

2.a. Include static resource for Guage Chart in lightning components .

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  
     <ltng:require scripts="{!join(',', 
                               $Resource.JustGuage   + '/justgage-1.2.2/raphael-2.1.4.min.js', 
                               $Resource.JustGuage   + '/justgage-1.2.2/justgage.js')}"
                      afterScriptsLoaded="{!c.generateGauageChart}" />
    <div class="slds-box">
        <div id="guagechart_mApp" class="200x160px"></div>
    </div>
</aura:component>

3.a. Set Guage data in controller .

({
    generateGauageChart : function(component, event, helper) {
        //var ctx = component.find("linechart").getElement();
        var g = new JustGage({
            id: 'guagechart_mApp',
            value: 67,
            min: 0,
            max: 100,
            title: "Target"
          });
    }
       
})



2.b . Include static resource for Doughnut Chart in lightning components .

<aura:component implements="flexipage:availableForAllPageTypes">
<ltng:require scripts="{!$Resource.ChartJS}" afterScriptsLoaded="{!c.generateFunnelChart}"/>
     <ltng:require scripts="{!join(',', 
                               $Resource.ChartJS, 
                               $Resource.GauzeJS)}"
                      afterScriptsLoaded="{!c.generateFunnelChart}" />
    <aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>

    <style>
        .canvas-container-funnel {
        position: relative;
        }
        
        .funnelChart_App {
        position: absolute;
        }
    </style>
    <div class="slds-box canvas-container-funnel " >
<canvas aura:id="funnelChart_mAPP" id="funnelChart_App" height="70" width="150"></canvas>
    </div>
</aura:component>
3.b . Set Doughnut Chart data in controller .
({
    generateFunnelChart : function(component, event, helper) {
        
        var ctx = component.find("funnelChart_mAPP").getElement();
        console.log('ctx',ctx);
        var myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ["M", "T", "W", "T", "F", "S", "S"],
                datasets: [{
                    backgroundColor: [
                        "#2ecc71",
                        "#3498db",
                        "#95a5a6",
                        "#9b59b6",
                        "#f1c40f",
                        "#e74c3c",
                        "#34495e"
                    ],
                    data: [12, 19, 3, 17, 28, 24, 7]
                }]
            }
            
        });
    },
    
    doneRendering : function(component, event, helper){
        var iframes = document.getElementsByClassName("chartjs-hidden-iframe");
        console.log('iframes',iframes);
        console.log('iframe',iframes[0]);
       
        if(iframes && iframes.length>0){
            //var iframe = iframes[0];
        //iframe.style.position = 'relative';
            document.getElementsByClassName("chartjs-hidden-iframe")[0].style.position = "relative";
        }
    }
})

Comments

  1. I think that I'm into your pieces of writing. They really help me out. I wait for your posts every week. I learn many new interesting things from the articles. The information is essential for me. I want to thank you for sharing. https://bit.ly/2y8RMwK, https://bit.ly/2QslLr4, Autoketing

    ReplyDelete
  2. The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. jogos friv gratis 2019
    Jogos 2019
    jogos friv

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete

Post a Comment

Popular posts from this blog

A Quick Salesforce OAuth 2.0 Usage Demonstration

Salesforce To Authorize.Net Integration