Highcharts:column drill down:JSON -

Highcharts:column drill down:JSON -

i trying create drill downwards highcharts column graph. can utilize examples , create work long info hardcoded. can illustration working info mysql database.

what need know how phone call in series.

example:

/// needs info mysql (a total sum) of x-data name = 'browser brands', info = [{ y: 55.11, color: colors[0], ////// drill downwards needs breakdown of info 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] } ///////// need drill show breakdown of info 1 time again } /// needs info mysql (a total sum) of y-data name = 'browser brands', info = [{ y: 55.11, color: colors[0], ////// drill downwards needs breakdown of info 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] } ///////// need drill show breakdown of info 1 time again }

so in theory how can have chart 1 first series show total x,y,z when either clicked, shows break downwards of data, when either of next columns clicked show yet 1 time again farther breakdown of data.

i understand there multiple mysql queries, multiple arrays. don't understand how phone call them when needed

take @ part:

click: function() { var drilldown = this.drilldown; if (drilldown) { // drill downwards 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 utilize $.getjson() there, , within $.getjson() utilize setchart() method info ajax. (not tested):

click: function() { var drilldown = this.drilldown; if (drilldown) { // drill downwards 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); } }

highcharts