javascript - How to format my json data for stack column chart in HighCharts - Stack Overflow

admin管理员组

文章数量:1314488

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

Share Improve this question Follow edited Jul 15, 2012 at 1:38 sozhen asked Jul 13, 2012 at 14:53 sozhensozhen 7,6771414 gold badges3838 silver badges5353 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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!

本文标签： javascriptHow to format my json data for stack column chart in HighChartsStack Overflow