how to display array of objects in High stock charts - highcharts

Question

I have array of objects like this
{
"data": [{
"date": "11/25/2016 08:59:58",
"energy": 29940935080,
"power": 6815.7056798623,
"time": 217781943
}, {
"date": "11/25/2016 09:29:59",
"energy": 29940981851,
"power": 6803.7187250996,
"time": 217783743
}, {
"date": "11/25/2016 09:59:59",
"energy": 29941028913,
"power": 6841.5804195804,
"time": 217785544
}, {
"date": "11/25/2016 10:29:59",
"energy": 29941075952,
"power": 6845.9247648903,
"time": 217787343
}, {
"date": "11/25/2016 10:59:58",
"energy": 29941123228,
"power": 6877.2764478764,
"time": 217789143
}]
}
and i want display power in y-axis and date in x-axis.Once data is loaded am adding Y prop, so that Higchart can read y-axis values
for (var i = data.data.length - 1; i >= 0; i--) {
var item=data.data[i];
item.y=data.data[i].power;
data.data[i]=item;
var timestamp = new Date(data.data[i]['date']).getTime();
values.push(timestamp,item.y);
}
chart.series[0].setData(values);
But for some reason data is not show in charts, please guide me on this

Answer 1

I'm not sure why you're doing your loop the way you are, but it has a few problems.
You're reversing the array. Unless your dates are stored in reverse order, that is going to cause problems. Highcharts wants the X data sorted.
On the line values.push(timestamp, item.y); you are pushing 2 items onto the values array instead of pushing an array of 2 values or an object with x and y values. So, highcharts thinks you have double the points and that they are sequential.
A corrected loop:
var values = [];
for (var i = 0; i < data.length; i++) {
var item = {};
item.y = data[i].power;
item.x = new Date(data[i]['date']).getTime();
values.push(item);
}
http://jsfiddle.net/gq385b16/1/