Dynamic Pie Chart With Json Data using chart.js

by

👍: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/

Leave a comment