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 · Accepted Answer · 2015-04-16 10:21:23Z

0

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/

answered Apr 16, 2015 at 10:21

Danilo

2,6967 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic Pie Chart With Json Data using chart.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related