Here is my json data

var data = [
    {"unit":"a", "status":"Stopped / Idle", "val":21.2022222222222222},
    {"unit":"a", "status":"Working", "val":53.3066666666666667},
    {"unit":"a", "status":"Headland Turning", "val":0.04694444444444444444},
    {"unit":"a", "status":"Transport", "val":5.1425000000000000},
    {"unit":"b", "status":"Stopped / Idle", "val":334.7358333333333333},
    {"unit":"b", "status":"Working", "val":212.6386111111111111},
    {"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
    {"unit":"b", "status":"Transport", "val":0.00444444444444444444}
];

unit is the category

I want the data could be formatted in the following way so that I can plug in to series option in HighCharts:

series: [{
                name: 'Stopped / Idle',
                data: [21.2022222222222222, 334.7358333333333333]},
            {
                name: 'Working',
                data: [53.3066666666666667, 212.6386111111111111]},
            {
                name: 'Headland Turning',
                data: [0.04694444444444444444, 26.2955555555555556]},
            {
                name: 'Transport',
                data: [5.1425000000000000, 0.00444444444444444444]}]
        });

Thank you.

Here is my json data

var data = [
    {"unit":"a", "status":"Stopped / Idle", "val":21.2022222222222222},
    {"unit":"a", "status":"Working", "val":53.3066666666666667},
    {"unit":"a", "status":"Headland Turning", "val":0.04694444444444444444},
    {"unit":"a", "status":"Transport", "val":5.1425000000000000},
    {"unit":"b", "status":"Stopped / Idle", "val":334.7358333333333333},
    {"unit":"b", "status":"Working", "val":212.6386111111111111},
    {"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
    {"unit":"b", "status":"Transport", "val":0.00444444444444444444}
];

unit is the category

I want the data could be formatted in the following way so that I can plug in to series option in HighCharts:

series: [{
                name: 'Stopped / Idle',
                data: [21.2022222222222222, 334.7358333333333333]},
            {
                name: 'Working',
                data: [53.3066666666666667, 212.6386111111111111]},
            {
                name: 'Headland Turning',
                data: [0.04694444444444444444, 26.2955555555555556]},
            {
                name: 'Transport',
                data: [5.1425000000000000, 0.00444444444444444444]}]
        });

Thank you.

• javascript
• json
• highcharts

2 Answers 2

var data = [
    {"unit":"a", "status":"Stopped / Idle", "val":21.2022222222222222},
    {"unit":"a", "status":"Working", "val":53.3066666666666667},
    {"unit":"a", "status":"Headland Turning", "val":0.04694444444444444444},
    {"unit":"a", "status":"Transport", "val":5.1425000000000000},
    {"unit":"b", "status":"Stopped / Idle", "val":334.7358333333333333},
    {"unit":"b", "status":"Working", "val":212.6386111111111111},
    {"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
    {"unit":"b", "status":"Transport", "val":0.00444444444444444444}
];
var seriesData = [];
var xCategories = [];
var i, cat;
for(i = 0; i < data.length; i++){
     cat = 'Unit ' + data[i].unit;
     if(xCategories.indexOf(cat) === -1){
        xCategories[xCategories.length] = cat;
     }
}
for(i = 0; i < data.length; i++){
    if(seriesData){
      var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].status;});
      if(currSeries.length === 0){
          currSeries = seriesData[seriesData.length] = {name: data[i].status, data: []};
      } else {
          currSeries = currSeries[0];
      }
      var index = currSeries.data.length;
      currSeries.data[index] = data[i].val;
    } else {
       seriesData[0] = {name: data[i].status, data: [data[i].val]}
    }
}

Now that you've seriesData and xCategories you can instantiate the chart by using something similar to

  chart = new Highchart({chart: {renderTo: 'chart-div', 
                                   type: 'column'
                                  }, 
                           plotOptions: {column: {stacking: 'normal'}},
                           xAxis:{ categories: xCategories}, 
                           series: seriesData
                         });

EDIT: Here's the jsFiddle: http://jsfiddle/sujay/UMeGS/

On the HighCharts website I navigated to the Demo Gallery > HighChart demos section and clicked on Stacked column on the left side of the page. From there they had a link to a JSFiddle with a demo and from there I saw two sections of code that are pertinent to you.

The first section is the xAxis property of the HighChart object. Here's what I changed it to:

xAxis: {
  categories: ['Unit A', 'Unit B']
}

Those are going to be each of the columns that you are stacking the data upon.

The next section is the series property. This is where you pass in the data that you are looking to graph into those columns. It looks like this:

series: [{
  name: 'Stopped / Idle',
  data: [21.2022222222222222, 334.7358333333333333]
}, {
  name: 'Working',
  data: [53.3066666666666667, 212.6386111111111111]
}, {
  name: 'Headland Turning',
  data: [0.04694444444444444444, 26.2955555555555556]
}, {
  name: 'Transport',
  data: [5.1425000000000000, 0.00444444444444444444]                         
}]

In this portion you specify the name of the particular type of data and then the values for each column you specified in the xAxis property.

I played around with some of the options really quick and there is so much more that you can do with this, but here's the JSFiddle with a stacked column graph and your data.

Hope this helps!