Issue on Drilling Down and Up in Highcharts.js Usi

Question

Can you please take a look at This Demo and let me know how I can do the drilldown and drillup by using dom buttons in highcharts.js?

As you can see I have 3 btns as

<button type="button" id="msie-details" class="btn btn-default">MSIE Details</button>
<button type="button" id="firefox-details" class="btn btn-default">Firefox Details</button>
<button type="button" id="overview" class="btn btn-default disabled">Back to Overview </button>

and what I would like to do is ebanling user to drill in and up to overview by clicking on this buttons?

$("#msie-details").on("click", function(){
     $(this).addClass('disabled');
     $("#overview").removeClass('disabled');
 });
$("#firefox-details").on("click", function(){
     $(this).addClass('disabled');
     $("#overview").removeClass('disabled');
 });
$("#overview").on("click", function(){
     $(this).addClass('disabled');
      $("#msie-details").removeClass('disabled');
      $("#firefox-details").removeClass('disabled');
 });

Answer 1

You need to move the button binding up into the scope of the document ready (which is confusing, you have two variations of document ready -- one on the outer, one on the inner -- you only need one). You also can expose some variables to make things easier. So let's do this:

        ...
        msie = data[0].drilldown,
        firefox = data[1].drilldown;

Then in the buttons:

    // Custom btns
    $("#msie-details").on("click", function(){
         $(this).addClass('disabled');
         setChart(msie.name, msie.categories, msie.data, msie.color);
         $("#overview").removeClass('disabled');
     });
    $("#firefox-details").on("click", function(){
         $(this).addClass('disabled');
         setChart(firefox.name, firefox.categories, firefox.data, firefox.color);
         $("#overview").removeClass('disabled');
     });
    $("#overview").on("click", function(){
         $(this).addClass('disabled');
          setChart(name, categories, data);
          $("#msie-details").removeClass('disabled');
          $("#firefox-details").removeClass('disabled');
     });  

Working JSFiddle: http://jsfiddle.net/4skk9ycw/3/