Rendering json results to a pie chart in a div - highmaps

Question

I have built this electoral map but I have not succeeded drawing a pie chart of the two parties on the pop-up dialog when a map region is clicked. The dialog title is being passed but not the actual values that should build the chat.

The returned json data is here and I just want to push a pie-chart to the dialog when someone clicks on a county on the map. Here's my code and "pointClick" function that should render the pie to a div.

$(function() {
  $.getJSON("<?= base_url('index.php/presidential/getByCounty'); ?>", function(json) {

    function pointClick(json) {
      var row = this.options.row,
        $div = $('<div></div>')
        .dialog({
          title: ([this.name]),
          width: 400,
          height: 300
        });

      //THIS IS ACTUALLY WHAT'S NOT WORKING

      window.chart = new Highcharts.Chart({
        chart: {
          renderTo: $div[0],
          type: 'pie',
          width: 370,
          height: 240
        },
        title: {
          text: null
        },
        series: [{
          name: 'Votes',
          data: [{
            name: 'nasa',
            color: '#0200D0',
            y: this.nasa //returned json data for candidate 1 and I problem must be somewhere here
          }, {
            name: 'jubilee',
            color: '#C40401',
            y: this.jubilee //returned json data for candidate 2
          }],
          dataLabels: {
            //  format: '<b>{point.name}</b> {point.value:.1f}%'
          }
        }]
      });
    }
    //AM BUILDING THE ELECTORAL MAP FROM THIS POINT WHICH WORKS OUT NICELY

    $('#presidential').highcharts('Map', {
      title: {
        text: 'Presidential Electoral Map <em>(Kenya - Test)</em>'
      },
      legend: {
        title: {
          text: 'Plotical Parties'
        }
      },
      credits: {
        enabled: false
      },
      tooltip: {
        valueSuffix: ' Incumbent Margin'
      },
      mapNavigation: {
        enabled: true,
        enableButtons: false
      },

      colorAxis: {

        dataClasses: [{
          from: 0.0000001,
          to: 100,
          color: '#C40401',
          name: 'Jubilee'
        }, {
          from: -100,
          to: -0.00000001,
          color: '#0200D0',
          name: 'Nasa'
        }, {
          from: 0,
          to: 0,
          color: '#C0C0C0',
          name: 'Battle Ground(s)'
        }]
      },
      series: [{
        name: 'By County Difference',
        point: {
          events: {
            click: pointClick
          }
        },
        "type": "map",
        "joinBy": ['name', 'name'],
        "data": $.each(json, function() {}),
        "mapData": [{
            "name": "Mandera",
            "path": "M572,-818,574,-789,578,-783,598,-775,619,-750,646,-738,645,-727,652,-703,662,-689,678,-679,689,-666,693,-672,696,-734,733,-774,783,-848,774,-845,765,-850,761,-846,711,-843,677,-873,663,-874,583,-838z"
          }, //and a couple more mapdata
        ]
      }, {
        "type": "mapline",
        "data": [{
          "name": "path5072",
          "path": "M443,-449Z"
        }]
      }]
    });
  });
});

Answer 1

Your JSON data contains number in string format so convert it into Number like this

Fiddle link

   series: [{
      name: 'Votes',
      data: [{
        name: 'nasa',
        color: '#0200D0',
        y: Number(this.nasa) //transform to number
      }, {
        name: 'jubilee',
        color: '#C40401',
        y: Number(this.jubilee) //transform to number
      }],
      dataLabels: {
        format: '<b>{point.name}</b> {point.value:.1f}%'
      }
    }]