Dynamic Pie Chart With Json Data using chart.js

Question

I am creating a piechart using chart.js. I have a json data like

   [
     {
       "Subcontractor": "C1",
       "Deficiency": 67
     },
     {
       "Subcontractor": "C2",
       "Deficiency": 25
     },
     {
      "Subcontractor": "C3",
      "Deficiency": 12
     }, 
     {
      "Subcontractor": "C5",
      "Deficiency": 7
     },
     {
      "Subcontractor": "C4",
      "Deficiency": 5
     },
     {
      "Subcontractor": "C6",
      "Deficiency": 1
     }
   ]

I want to use the Subcontractor value as the pie chart label and the Deficiency value as the chart value.

How to pass this dynamically into the pie chart in chart.js?

Also, when I click on a particular slice I want to reload/refresh the pie chart with different data.

Danilo Danilo · Accepted Answer · 2015-04-16T10:21:23

You could bind to the click event of the chart, get the active segment of the pie chart and based on that change the information displayed by the chart.

The example below resets the chart when you click on the Red segment, and adds to the charts all entries of an arbitrary dataset data2

$("#myChart ").click(  
    function (evt) {
        var activePoints = myChart.getSegmentsAtEvent(evt);
        var activeLabel = activePoints[0].label;

        if (activeLabel == "Red") {
            while (myChart.segments.length > 0) {
                myChart.removeData()
            }
            for (i = 0; i < data2.length; i++) {
                myChart.addData(data2[i])
            }
        }
    });
});

Full example here: http://jsfiddle.net/bsxg7jt7/

Dynamic Pie Chart With Json Data using chart.js

1 Answers