Plot a bar graph using Highcharts drilldown with two different JSON end points

Question

I have two JSON end points. I am trying to plot a Highcharts bar graph with drilldown. The drilldown will point to another JSON endpoint. In the graph data is coming dynamically from end points.

JSON 1 :- https://api.myjson.com/bins/156yh3

JSON 1 Structure :-

[{
    "name": "cricket",
    "number": "2"
}]

It will first plot the graph with JSON 1 Data. In the first graph, X-Axis represents "name" and Y-Axis represents "number". Whenever we click on any bar then it will call the JSON 2 endpoint and pass the clicked bar "name" as URL parameter.

JSON 2 end point looks like, api.domain.com/{{name}}//

if we click on "orange" bar then request url will change to api.domain.com/cricket/

JSON 2 Structure :-

[{
    "player": "xyz",
    "points": "2"
}]

In the second graph, X-Axis represents "player" and Y-Axis represents "points". I think, I have to call a Ajax request in drilldown when a bar is clicked. I can plot the first graph but what is the recommended way to plot the second graph, which will come in drill down.

Code for graph 1 :-

$(function() {
  $.getJSON("https://api.myjson.com/bins/156yh3", function(data) {
    console.log(data);
    Highcharts.chart('container', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Name Vs Numbers'
      },
      subtitle: {
        text: 'Chart View Here'
      },
      xAxis: {
        type: 'category',
        categories: data.map(function(x) {
          return x.name;
        })
      },
      yAxis: {
        title: {
          text: 'Numbers'
        }
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        series: {
          borderWidth: 0,
          dataLabels: {
            enabled: true,
            format: '{point.y:.1f}'
          }
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
      },
      series: [{
        colorByPoint: true,
        data: data.map(function(x) {
          return x.number * 1;
        })
      }]
    });
  });
});

HTML :-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>

Answer 1

Refer to this live demo: http://jsfiddle.net/kkulig/1o4mr6jk/

It always adds a new drilldown series (with randomly generated data from the API) on point click event and performs drilldown.

In callback for series.point.events.click I used addSeriesAsDrilldown:

  plotOptions: {
    series: {
      point: {
        events: {
          click: function(e) {
            var point = this,
              chart = point.series.chart;

            $.getJSON('https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json&callback=?', function(data) {
              chart.addSeriesAsDrilldown(point, {
                data: data
              });
            });

          }
        }
      }
    }
  },

You can use the value of point.name to construct your URL.

---

It seems that there's some issue with the core code - it throws an error on drillup (you can check that by commenting out everything before var chart = Highcharts.chart('container', {). this.ddDupes in H.Chart.prototype.drillUp function is undefined so its length property cannot be accessed. I modified the core code by changing the following piece of code:

this.ddDupes.length = []; // #3315

to this:

if (this.ddDupes) {
  this.ddDupes.length = []; // #3315
}

and everything works fine.

EDIT

I found a better solution. It's based on the official Highcharts demo referred in the API record for chart.events.drilldown: https://api.highcharts.com/highcharts/chart.events.drilldown

Live demo: http://jsfiddle.net/kkulig/u1z5z40b/

var chart = Highcharts.chart('container', {

  chart: {
    type: 'column',
    events: {
      drilldown: function(e) {
        var chart = this;

        $.getJSON('https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json&callback=?', function(data) {
          chart.addSeriesAsDrilldown(e.point, {
            data: data
          });
        });
      }
    }
  },

  series: [{
    data: [{
      name: 'John',
      y: 1,
      drilldown: true
    }, 2],
  }]
});

drilldown: true indicates that the drilldown event should happen even though there's no drilldown series explicitly assigned to the point yet.