title: How to load data dynamically using JSON call in Highcharts Drill Down pie chart?
body: <p>I am working on a graph that I have to show as drill down with dynamic data. First I tried to load static drill down data and graph worked perfectly fine. But I need to load data dynamically, for that, I am using JSON calls to fetch data from Server with given "point name" (selected point of pie chart). When it loads the first time, it is working fine to show series data in a pie chart. But when I am clicking on pie chart objects, I receive a server call and gets data as JSON response but it's not updating pie chart.  Also, I need to keep navigation, so I can go forward or backwards at any point.</p>
  
  <p>I am using below code but it is not working as multiple level pie chart, does anybody has done same, who can review below code and suggest how can I do this.   </p>
  
  <pre><code>        var options = {
              chart: {
                  renderTo: 'chart_divDrillDownGraph',
                  type: 'pie',
                  events: {
                      drilldown: function (e) { 
                          if (!e.seriesOptions) {
                              if (!e.seriesOptions) {
                                  $.get("http://localhost:54877/GetStats.aspx?key=drilldownGraph&amp;selectedPointName=" + e.point.name, function (data) {
                                      this.addSeriesAsDrilldown(e.point, data); 
                                  });
                              }
                          }
                      }
                  }
              },
              title: {
                  text: 'Report of March 2017'
              },
              subtitle: {
                  text: 'Click the slices to view details.'
              },
              plotOptions: {
                  series: {
                      dataLabels: {
                          enabled: true,
                          format: '{point.name}: {point.y:.1f}&lt;span style="unicode-bidi: bidi-override;"&gt;%&lt;/span&gt;'
                      }
                  }
              },
  
              tooltip: {
                  headerFormat: '&lt;span style="font-size:11px"&gt;{series.name}&lt;/span&gt;&lt;br&gt;',
                  pointFormat: '&lt;span style="color:{point.color}"&gt;{point.name}&lt;/span&gt;&lt;span style="unicode-bidi: bidi-override;"&gt;: &lt;b&gt;{point.y:.2f}%&lt;/b&gt; of total&lt;/span&gt;&lt;br/&gt;'
              },
              series: [{}],
  
              drilldown: {
              }
          };
  
          if (this.name != "undefined" &amp;&amp; this.name != null)
              selectedlevelName = this.name;
          else
              selectedlevelName = "";
  
          var url =  "http://localhost:54877/GetStats.aspx" + "?key=drilldownGraph&amp;selectedPointName=" + selectedlevelName;
          $.getJSON(url,  function(data) {
              options.series[0].data = data; 
              var chart = new Highcharts.Chart(options);
          });
  </code></pre>
  
  <p>But I am getting below error </p>
  
  <blockquote>
    <p>TypeError: this.addSeriesAsDrilldown is not a function </p>
  </blockquote>
  
  <p>I am using following JS of high charts
  <a href="http://code.highcharts.com/highcharts.js" rel="nofollow noreferrer">http://code.highcharts.com/highcharts.js</a>
  <a href="http://code.highcharts.com/modules/drilldown.js" rel="nofollow noreferrer">http://code.highcharts.com/modules/drilldown.js</a></p>
  
  <p><a href="https://i.stack.imgur.com/y8wfO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y8wfO.jpg" alt="enter image description here"></a></p>