Dilani Maheshwaran Dilani Maheshwaran - 1 month ago 17
Javascript Question

Add data dynamically to the top level in highcharts when drilling up

I am using asyn drilldown in highcharts.
When I drilldown I am calling a service to get data and updating the series (in the drilldown event)

drilldown: function(e) {
.....
// Service call to get data for the chart
clientObj.getAggData(srcTbl, fields, function(res) {

// data returned from service is set to the chart series
chart.addSeriesAsDrilldown(e.point, res);

}, nextLevel, filterStr);
}


This part works fine. I want to do something similar when i drill up as well.I want to call service and get data for the top level series which has to be done in the 'drillup' event of the chart object.

Currently what's happening is the data stored in chart.drilldownLevels.series is being taken when i drill-up. If I try to use addSeries API it is adding another series on top of the one stored in chart.drilldownLevels.series.

Other APIs like update() are not working as well.

Answer

You can use the drill up event for the same and assign the value for the necessary levels,

events: {
    drillup: function(e) {
      this.options.series[0].data[0] = {
        name: 'Databases',
        y: 20,
        drilldown: 'dbs'
      }
    }
  }

In case of adding a new datapoint you should call this.series[0].setData()

this.series[1].setData([{
            name: 'Dieren',
            y: 5,
            drilldown: 'animals'
          }, {
            name: 'Fruit',
            y: 2,
            drilldown: 'fruits'
          }, {
            name: "Auto's",
            y: 4
          }, {
            name: "test's",
            y: 4
          }], false, false);

DEMO

DEMO USING CUSTOM Button