HighCharts: Drilldown to a Stacked Column

Question

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 1

You just forgot to include the drilldown js (http://jsfiddle.net/ma50685a/38/)

Add the following script after highstock : <script src="https://code.highcharts.com/modules/drilldown.js"></script>

EDIT : Sorry I didn't read the question right... This works : http://jsfiddle.net/ma50685a/39/

Found here : http://www.semantia.com.au/articles/highcharts-drill-down-stacked-columns/

Answer 2

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/