HighCharts : dynamic data with drill down

Question

I need to generate a interactive chart with drill down functionality. I came across HighCharts, it is very nice and cool, but the data seems to be static. Is there any way to do dynamic data in HighChart and dynamic data for drill down.

data = [{
                    y: 55.11,
                    color: colors[0],
                    drilldown: {
                        name: null,
                        categories: null,
                        data: null,
                        color: colors[0]
                    }
                }, {
                    y: 21.63,
                    color: colors[1],
                    drilldown: {
                        name: 'Firefox versions',
                        categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
                        data: [0.20, 0.83, 1.58, 13.12, 5.43],
                        color: colors[1]
                    }
                }];

where the value of y is being assigned with static value. I need it to be dynamic and assign a drilldown to each of the value. Can it be done in HighCharts or is there other tools to use?

Answer 1

Here is something that you can use as a starting point:

var level = 0;
var refreshChart = function(){  
    new Highcharts.Chart({
        chart: {
            renderTo: 'chart'
        },

        xAxis: {
            categories: getXAxisValues()
        },

        series: [
                    {
                        data: getSeries1()
                    },
                    {
                        data: getSeries2()
                    }
            ],

        plotOptions: {
            series: {
                point: {
                    events: {
                        click: function () {
                            level = 1;
                            refreshChart();
                        }
                    }
                }
            }
        }
    });
};

var getSeries1 = function(){
    if(level == 0)
        // returns series data as described in highcharts documentation
    else
        // return some other data
}

// similar to getXAxisValues() if you have it and for getSeries2 if you have another serie