Anna Jeanine Anna Jeanine - 22 days ago 10
jQuery Question

HighCharts: Drilldown to a Stacked Column

Hi everyone! I am trying to create a certain

HighChart
, but I am not sure on how I should format my
drilldown
data and I can't find any example on the internet!

This JSfiddle shows how far I have gotten: http://jsfiddle.net/ma50685a/37/.

The HighChart is suppose to visualise comments that have been deleted. The first two bars are mean amounts of filtered comments. When the drilldown is activated, I would to have stacked columns of websites and four categories of why a comment has been filtered (nasty comments, spam etc).

Could someone help me out with this or have an example of how to format the drilldown data?

Answer

To have a stacked column you need multiple series, to have multiple series after the drilldown you have to add the series dynamically, e.g. on drilldown event.

Each property of the object below represents a series and it is associated with the top level series name. Object '1' will appear after the click on the first column and will span 4 categories.

var drilldowns = {
          1: {
            stacking: 'normal',
            name: 'facebook',
            color: Highcharts.getOptions().colors[0],
            data: [
              ['nasty comments', 2],
              ['spam', 3],
              ['category-3', 10],
              ['category-4', 15]
            ]
          },

          66: {
            name: 'second-column-drilldown',
            data: [
              ['second-column-drilldown-point', 10]
            ]
          }
        };

The next object '1' will be stacked with the data from the drilldowns.1 object:

var drilldowns2 = {
          1: {
            color: Highcharts.getOptions().colors[1],
            colorIndex: 1,
            stacking: 'normal',
            name: 'youtube',
            data: [
              ['nasty comments', 5],
              ['spam', 10],
              ['category-3', 10],
              ['category-4', 15]
            ]
          }
        };

And finally the series must be added and the drilldown is fired.

var series = drilldowns[e.point.name],
            series2 = drilldowns2[e.point.name],
            series3 = drilldowns3[e.point.name];

        this.addSingleSeriesAsDrilldown(e.point, series);
        this.addSingleSeriesAsDrilldown(e.point, series2);
        this.addSingleSeriesAsDrilldown(e.point, series3);
        this.applyDrilldown();

example: https://jsfiddle.net/ahjkouuh/