Highcharts:column drill down:JSON

Question

I am trying to create a drill down Highcharts column graph. I can use the examples and make it work as long as the data is hardcoded. I can also get an example working with data from my MySQL database.

What I need to know is how to call in the series.

Example:

/// This needs to be data from the MySQL (a total sum) of X-data
name = 'Browser brands', 
data = [{
y: 55.11,
color: colors[0],
////// this drill down needs the a breakdown of the data
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
 ///////// I need another drill that will show a breakdown of the data again
}
/// This needs to be data from the MySQL (a total sum) of y-data
name = 'Browser brands', 
data = [{
y: 55.11,
color: colors[0],
////// this drill down needs the a breakdown of the data
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
///////// I need another drill that will show a breakdown of the data again
}

so in theory how can I have a chart the one the first series show a total X,Y,Z when either is clicked, it shows a break down of that data, when either of the next columns is clicked is show yet again a further breakdown of the data.

I understand there are multiple MySQL queries, multiple arrays. I just don't understand how to call them when needed

Answer 1

Take a look at this part:

click: function() {
                 var drilldown = this.drilldown;
                 if (drilldown) { // drill down

                     this.series.chart.setTitle({
                         text: drilldown.name
                     });

                     setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level);
                 } else { // restore
                    setChart(name, categories, data, null, level);
                 }
              }

Just use your $.getJSON() there, and inside that $.getJSON() use setChart() method with data from AJAX. something like this (not tested):

click: function() {
                 var drilldown = this.drilldown;
                 if (drilldown) { // drill down
                     var chart = this.series.chart;
                     $.getJSON(...., function(data){
                         chart.setTitle({
                             text: data.name
                         });
                         setChart(data.name, data.categories, data.data, data.color, data.level);
                     });
                 } else { // restore
                    setChart(name, categories, data, null, level);
                 }
              }