To pass dynamic json array to Highcharts Pie Chart

Question

I passed json encoded string(eg. $TEXT2 consisting [\"chrome\",\"15\",\"firefox\",\"20\"]) from xcode to an array(eg. arr) in javascript.Now I want to pass this array contai

Answer 1

Simply do :

Create array with Jquery as bellow :

$.each(data['values'], function(i, val) {
                    x_values_sub['name'] = i
                    x_values_sub['y'] = val
                    x_values.push(x_values_sub);
                    x_values_sub = {};
});

// Then call this array with HighCharts as data

series: [{
                            type: 'pie',
                            name: null,
                            data: x_values
}]

// Tested and it works with simple javascript object :

Object Part1Name: 25 Part2Name: 75__proto__: Object

Answer 2

<script type="text/javascript">
    jQuery(document).ready(function () {
        alert('call pie');

        var data1 = $("#dataidd").val();
        alert('pie data' + data1);


        /*--------Pie Chart---------*/
        $('#PieChartDiv').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Comparision and Analysis Report'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Issue Details',
                // data: jQuery.parseJSON(data1)
                data: JSON.parse(data1)

            }]
        });
    });
    </script>

Answer 3

I would wrap the JSON call in the document.ready function and then wrap the plot call in the getJSON's success callback:

$(document).ready(function() {

  $.getJSON("arr", function(json) {

    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
      },
      title: {
        text: 'Interactive Pie'
      },
      tooltip: {
        formatter: function() {
          return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: false
          },
          showInLegend: true
      },
      series: [{
        type: 'pie',
        name: 'Browser share',
        data: json
      }]
    });
  });
});

Of course for this to work, you should modify your backend code to return a properly formatted array of arrays that HighCharts expects:

[["chrome",15],["firefox",20]]

You could "fix" your returned array in the JS, but it would be better to do it in the JSON backend call.

Answer 4

You can bind chart with JSON data, directly. You just need to set the json property names as highchart standard. 'Y' for value and 'name' for label.

Your JSON should be as like follow:

[ { name: "Chrome", y: 25 }, { name: "Firefox", y: 20 } ]