Incorporating JSON data seamlessly into a visually appealing Highcharts pie chart

Question

Incorporating JSON data seamlessly into a visually appealing Highcharts pie chart

It seems like I'm facing a minor issue here. Everything was working fine until...


$(document).ready(function() {
// Original data
var data = [{
    "name": "Tokyo",
    "y": 3.0
}, {
    "name": "NewYork",
    "y": 2.0
}, {
    "name": "Berlin",
    "y": 3.5
}, {
    "name": "London",
    "y": 1.5
}];
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    series: [{
        data: data
    }]
});
});

My attempt to modify the code to load using getJSON with correctly formatted JSON resulted in this...


$(document).ready(function() {
    $.getJSON("etstats?rtype=bestpgs_ec&month=2016-06-01&no_requested=10", function(json){
    var data = json
    var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    series: [{
        data: data
    }]
  });
 });
});

After checking the JSON in Firebug, it appears to be formatted correctly with "name" and "y" values.


[{"name": "14704", "y": "0.17"}, {"name": "14706", "y": "0.20"}, {"name": "21304", "y": "0.25"}, {"name"
: "23201", "y": "0.39"}, {"name": "23501", "y": "0.42"}, {"name": "17102", "y": "0.46"}, {"name": "15001"
, "y": "0.48"}, {"name": "23002", "y": "0.50"}, {"name": "13201", "y": "0.50"}, {"name": "17401", "y"
: "0.52"}]

Any suggestions on why my chart is not rendering?

Note: Updated to include solution. The quoted values were causing the problem, which is resolved by iterating over them and evaluating the value.


    $.getJSON("etstats?rtype=bestpgs_ec&month=2016-06-01&no_requested=10", function(json){
    data = json
    $.each(data, function (i, point) {
         point.y = eval(point.y);
    });
    var chart = new Highcharts.Chart({

javascript jquery json highcharts getjson

Answer 1

Answer №1

Based on the provided data, it appears that highchart may not accept strings in the "y" parameter.

For a demonstration, you can view the demo here.

A valid JSON format should follow this structure:

[
  {"name":"14704","y":0.17},
  {"name":"14706","y":0.2},
  {"name":"21304","y":0.25},
  {"name":"23201","y":0.39},
  {"name":"23501","y":0.42},
  {"name":"17102","y":0.46},
  {"name":"15001","y":0.48},
  {"name":"23002","y":0.5},
  {"name":"13201","y":0.5},
  {"name":"17401","y":0.52}
]

Ensure to use getJSON and then apply JSON.parse to convert the object correctly before passing it to highchart.

Answer 2

Based on the provided data, it appears that highchart may not accept strings in the "y" parameter.

For a demonstration, you can view the demo here.

A valid JSON format should follow this structure:

[
  {"name":"14704","y":0.17},
  {"name":"14706","y":0.2},
  {"name":"21304","y":0.25},
  {"name":"23201","y":0.39},
  {"name":"23501","y":0.42},
  {"name":"17102","y":0.46},
  {"name":"15001","y":0.48},
  {"name":"23002","y":0.5},
  {"name":"13201","y":0.5},
  {"name":"17401","y":0.52}
]

Ensure to use getJSON and then apply JSON.parse to convert the object correctly before passing it to highchart.

Answer 3

Answer №2

Make sure to verify that your output for getJSON is in JSON format. If it is, you can proceed by performing the following steps:

var data = JSON.parse(json);

Answer 4

Make sure to verify that your output for getJSON is in JSON format. If it is, you can proceed by performing the following steps:

var data = JSON.parse(json);

Answer 5

Answer №3

This is how I tackled the challenge of updating data on a Pie chart sourced from MySQL using jQuery.

Firstly, in PHP: generate an array comprising arrays with value/name pairs and don't forget to have the data "json_encode"d:

   ... [code] ...
   while($row = mysqli_fetch_assoc($result)){
      $data[] = array("y" => $row['numeric_value'], "name" => $row['label']);
   }
   exit(json_encode($data));

Next, set up the chart:

    graph = new Highcharts.chart({
       chart: {
          renderTo: 'graphid',
       ... [code] ...
       plotOptions: {
          pie: {
       ... [code] ...
       series: [{
          name: 'MyPieChart',
          data: []
       ... [code] ...
   });

Thirdly, develop jQuery code for fetching data:

   $.ajax({
      type     : 'post',
      url      : '/path/to/php/data-script.php',
      dataType : 'json'
   }).done(function( jsonData ) {
      var objArray = [];
      $.each(jsonData, function(index,slice) {
         objArray.push({
            name: slice.name,
            y: eval(slice.y)
         });
      });
      graph.series[0].setData(objArray, true);
   });

It took me some time to figure out that I needed to (1) rearrange the data structure and (2) use eval() for parsing the value parameter y!

Answer 6

This is how I tackled the challenge of updating data on a Pie chart sourced from MySQL using jQuery.

Firstly, in PHP: generate an array comprising arrays with value/name pairs and don't forget to have the data "json_encode"d:

   ... [code] ...
   while($row = mysqli_fetch_assoc($result)){
      $data[] = array("y" => $row['numeric_value'], "name" => $row['label']);
   }
   exit(json_encode($data));

Next, set up the chart:

    graph = new Highcharts.chart({
       chart: {
          renderTo: 'graphid',
       ... [code] ...
       plotOptions: {
          pie: {
       ... [code] ...
       series: [{
          name: 'MyPieChart',
          data: []
       ... [code] ...
   });

Thirdly, develop jQuery code for fetching data:

   $.ajax({
      type     : 'post',
      url      : '/path/to/php/data-script.php',
      dataType : 'json'
   }).done(function( jsonData ) {
      var objArray = [];
      $.each(jsonData, function(index,slice) {
         objArray.push({
            name: slice.name,
            y: eval(slice.y)
         });
      });
      graph.series[0].setData(objArray, true);
   });

It took me some time to figure out that I needed to (1) rearrange the data structure and (2) use eval() for parsing the value parameter y!

Incorporating JSON data seamlessly into a visually appealing Highcharts pie chart

Answer №1

Answer №2

Answer №3

Similar questions

Switching views in AngularJS by using a controller to control the content displayed in the

I encountered an error in my Rails 4 project where I got a NoMethodError stating "undefined method `id' for nil:NilClass" in my create.js

The concept of overloading operators in V8

Tips on extracting specific information from a JSON object within an array using a key from a different object in Hugo

The state of the checked value remains unaffected when using the Angular Material Checkbox

Transforming pairs of names and values into objects by deserialization

When using JsonObj.getString(key), it is returning a zero instead of the intended value of 000

Is your list rendering in Vue.js with AJAX ready to go?

Conceal anchor links using jQuery by targeting their title attribute

Issue with merging JSON in Angular using RxJS

Loop through an array of objects, then store each one in MongoDB

Turn off the authentication middleware for a particular HTTP method on a specific endpoint

Enclose each instance of "Rs." with <span class="someClass">

Validation of JSON array items

Reset dropdown selection when a search query is made

Extract information from a JSON string and present it on the screen

Tips for rearranging objects within a jsPDF document to prevent vertical overlap when a table grows in size

Alert: Prop type error encountered - The prop 'open' must be defined in Snackbar component

Checking the validity of a JSON file extension using regular expressions

Error Alert: React Native object cannot be used as a React child within JSON, leading to an Invariant Violation