score:6

Accepted answer

lazy drilldowns are supported by highcharts, though it uses the term "async drilldown". 

$(function() {

  // create the chart
  $('#container').highcharts({
    chart: {
      type: 'column',
      events: {
        drilldown: function(e) {
          if (!e.seriesoptions) {

            var chart = this,
              drilldowns = {
                'animals': {
                  name: 'animals',
                  data: [
                    ['cows', 2],
                    ['sheep', 3]
                  ]
                },
                'fruits': {
                  name: 'fruits',
                  data: [
                    ['apples', 5],
                    ['oranges', 7],
                    ['bananas', 2]
                  ]
                },
                'cars': {
                  name: 'cars',
                  data: [
                    ['toyota', 1],
                    ['volkswagen', 2],
                    ['opel', 5]
                  ]
                }
              },
              series = drilldowns[e.point.name];

            // show the loading label
            chart.showloading('simulating ajax ...');

            settimeout(function() {
              chart.hideloading();
              chart.addseriesasdrilldown(e.point, series);
            }, 1000);
          }

        }
      }
    },
    title: {
      text: 'async drilldown'
    },
    xaxis: {
      type: 'category'
    },

    legend: {
      enabled: false
    },

    plotoptions: {
      series: {
        borderwidth: 0,
        datalabels: {
          enabled: true
        }
      }
    },

    series: [{
      name: 'things',
      colorbypoint: true,
      data: [{
        name: 'animals',
        y: 5,
        drilldown: true
      }, {
        name: 'fruits',
        y: 2,
        drilldown: true
      }, {
        name: 'cars',
        y: 4,
        drilldown: true
      }]
    }],

    drilldown: {
      series: []
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

score:6

for that level of functionality, i'd just go ahead and create it yourself. use the point.events.click callback to make the ajax call and replace the series:

plotoptions: {
  series: {
    point: {
      events: {
        click: function(event) {
          var chart = this.series.chart;
          var name = this.name;
          $.ajax({
            url: name + ".json",
            success: function(data) {
              swapseries(chart,name,data);
            },
            datatype: "json"
          });
        }
      }
    }
  }
},

where swapseries is:

  function swapseries(chart, name, data) {
    chart.series[0].remove();
    chart.addseries({
      data: data,
      name: name,
      colorbypoint: true
    });
  }

here's a working example.


Related Query

More Query from same tag