JSON parsing in Highcharts

Question

I have created this snippet here which works with static data :

 Highcharts.chart("container", { title: { text: "Highcharts pie chart" }, xAxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }, series: [ { type: "pie", allowPointSelect: true, keys: ["name", "y", "selected", "sliced"], data: [ ["January", 105], ["February", 400], ["March",230] ], showInLegend: true } ] }); 

 @import "https://code.highcharts.com/5/css/highcharts.css"; .highcharts-series .highcharts-point-select { fill: #fff; stroke: #f00; stroke-dasharray: 10; } 

 <script src="https://code.highcharts.com/5/js/highcharts.js"></script> <div id="container"></div> 

Now I am trying to parse the data from a JSON query. The JSON has the following format :

{"headers":["Month","Clicks"],"rows":[["January",105],["February",400],["March",230]]}

So, at the moment the JSON format in the snippet that works is :

["January", 105],
["February", 400],
["March",230]

I tried using a solution used in examples that worked. In this case, I cannot parse the data correctly. In the new snippet below, I added a JS script in the beginning of the JS box to parse the JSON data.

 var unformatted = {"headers":["Month","impressions"],"rows":[["January",124010],["February",545010]]}; var data2 = []; for (var i = 0; i < unformatted.rows.length; i++) { var row = unformatted.rows[i]; data2.push({ Month: row[0], Clicks: row[1] }); } Highcharts.chart("container", { title: { text: "Clicks per Month" }, xAxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }, series: [ { type: "pie", allowPointSelect: true, keys: ["name", "y", "selected", "sliced"], data: data2 , showInLegend: true } ] }); 

 @import "https://code.highcharts.com/5/css/highcharts.css"; .highcharts-series .highcharts-point-select { fill: #fff; stroke: #f00; stroke-dasharray: 10; } 

 <script src="https://code.highcharts.com/5/js/highcharts.js"></script> <div id="container"></div> 

Answer 1

If "rows" contains your data why not not just make your series.data be the "rows" element and not loop through the JSON. So you would have this:

var unformatted = {"headers":["Month","impressions"],"rows":[["January",124010],["February",545010]]};

var data2 = [];
//console.log(unformatted.rows);
data2 = unformatted.rows;

Answer 2

Your mistake was with data2.push part

// instead
data2.push({
    Month: row[0],
    Clicks: row[1]
});

//you should do 
data2.push([row[0], row[1]]);

Here is the fixed version of your code

 var unformatted = {"headers":["Month","impressions"],"rows":[["January",124010],["February",545010]]}; var data2 = []; for (var i = 0; i < unformatted.rows.length; i++) { var row = unformatted.rows[i]; data2.push([row[0], row[1]]); } Highcharts.chart("container", { title: { text: "Clicks per Month" }, xAxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ] }, series: [ { type: "pie", allowPointSelect: true, keys: ["name", "y", "selected", "sliced"], data: data2, showInLegend: true } ] }); 

 @import "https://code.highcharts.com/5/css/highcharts.css"; .highcharts-series .highcharts-point-select { fill: #fff; stroke: #f00; stroke-dasharray: 10; } 

 <script src="https://code.highcharts.com/5/js/highcharts.js"></script> <div id="container"></div> 

Answer 3

You need to access the first row, then grab the data from each item in that array.

categories: unformatted.rows[0].map(record => record[0])

The data is just the rows.

data: unformatted.rows

 // Return unique array of items. const unique = list => [...new Set(list)]; var unformatted = { "headers": ["Month", "impressions"], "rows": [ ["January", 124010], ["February", 545010] ] }; Highcharts.chart("container", { title: { text: "Clicks per Month" }, xAxis: { categories: unique(unformatted.rows[0].map(record => record[0])) }, series: [{ type: "pie", allowPointSelect: true, keys: ["name", "y", "selected", "sliced"], data: unformatted.rows, showInLegend: true }] }); 

 @import "https://code.highcharts.com/5/css/highcharts.css"; .highcharts-series .highcharts-point-select { fill: #fff; stroke: #f00; stroke-dasharray: 10; } 

 <script src="https://code.highcharts.com/5/js/highcharts.js"></script> <div id="container"></div>