2

I want to display pie chart on lightning component. I was referring this link Google Visualization Pie Chart to create chart on lightning component but it not work. when i check my console log i am getting error message.enter image description here

lightning component:-

<aura:component >
Hello from Lightning Component.....
<ltng:require styles="https://www.gstatic.com/charts/44/css/util/util.css" scripts="/resource/loader" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</aura:component>

lightning controller:-

({
    afterScriptsLoaded : function(component, event, helper) {
       // debugger;
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
         function drawChart() {
        //debugger;
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        //var chart = component.find("piechart").getElement()
        chart.draw(data, options);  
    }
    },
})

Please help me how to do this.

Thanks

1

The issue is because your CSS file can't be loaded from external server . Lightning will block any external callout from client side for security reasons .

You can store the CSS file inside static resource and reference the same in your component .

  • @ Mohith i will try this but i did not get any output. – Piyush Kumar May 11 '16 at 12:26
  • 1
    Check your console to see if any other issues – Mohith Shrivastava May 11 '16 at 12:26
  • Hello Mohith Now i was getting same message Refused to load the stylesheet 'gstatic.com/charts/44/css/util/util.css' because it violates the following Content Security Policy directive: "style-src 'self' chrome-extension: 'unsafe-inline'". – Piyush Kumar May 11 '16 at 12:54
  • So yes your CSS file is again referencing from external source. Download that and keep all in static resource – Mohith Shrivastava May 11 '16 at 12:56
  • I download it use this css file through static resource but i still get same error message. – Piyush Kumar May 11 '16 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.