CODEWITHSUNDEEP
javascripthighcharts
geek
geek

Reputation: 359

Show/Update Separate Bar graphs with Drilldown Pie chart of Highcharts

I am trying to Show/Update a Bar graph in a different div with drilldown of piechart. I am using highcharts - http://www.highcharts.com/demo/pie-drilldown

Basically, at page load, there should be a piechart and a bar graph (lets name it as bargraph1. This bar graph will be in different div than pie chart. When I drill down in the piechart, it should update the bargraph1 with a new bargraph(lets name it as bargraph2). When I press back button next to piechart, it should bring back the old piechart and bargraph (bargraph1).

Let me know how to implement this graph.

Upvotes: 1

Views: 387

Answers (1)

morganfree
morganfree

Reputation: 12472

You can update the bargraph's data on drilldown events.

So if you have two sets of data, e.g.

var bargraphData = {
  bar1: [1,2,3,4,5],
  bar2: [5,4,3,2,1]
}

You can update bargraph's series - on drilldown with the second set of data, on drillup with the first.

 chart: {
    type: 'pie',
    events: {
      drilldown: function () {
        bargraph.series[0].update({
          data: bargraphData['bar2']
        });
      },
      drillup: function () {
        bargraph.series[0].update({
          data: bargraphData['bar1']
        });
      }
    }
},

example: http://jsfiddle.net/n2kttm9x/

Upvotes: 2

Related Questions