CODEWITHSUNDEEP
highchartsheatmapaxisdrilldown
vegaelce
vegaelce

Reputation: 145

Highcharts heatmap specific drilldown on axis

I build a drillable heatmap with Highchart. It's working well but I need to enhance the capabilities of drilldown on it. You can see the demo here : https://jsfiddle.net/vegaelce/7wc6t2ex/ I would like to be able to drill on the Y Axis and on the X Axis on specific series. In the example, by clicking on "California" axis label, I would like the chart drill on 'California_years' drilldown serie. In the same way, I'd like to be able to click on X-Axis, in the example, by clicking on '2015' label value, the chart would drill to 'States_2015' drilldown serie.

Notice that I use axe_x and axe_y values in each serie to change the axis of the chart on drilldown/drillup event :

    events:{
      drilldown: function(e) {
        var chart = this;
        chart.yAxis[0].update({
                type: 'category',
                categories: y_axes[e.seriesOptions.axe_y]
                        });
        chart.xAxis[0].update({
                type: 'category',
                categories: x_axes[e.seriesOptions.axe_x]
                        });
      },
      drillup: function(e) {
        var chart = this;
        chart.yAxis[0].update({
                type: 'category',
                categories: y_axes[e.seriesOptions.axe_y]
                        });
        chart.xAxis[0].update({
                type: 'category',
                categories: x_axes[e.seriesOptions.axe_x]
                        });
      }
    }

How can I achieve these features ? Thanks

Upvotes: 0

Views: 219

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You can check if e.category is defined, if it is, the drilldown was triggered by clicking on axis label. Next, you need to only bind the category with proper drilldown options. For example:

  chart: {
    type: 'heatmap',
    events: {
      drilldown: function(e) {
        if (typeof e.category !== 'undefined') {
          if (e.category === 0) {
            e.seriesOptions = this.options.drilldown.series[3];

          } else if (e.category === 3) {
            e.seriesOptions = this.options.drilldown.series[2]
          }
        }

        var chart = this;
        chart.yAxis[0].update({
          type: 'category',
          categories: y_axes[e.seriesOptions.axe_y]
        });
        chart.xAxis[0].update({
          type: 'category',
          categories: x_axes[e.seriesOptions.axe_x]
        });
      },
      ...
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/186mdyfx/

Upvotes: 0

Related Questions