How to create data in Json format for highcharts

Question

I am getting below result through ajax and the data which I get in ajax success is

[{
  "plants_ref_id": "1",
  "plant_name": "MCW",
  "employees_data": "6,6,80,70,60,30,2,3,12,12,37.00,60.00,64666.666667,8000.0000"
},{
  "plants_ref_id": "3",
  "plant_name": "SJCPL",
  "employees_data": "4,5,6,7,7,7,6,4,4,5,20.00,3.00,176923.076923,38461.5385"
}]

I am trying to convert this data to format

[{
  name: 'MCW',
  data: [6,6,80,70,60,30,2,3,12,12,37.00,60.00,64666.666667,8000.0000
]},{
  name: 'SJCPL',  
  data: [4,5,6,7,7,7,6,4,4,5,20.00,3.00,176923.076923,38461.5385]
}]

I am trying to convert to this format for generating highcharts as https://jsfiddle.net/mcj075jf/

How do I convert to the above format in jQuery using for loop or $.each. Please help.

Alberto Trindade Tavares · Accepted Answer · 2017-07-07 09:58:13Z

1

You can use map as follows:

var plants = [{
  "plants_ref_id": "1",
  "plant_name": "MCW",
  "employees_data": "6,6,80,70,60,30,2,3,12,12,37.00,60.00,64666.666667,8000.0000"
},{
  "plants_ref_id": "3",
  "plant_name": "SJCPL",
  "employees_data": "4,5,6,7,7,7,6,4,4,5,20.00,3.00,176923.076923,38461.5385"
}];

var formattedData = plants.map((plant) => ({
  name: plant.plant_name,
  data: plant.employees_data.split(',').map((data) => parseFloat(data))
}));

console.log(formattedData);

edited Jul 7, 2017 at 9:58

answered Jul 7, 2017 at 9:27

Alberto Trindade Tavares

10.5k6 gold badges42 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rji rji Over a year ago

If I pass the same data to highcharts graph is not displaying. Please check here jsfiddle.net/mcj075jf/1

Alberto Trindade Tavares Over a year ago

@rjirji I guess we need to convert that array of strings to numbers. Check my edited answer :)

Alberto Trindade Tavares Over a year ago

I changed your jsfiddle to use my edited answer with the fix and it is working now!jsfiddle.net/17rf4ugt

Shiladitya · Accepted Answer · 2017-07-07 09:29:50Z

0

Here you go with the solution https://jsfiddle.net/z10jheo2/

var data = [{
  "plants_ref_id": "1",
  "plant_name": "MCW",
  "employees_data": "6,6,80,70,60,30,2,3,12,12,37.00,60.00,64666.666667,8000.0000"
},{
  "plants_ref_id": "3",
  "plant_name": "SJCPL",
  "employees_data": "4,5,6,7,7,7,6,4,4,5,20.00,3.00,176923.076923,38461.5385"
}];

var newData = [];

for(var i=0; i<data.length; i++) {
   var tempData = {};
   tempData.name = data[i].plant_name;
   tempData.data = data[i].employees_data.split(',');
   newData.push(tempData); 
   console.log(newData);
}

answered Jul 7, 2017 at 9:29

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

2 Comments

rji rji Over a year ago

If I pass the same data to highcharts graph is not displaying. Please check here jsfiddle.net/z10jheo2/1

Shiladitya Over a year ago

Here you go with the solution jsfiddle.net/17rf4ugt . Since I was spliting data on the basis of comma, we need to revert back to float to populate the chart.

Collectives™ on Stack Overflow

How to create data in Json format for highcharts

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related