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