Question

I’m trying to create a pie chart with javascript that will allow users to click on a slice and “view what makes up that slice.” If you’ve ever used mint.com you’ll know what I mean – say you’re viewing an expenses pie chart and you click the “Automobile” slice, then you see the slice expand into a new chart of Gas, Maintenance, etc.

To take this a step further, I’m dealing with a large amount of data, so being able to fetch (ajax) the new data when the slice is clicked would be a useful option as well (though I can probably get away without it).

Perhaps “nested”, “multi-level” and “drill-down” are not the right terms because I’ve been searching all day and cannot seem to find a solution.

Does anyone know of a library for this? Thanks in advance!

Answer 1

I’ve implemented similar drilldown systems using the HighCharts point click event. Here’s the rough syntax:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    series: [{
        data: myInitialDataArray, // make sure each data point has an id
        point: {
            events: {
                click: function () {
                    $.post('/get/data/by/id/' + this.id, function(data) {
                        // you may need to format your data here
                        chart.series[0].setData(data);
                    });
                }
            }
        }
    }]
});

In this example, you define a click event that uses the point’s id value (this.id) to perform an Ajax post to a URL. You then use the data from your post to re-bind the chart series.

Please note that each time you use the setData function to update the chart, each data point needs to have an id value in order for the drilldown to continue.

Hope this helps!