how to display array of objects in High stock charts

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

Barbara Laird · Accepted Answer · 2016-12-01 18:43:22Z

2

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/

answered Dec 1, 2016 at 18:43

Barbara Laird

12.7k2 gold badges48 silver badges58 bronze badges

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

2 Comments

niran Over a year ago

perfect, if I want make this chart refresh for every second does chart.series[0].setData(values) is good OR chart.series[0].addPoints(values,true,true)

Barbara Laird Over a year ago

If you are just adding new points, use addPoints. If you are replacing the data, use setData

Collectives™ on Stack Overflow

how to display array of objects in High stock charts

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related