HighCharts: Drilldown to a Stacked Column

Anna Jeanine

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?

morganfree

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/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Highcharts drilldown in stacked area chart

From Dev

Highcharts column drilldown

From Dev

Highcharts: Stacked area drilldown to multiple series

From Dev

Highcharts - column chart with drilldown to waterfall

From Dev

Drilldown for grouped column chart in highcharts

From Dev

Highcharts no drilldown on bar / column click

From Dev

Highcharts - column chart with drilldown to waterfall

From Dev

Highcharts multiple column chart with drilldown, correct formatting of drilldown axes

From Dev

highcharts drilldown column chart change Aaxis lables

From Dev

drilldown feature with url property for column graph in Highcharts

From Dev

HighCharts stacked column range

From Dev

Highcharts overlapping and stacked column

From Dev

HighCharts stacked column range

From Dev

Highcharts stacked column bar with line

From Dev

Highcharts datalabel for each stacked column

From Dev

Highcharts Stacked Percentage Column Hyperlink

From Dev

Highcharts Stacked Percentage Column Hyperlink

From Dev

Highcharts: Column and Bar Chart labels are incorrect when I drilldown

From Dev

Lazy Highcharts drilldown

From Dev

Highcharts-ng with drilldown

From Dev

Highcharts-ng with drilldown

From Dev

HighCharts Drilldown - colorByPoint

From Dev

Manually drilldown highcharts

From Dev

Highcharts tooltip bug with stacked column chart

From Dev

set color of grouped stacked column in highcharts

From Dev

How to modify Column stacked percent Chart in Highcharts

From Dev

Stacked column highcharts change x and y

From Dev

HighCharts Stacked Column Adding Onclick Event to the chart

From Dev

stacked group column chart in highcharts example

Related Related

HotTag

Archive