charts - Highcharts: Stacked column with Drilldown -
i'm trying implement stacked column drilldown, think there's bug, when click , return original chart columns change "transparent", or i'm doing wrong?
here js:
http://jsfiddle.net/nulty/410/
i'm using 3 categories:
var chart; $(document).ready(function() { var colors = highcharts.getoptions().colors, categories = ['msie', 'firefox','chrome'],
take code, think can you.
http://jsfiddle.net/nulty/753/
var chart; $(document).ready(function() { var colors = highcharts.getoptions().colors, categories = ['msie', 'firefox', 'chrome', 'safari', 'opera'], name = 'browser brands', level = 0, data = [{ y: 55.11, color: colors[0], drilldown: { type: 'pie', name: 'msie versions', categories: ['msie 8.0', 'msie 6.0', 'msie 7.0', 'msie 9.0'], level: 1, data: [11,10.85, 7.35, 2.41], color: colors[0] } }, { y: 21.63, color: colors[1], drilldown: { type: 'pie', name: 'firefox versions', categories: ['firefox 3.6', 'firefox 4.0', 'firefox 3.5', 'firefox 3.0', 'firefox 2.0'], data: [13.52, 5.43, 1.58, 0.83, 0.20], color: colors[1] } }, { y: 11.94, color: colors[2], drilldown: { type: 'pie', name: 'chrome versions', categories: ['chrome 10.0', 'chrome 11.0', 'chrome 8.0', 'chrome 9.0', 'chrome 12.0', 'chrome 6.0', 'chrome 5.0', 'chrome 7.0'], data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12], color: colors[2] } }, { y: 7.15, color: colors[3], drilldown: { type: 'pie', name: 'safari versions', categories: ['safari 5.0', 'safari 4.0', 'safari win 5.0', 'safari 4.1', 'safari/maxthon', 'safari 3.1', 'safari 41'], data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14], color: colors[3] } }, { y: 2.14, color: colors[4], drilldown: { type: 'pie', name: 'opera versions', categories: ['opera 11.x', 'opera 10.x', 'opera 9.x'], data: [1.65, 0.37, 0.12], color: colors[4] } }], data2 = [{ y: 21.63, color: colors[1], drilldown: { name: 'firefox versions', categories: ['firefox 3.6', 'firefox 4.0', 'firefox 3.5', 'firefox 3.0', 'firefox 2.0'], data: [13.52, 5.43, 1.58, 0.83, 0.20], color: colors[1] } }, { y: 11.94, color: colors[2], drilldown: { name: 'chrome versions', categories: ['chrome 10.0', 'chrome 11.0', 'chrome 8.0', 'chrome 9.0', 'chrome 12.0', 'chrome 6.0', 'chrome 5.0', 'chrome 7.0'], data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12], color: colors[2] } }, { y: 7.15, color: colors[3], drilldown: { name: 'safari versions', categories: ['safari 5.0', 'safari 4.0', 'safari win 5.0', 'safari 4.1', 'safari/maxthon', 'safari 3.1', 'safari 41'], data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14], color: colors[3] } }, { y: 2.14, color: colors[4], drilldown: { name: 'opera versions', categories: ['opera 11.x', 'opera 10.x', 'opera 9.x'], data: [1.65, 0.37, 0.12], color: colors[4] } },{ y: 55.11, color: colors[0], drilldown: { type: 'column', name: 'msie versions', categories: ['msie 8.0', 'msie 6.0', 'msie 7.0', 'msie 9.0'], level: 1, data: [11,10.85, 7.35, 2.41], color: colors[0] } }]; function setchart(name, categories, data, color, level, type) { chart.xaxis[0].setcategories(categories); var datalen = data.length; chart.series[0].remove(); if(datalen === 1){ chart.series[0].remove(); } for(var = 0; i< datalen; i++){ chart.addseries({ type: type, name: name, data: data[i], level: level, color: color || 'white' }); } } chart = new highcharts.chart({ chart: { renderto: 'container', type: 'column' }, title: { text: 'browser market share, april, 2011' }, subtitle: { text: 'click columns view versions. click again view brands.' }, xaxis: { categories: categories }, yaxis: { title: { text: 'total percent market share' } }, plotoptions: { column: { stacking: 'normal', cursor: 'pointer', point: { events: { 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, drilldown.type); } else { // restore setchart(name, categories, [data,data2], null, level, 'column'); } } } }, datalabels: { enabled: true, color: colors[0], style: { fontweight: 'bold' }, formatter: function() { return this.y +'%'; } } }, pie: { cursor: 'pointer', point: { events: { 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, drilldown.type); } else { // restore setchart(name, categories, [data,data2], null, level, 'column'); } } } }, datalabels: { enabled: true, color: colors[0], style: { fontweight: 'bold' }, formatter: function() { return this.y +'%'; } } } }, tooltip: { formatter: function() { var point = this.point, s = ''; switch (this.series.options.level) { case 0: s = 'row 1 level 1 instructions<br/>'; s += ' row 2 level 1 instructions'; break; case 1: s = 'row 1 level 2 instructions <br/>'; s += ' row 2 level 2 instructions'; break; case 2: s = 'row 1 level 3 instructions<br/>'; s += 'row 2 level 3 instructions'; break; } return s; } }, series: [{ name: name+" 1", level: level, data: data, color: 'white' },{ name: name, level: level, data: data2, color: 'white' }], exporting: { enabled: false } }); });
Comments
Post a Comment