jquery - Unable to Create Chart in Highcharts and id is undefined

Question

Hi i am building a pie chart by passing json array to drawchart it displaying labels of chart but unable to find the chart.i need a donut chart where each slice is clickable which carries a id as it parameter when i click the slice it need to open a another chart of that particular slice

  <script>
       $(document).ready(function () {
           $.ajax({
               type: "POST",
               contentType: "application/json; charset=utf-8",
               url: "bar.aspx/DistrictAnalysis",
               data: "{}",
               dataType: "json",
               success: function (Result) {
                   Result = Result.d;
                   var data = [];
                   for (var i in Result) {
                       //var jsondata = new Array(Result[i].City, Result[i].DevelopmentPercentage, Result[i].ID);
                       var jsondata = { city: Result[i].City, DevelopmentPercentage: Result[i].DevelopmentPercentage, ID: Result[i].ID }
                       data.push(jsondata);
                   }
                   DreawChart(data);
                   console.log(data);
                   
               },
               error: function (Result) {
                   alert("Error");
               }
           });
      
           function DreawChart(series) {
  
           $('#container').highcharts({
               chart: {
                   plotBackgroundColor: null,
                   plotBorderWidth: null,
                   plotShadow: false,
                   type: 'pie'
               },
               title: {
                   text: 'Village Development Measuring System'
               },
               tooltip: {
                   formatter: function () {
                       return '<b>' + this.point.city + '</b>: ' + this.point.DevelopmentPercentage + ' %';
                   }
               },
         
               plotOptions: {
                   pie: {
                       allowPointSelect: true,
                       cursor: 'pointer',
                       dataLabels: {
                           enabled: true,
                           format: '<b>{point.city}</b>: {point.percentage:.1f} %',
                           style: {
                               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                           },
                           connectorColor: 'silver'
                       }
                   }
               },
             
               series: [
                  {
                      data: series,
                     type: 'pie',
                     dataType: 'json',
                      animation: false,
                      point: {
                          events: {
                              click: function (event) {
                                  //var id = this.ID;
                                  
                                  //alert(id);
                                 
                                  ////alert(event.point.ID);
                                  //alert(this.point.ID);
                                  //alert(this.x [![able to get id but chart cannot be created][2]][2]+ " " + this.y);
                              }
                          }
                      }
                  }
               ],
           });
       }
       });
   </script>
[![able to get id but chart cannot be created][1]][1]

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

Answer 1

Let's focus on a single problem at a time. I assume that your data is valid are loaded successfully. It is possible to use exemplary data and show your problem in a JSFiddle example - http://jsfiddle.net/9e79t2sp/ (problem recreated)

A data point needs to have y numberic value, so you could fix this by setting DevelopmentPercentage as y of a point - example: http://jsfiddle.net/9e79t2sp/1/ (solution)

Solution code:

$(function() {
  // paste your exemplary Result JSON data into Result variable
  var Result = {"d":[{"City":"NYC","DevelopmentPercentage":42,"ID":1234},{"City":"Berlin","DevelopmentPercentage":72,"ID":2345},{"City":"Tokyo","DevelopmentPercentage":92,"ID":5432}]};

  //success: function (Result) {
  Result = Result.d;
  var data = [];
  for (var i in Result) {
    //var jsondata = new Array(Result[i].City, Result[i].DevelopmentPercentage, Result[i].ID);
    var jsondata = {
      city: Result[i].City,
      y: Result[i].DevelopmentPercentage,
      ID: Result[i].ID
    }
    data.push(jsondata);
  }
  DreawChart(data);
  console.log(data);
  //} //end of success function

  function DreawChart(series) {
    $('#container').highcharts({
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
      },
      title: {
        text: 'Village Development Measuring System'
      },
      tooltip: {
        formatter: function() {
          return '<b>' + this.point.city + '</b>: ' + this.point.y + ' %';
        }
      },

      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.city}</b>: {point.percentage:.1f} %',
            style: {
              color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            },
            connectorColor: 'silver'
          }
        }
      },

      series: [{
        data: series,
        type: 'pie',
        dataType: 'json',
        animation: false,
        point: {
          events: {
            click: function(event) {
              //var id = this.ID;

              //alert(id);

              ////alert(event.point.ID);
              //alert(this.point.ID);
              //alert(this.x [![able to get id but chart cannot be created][2]][2]+ " " + this.y);
            }
          }
        }
      }],
    });
  }
});

Answer 2

Inside the point.events.click callback this refers to the point clicked, so no need to de-reference it to this.point.ID

series: [{
    // ....
    point: {
       events: {
         click: function (event) {
           // the ID field of the point
           var id = this.ID;
           // the whole series of the point
           var series = this.series;
         }
       }
    }