Highcharts Chrome 71 leak - highcharts

When you update from Chrome 70 to 71, addPoint seems to break. There is something in that method that is causing the page to halt and CPU use to skyrocket.
Does not happen on Chrome 70 but does on 71.
http://jsfiddle.net/6xkfvbnt/3/
Clock "Add Points" and watch your Chrome task manager.
Anyone else seeing this?
var chart = Highcharts.chart('container', {
series: [{
name: 'USD to EUR',
data: []
}]
});
$('#button').click(function () {
var datapts = [];
for(var x=0; x<613645; x++) {
datapts.push([1417410061000+x, x]);
}
for (var i=0; i < datapts.length; i += 1) {
chart.series[0].addPoint(datapts[i], false);
}
chart.redraw();
});

We have concluded this is an error in Chrome 71 rather than highcharts. With a simple jsfiddle using Array splice, this happens even without Highcharts.
https://github.com/highcharts/highcharts/issues/9645
If you are having this issue, use setData and not addPoint as setData does not use Array.prototype.splice.

Related

Highchart zoom feature is not working. It is in https://jsfiddle.net/f0n31uqx/

JSON DATA
const rawData = [{"eventId":"c0nmqcdsvg8q9deq0m30","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.05,"updateTime":"2021-02-19T07:48:01.072000Z"}},"timestamp":"2021-02-19T07:48:01.072000Z"},{"eventId":"c0nmimfae9qf8j0ni8ug","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.05,"updateTime":"2021-02-19T07:31:37.195000Z"}},"timestamp":"2021-02-19T07:31:37.195000Z"},{"eventId":"c0nmb0cmksjn6fnmek40","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.1,"updateTime":"2021-02-19T07:15:13.736000Z"}},"timestamp":"2021-02-19T07:15:13.736000Z"},{"eventId":"c0nm3ani3sc4tff6o5lg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.05,"updateTime":"2021-02-19T06:58:50.348000Z"}},"timestamp":"2021-02-19T06:58:50.348000Z"},{"eventId":"c0nlrknae9qf8j0jd61g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.2,"updateTime":"2021-02-19T06:42:26.798000Z"}},"timestamp":"2021-02-19T06:42:26.798000Z"},{"eventId":"c0nljuu4aaj3ehi66l70","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.15,"updateTime":"2021-02-19T06:26:03.456000Z"}},"timestamp":"2021-02-19T06:26:03.456000Z"},{"eventId":"c0nlc90snrvnmlvjjrp0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.1,"updateTime":"2021-02-19T06:09:40.150000Z"}},"timestamp":"2021-02-19T06:09:40.150000Z"},{"eventId":"c0nl4je4aaj3ehi3fbl0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.15,"updateTime":"2021-02-19T05:53:17.235000Z"}},"timestamp":"2021-02-19T05:53:17.235000Z"},{"eventId":"c0nkstgd11ttvapiroi0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.2,"updateTime":"2021-02-19T05:36:54.196000Z"}},"timestamp":"2021-02-19T05:36:54.196000Z"},{"eventId":"c0nkl7um6o2p5rlk17pg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.15,"updateTime":"2021-02-19T05:20:31.239000Z"}},"timestamp":"2021-02-19T05:20:31.239000Z"},{"eventId":"c0nkdi4mksjn6fnbecvg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.25,"updateTime":"2021-02-19T05:04:08.318000Z"}},"timestamp":"2021-02-19T05:04:08.318000Z"},{"eventId":"c0nk5ser46k56lsj00d0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.35,"updateTime":"2021-02-19T04:47:45.487000Z"}},"timestamp":"2021-02-19T04:47:45.487000Z"},{"eventId":"c0nju6l9m1grbnmn3pf0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.3,"updateTime":"2021-02-19T04:31:22.857000Z"}},"timestamp":"2021-02-19T04:31:22.857000Z"},{"eventId":"c0njmh4mksjn6fn7djmg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.35,"updateTime":"2021-02-19T04:15:00.072000Z"}},"timestamp":"2021-02-19T04:15:00.072000Z"},{"eventId":"c0njerbpv76emv1io31g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.3,"updateTime":"2021-02-19T03:58:37.434000Z"}},"timestamp":"2021-02-19T03:58:37.434000Z"},{"eventId":"c0nj75od11ttvap97fm0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.4,"updateTime":"2021-02-19T03:42:15.454000Z"}},"timestamp":"2021-02-19T03:42:15.454000Z"},{"eventId":"c0nivg3pv76emv1g2gt0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.4,"updateTime":"2021-02-19T03:25:52.666000Z"}},"timestamp":"2021-02-19T03:25:52.666000Z"},{"eventId":"c0ninqg9scdqsoh00jog","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.4,"updateTime":"2021-02-19T03:09:30.356000Z"}},"timestamp":"2021-02-19T03:09:30.356000Z"},{"eventId":"c0nig50d11ttvap50q6g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.4,"updateTime":"2021-02-19T02:53:08.042000Z"}},"timestamp":"2021-02-19T02:53:08.042000Z"},{"eventId":"c0ni8flolbcr7u23mffg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.5,"updateTime":"2021-02-19T02:36:45.869000Z"}},"timestamp":"2021-02-19T02:36:45.869000Z"},{"eventId":"c0ni0q7i3sc4tfefc000","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.45,"updateTime":"2021-02-19T02:20:23.995000Z"}},"timestamp":"2021-02-19T02:20:23.995000Z"},{"eventId":"c0nhp4mr46k56ls5aong","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.55,"updateTime":"2021-02-19T02:04:02.166000Z"}},"timestamp":"2021-02-19T02:04:02.166000Z"},{"eventId":"c0nhhf2b02gddfvc6au0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.55,"updateTime":"2021-02-19T01:47:40.400000Z"}},"timestamp":"2021-02-19T01:47:40.400000Z"},{"eventId":"c0nh9pgsnrvnmlusb56g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.6,"updateTime":"2021-02-19T01:31:18.726000Z"}},"timestamp":"2021-02-19T01:31:18.726000Z"},{"eventId":"c0nh24ab02gddfv9dvm0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.55,"updateTime":"2021-02-19T01:14:57.091000Z"}},"timestamp":"2021-02-19T01:14:57.091000Z"},{"eventId":"c0ngqeu4aaj3ehhafq50","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.65,"updateTime":"2021-02-19T00:58:35.434000Z"}},"timestamp":"2021-02-19T00:58:35.434000Z"},{"eventId":"c0ngipgsnrvnmluo7otg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.6,"updateTime":"2021-02-19T00:42:13.986000Z"}},"timestamp":"2021-02-19T00:42:13.986000Z"},{"eventId":"c0ngb43pv76emv114au0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.7,"updateTime":"2021-02-19T00:25:52.898000Z"}},"timestamp":"2021-02-19T00:25:52.898000Z"},{"eventId":"c0ng3f5svg8q9ddk16ng","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.75,"updateTime":"2021-02-19T00:09:32.116000Z"}},"timestamp":"2021-02-19T00:09:32.116000Z"},{"eventId":"c0nfrpvi3sc4tfe31530","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.7,"updateTime":"2021-02-18T23:53:11.261000Z"}},"timestamp":"2021-02-18T23:53:11.261000Z"},{"eventId":"c0nfk4lsvg8q9ddhammg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.8,"updateTime":"2021-02-18T23:36:50.630000Z"}},"timestamp":"2021-02-18T23:36:50.630000Z"},{"eventId":"c0nfcfgsnrvnmluhea40","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.75,"updateTime":"2021-02-18T23:20:30.265000Z"}},"timestamp":"2021-02-18T23:20:30.265000Z"},{"eventId":"c0nf4qdsvg8q9ddei0q0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.85,"updateTime":"2021-02-18T23:04:09.819000Z"}},"timestamp":"2021-02-18T23:04:09.819000Z"},{"eventId":"c0net56r46k56lrkrjs0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.75,"updateTime":"2021-02-18T22:47:48.885000Z"}},"timestamp":"2021-02-18T22:47:48.885000Z"},{"eventId":"c0nelfsmksjn6fmas22g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.65,"updateTime":"2021-02-18T22:31:27.612000Z"}},"timestamp":"2021-02-18T22:31:27.612000Z"},{"eventId":"c0nedqlolbcr7u1djesg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.65,"updateTime":"2021-02-18T22:15:06.439000Z"}},"timestamp":"2021-02-18T22:15:06.439000Z"},{"eventId":"c0ne658snrvnmlua76t0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.8,"updateTime":"2021-02-18T21:58:45.352000Z"}},"timestamp":"2021-02-18T21:58:45.352000Z"},{"eventId":"c0ndufum6o2p5rkcvib0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.8,"updateTime":"2021-02-18T21:42:23.890000Z"}},"timestamp":"2021-02-18T21:42:23.890000Z"},{"eventId":"c0ndmqmm6o2p5rkbjcog","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.8,"updateTime":"2021-02-18T21:26:02.848000Z"}},"timestamp":"2021-02-18T21:26:02.848000Z"},{"eventId":"c0ndf5mr46k56lrc84pg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.8,"updateTime":"2021-02-18T21:09:41.947000Z"}},"timestamp":"2021-02-18T21:09:41.947000Z"},{"eventId":"c0nd7g5olbcr7u16ltkg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.9,"updateTime":"2021-02-18T20:53:20.943000Z"}},"timestamp":"2021-02-18T20:53:20.943000Z"},{"eventId":"c0ncvr0snrvnmlu3afmg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.9,"updateTime":"2021-02-18T20:37:00.188000Z"}},"timestamp":"2021-02-18T20:37:00.188000Z"},{"eventId":"c0nco5tolbcr7u13tuv0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":22,"updateTime":"2021-02-18T20:20:39.569000Z"}},"timestamp":"2021-02-18T20:20:39.569000Z"},{"eventId":"c0ncggod11ttvao1vr50","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":22.1,"updateTime":"2021-02-18T20:04:19.446000Z"}},"timestamp":"2021-02-18T20:04:19.446000Z"},{"eventId":"c0nc8rjpv76emv09ik1g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.9,"updateTime":"2021-02-18T19:47:58.911000Z"}},"timestamp":"2021-02-18T19:47:58.911000Z"},{"eventId":"c0nc16ms4leui3od2c6g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.9,"updateTime":"2021-02-18T19:31:38.286000Z"}},"timestamp":"2021-02-18T19:31:38.286000Z"},{"eventId":"c0nbphfi3sc4tfdb5tpg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.8,"updateTime":"2021-02-18T19:15:17.605000Z"}},"timestamp":"2021-02-18T19:15:17.605000Z"},{"eventId":"c0nbhs09scdqsonmdp30","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.75,"updateTime":"2021-02-18T18:58:56.400000Z"}},"timestamp":"2021-02-18T18:58:56.400000Z"},{"eventId":"c0nba6p0niu96p24p2e0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.8,"updateTime":"2021-02-18T18:42:35.054000Z"}},"timestamp":"2021-02-18T18:42:35.054000Z"},{"eventId":"c0nb2hdolbcr7u0qa9f0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.85,"updateTime":"2021-02-18T18:26:13.835000Z"}},"timestamp":"2021-02-18T18:26:13.835000Z"},{"eventId":"c0naqs6s4leui3o5q6t0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.85,"updateTime":"2021-02-18T18:09:52.888000Z"}},"timestamp":"2021-02-18T18:09:52.888000Z"},{"eventId":"c0naj75olbcr7u0ngqjg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.8,"updateTime":"2021-02-18T17:53:32.020000Z"}},"timestamp":"2021-02-18T17:53:32.020000Z"},{"eventId":"c0nabhosnrvnmltk37ug","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.7,"updateTime":"2021-02-18T17:37:10.986000Z"}},"timestamp":"2021-02-18T17:37:10.986000Z"},{"eventId":"c0na3sdsvg8q9dch76e0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.8,"updateTime":"2021-02-18T17:20:49.740000Z"}},"timestamp":"2021-02-18T17:20:49.740000Z"},{"eventId":"c0n9s77ae9qf8j6dvblg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.9,"updateTime":"2021-02-18T17:04:28.841000Z"}},"timestamp":"2021-02-18T17:04:28.841000Z"},{"eventId":"c0n9ki6r46k56lqm58sg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.95,"updateTime":"2021-02-18T16:48:08.240000Z"}},"timestamp":"2021-02-18T16:48:08.240000Z"},{"eventId":"c0n9csvae9qf8j6b4sog","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.95,"updateTime":"2021-02-18T16:31:47.772000Z"}},"timestamp":"2021-02-18T16:31:47.772000Z"},{"eventId":"c0n957tolbcr7u0f4kq0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.95,"updateTime":"2021-02-18T16:15:27.199000Z"}},"timestamp":"2021-02-18T16:15:27.199000Z"},{"eventId":"c0n8timr46k56lqhncc0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.95,"updateTime":"2021-02-18T15:59:06.487000Z"}},"timestamp":"2021-02-18T15:59:06.487000Z"},{"eventId":"c0n8ltfi3sc4tfcojh00","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.85,"updateTime":"2021-02-18T15:42:45.815000Z"}},"timestamp":"2021-02-18T15:42:45.815000Z"},{"eventId":"c0n8e8fi3sc4tfcn2gi0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":22,"updateTime":"2021-02-18T15:26:25.358000Z"}},"timestamp":"2021-02-18T15:26:25.358000Z"},{"eventId":"c0n86jem6o2p5rjati6g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":22.1,"updateTime":"2021-02-18T15:10:05.164000Z"}},"timestamp":"2021-02-18T15:10:05.164000Z"},{"eventId":"c0n7uue4aaj3ehnleue0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":22.1,"updateTime":"2021-02-18T14:53:45.280000Z"}},"timestamp":"2021-02-18T14:53:45.280000Z"},{"eventId":"c0n7n9er46k56lq9v0vg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":22.15,"updateTime":"2021-02-18T14:37:25.432000Z"}},"timestamp":"2021-02-18T14:37:25.432000Z"},{"eventId":"c0n7fk89scdqsomtc1eg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":22.15,"updateTime":"2021-02-18T14:21:05.624000Z"}},"timestamp":"2021-02-18T14:21:05.624000Z"},{"eventId":"c0n77vgsnrvnmlt0h5lg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":22.1,"updateTime":"2021-02-18T14:04:46.013000Z"}},"timestamp":"2021-02-18T14:04:46.013000Z"},{"eventId":"c0n70adsvg8q9dbtfmu0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.95,"updateTime":"2021-02-18T13:48:25.891000Z"}},"timestamp":"2021-02-18T13:48:25.891000Z"},{"eventId":"c0n6oler46k56lq3fu4g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.7,"updateTime":"2021-02-18T13:32:05.042000Z"}},"timestamp":"2021-02-18T13:32:05.042000Z"},{"eventId":"c0n6gvtolbcr7u7tpcrg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.55,"updateTime":"2021-02-18T13:15:43.313000Z"}},"timestamp":"2021-02-18T13:15:43.313000Z"},{"eventId":"c0n69a6s4leui3v7bbs0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.45,"updateTime":"2021-02-18T12:59:20.800000Z"}},"timestamp":"2021-02-18T12:59:20.800000Z"},{"eventId":"c0n61ker46k56lpuha3g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.3,"updateTime":"2021-02-18T12:42:57.819000Z"}},"timestamp":"2021-02-18T12:42:57.819000Z"},{"eventId":"c0n5pumm6o2p5riqi370","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.25,"updateTime":"2021-02-18T12:26:34.618000Z"}},"timestamp":"2021-02-18T12:26:34.618000Z"},{"eventId":"c0n5i8us4leui3v21kdg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.1,"updateTime":"2021-02-18T12:10:11.221000Z"}},"timestamp":"2021-02-18T12:10:11.221000Z"},{"eventId":"c0n5aismksjn6fki583g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21.1,"updateTime":"2021-02-18T11:53:47.493000Z"}},"timestamp":"2021-02-18T11:53:47.493000Z"},{"eventId":"c0n52stolbcr7u7k6gdg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21,"updateTime":"2021-02-18T11:37:23.492000Z"}},"timestamp":"2021-02-18T11:37:23.492000Z"},{"eventId":"c0n4r6ur46k56lpmqen0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":21,"updateTime":"2021-02-18T11:20:59.393000Z"}},"timestamp":"2021-02-18T11:20:59.393000Z"},{"eventId":"c0n4jgvae9qf8j5bmc1g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":20.85,"updateTime":"2021-02-18T11:04:35.010000Z"}},"timestamp":"2021-02-18T11:04:35.010000Z"},{"eventId":"c0n4bqlsvg8q9dbcht60","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":20.75,"updateTime":"2021-02-18T10:48:10.452000Z"}},"timestamp":"2021-02-18T10:48:10.452000Z"},{"eventId":"c0n444dolbcr7u7emrpg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":20.7,"updateTime":"2021-02-18T10:31:45.431000Z"}},"timestamp":"2021-02-18T10:31:45.431000Z"},{"eventId":"c0n3se7i3sc4tfbpemog","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":20.65,"updateTime":"2021-02-18T10:15:20.160000Z"}},"timestamp":"2021-02-18T10:15:20.160000Z"},{"eventId":"c0n3knm4aaj3ehmp9t9g","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":20.55,"updateTime":"2021-02-18T09:58:54.786000Z"}},"timestamp":"2021-02-18T09:58:54.786000Z"},{"eventId":"c0n3d1ab02gddfsn6shg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":20.55,"updateTime":"2021-02-18T09:42:29.261000Z"}},"timestamp":"2021-02-18T09:42:29.261000Z"},{"eventId":"c0n35asmksjn6fk5mgmg","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":20.45,"updateTime":"2021-02-18T09:26:03.369000Z"}},"timestamp":"2021-02-18T09:26:03.369000Z"},{"eventId":"c0n2tkvae9qf8j51p9og","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":22.35,"updateTime":"2021-02-18T09:09:39.064000Z"}},"timestamp":"2021-02-18T09:09:39.064000Z"},{"eventId":"c0n2s3nlq0bla05dqod0","targetName":"projects/bv2b8auslfo000c8vh1g/devices/bjejbgfbluqg00dltv60","eventType":"temperature","data":{"temperature":{"value":20.5,"updateTime":"2021-02-18T09:06:22.336000Z"}},"timestamp":"2021-02-18T09:06:22.336000Zā€}];
Highchart source code which is also in https://jsfiddle.net/f0n31uqx/
Zoom feature is not working.
Also rangeselector also not working
function formatData(data) {
let formattedData = [];
for(i = 0; i < data.length; i++) {
formattedData.push([
Math.floor(Date.parse(data[i]['data']['temperature']['updateTime'])),
data[i]['data']['temperature']['value']
])
}
return formattedData;
}
const formattedData = formatData(rawData);
console.log(formattedData);
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'Temprature'
},
series: [{
name: 'Temp',
data: formattedData,
tooltip: {
valueDecimals: 2
}
}]
});
For the record, I have checked the "include dependencies with Provided scope" option in Intellij. Also, I have excluded log4j-over-slf4j from my Dependencies so as not to cause conflicts in SLF4J, using the following line
You have unsorted data - Highcharts error #15 in a console: https://www.highcharts.com/errors/15/. You need to sort it before creating a chart.
formattedData.sort(function(a, b) {
return a[0] - b[0];
});
Live demo: https://jsfiddle.net/BlackLabel/859zy6vw/

Duplicate Series in the legend when exporting

Sorry if this question has been asked before but I could not find a similar question that is related to my problem.
The issue I am experiencing is that when exporting to PNG, JPG etc. the series would double up. So if my on screen chart has four series plotted, when it comes to exporting it will have eight series in the legend.
I think the problem is related to 'load' event of the chart is being executed subsequent times when exporting.
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
function fnFetchData(chart) {
// Just imagine an AJAX request has just been done to get a JSON response
// JSONData = $.getJSON('/FetchSales');
var JSONData
JSONData = {
seriesName: 'Sales 2013',
data: [(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1, (Math.random() * 100) + 1,
(Math.random() * 100) + 1]
};
//alert('About to load the chart Data');
chart.addSeries({
name: JSONData.seriesName,
data: JSONData.data,
type: 'spline'
}, true);
chart.redraw(true);
};
// Create the chart
$('#container').highcharts({
chart: {
events: {
load: function () {
fnFetchData(this);
}
}
},
title: {
text: 'Chart Data from load Event'
},
exporting: {
enabled: true,
scale: 2,
filename: 'ChartWithDoubleupSeries'
},
spline: {
animation: false
},
series: []
});
});
I can reproduce the issue, here is an example:
http://jsfiddle.net/FtjJF/
I keep thinking it might be a bug that the 'load' event is being executed when exporting unless this is the standard behaviour and I need to include and extra option.
Versions details:
Highstock JS v1.3.1 (2013-04-09)
Highstock JS v1.3.1 (2013-04-09) Exporting module
Export chart through pragmatically like , make load event null
var chart = $('#chart-container').highcharts();
chart.exportChart(
{type: 'image/png', filename: 'name'},
{chart: { events:null } });
Simple workaround is to use setTimeout():
load: function () {
var chart = this;
setTimeout(function() {
fnFetchData(chart);
}, 1);
}
And for me looks like a bug, reported: https://github.com/highslide-software/highcharts.com/issues/1868
Thanks!
Currently as an alternative solution was to store the series names into an array. When the load event is fired I check the series name to see if it exists in the array. If it does, don't call the addSeries method.
var AvailableSeries = [];
$( chart.series).each(function(key,value){
AvailableSeries.push(value.name);
});
if ($.inArray( 'Sales 2013' ,AvailableSeries)==-1 ) {
chart.addSeries(name:'Sales 2013', data:[234,453,56732,435,4,45,32,232,43]});
};
After a little bit more investigation for a long term solution, I've added this line "options.chart.events = null;" to the exportpting.js script.
The problem with this solution might be a legitimate reason for the chart's events to be executed when the chart is being exported. I can't think of one. May be there should be an option to suppress events when exporting:
{ exporting:{ skipEvents:true } }

Is there a way to load data into Highstock without the use of PHP?

I've been bashing my head for 3 days trying all three methods of loading data into Highstock chart. Is there a way to import data without using PHP? I'm on an IIS Server with no PHP installed.
When I use the $j.getJSON() method pointing to http://www.highcharts.com/samples/data/jsonp.php it works fine. However, when I started trying to add my own data (I tried CSV and XML) I can see everything runs without a problem via the firebug console, but I get a weird result.
http://i.imgur.com/qj5y8bM.png
Can I please get a sample (3 plot points) for a Stockchart chart. All the samples I can find are for a Highchart Barchart. Which is a completely different beast than what I'm doing with StockChart. Please, I need a sample CSV and sample JSON to base this off of. Somebody please help.
Take a look the docs, there're some demos and explanation about how to do it.
First, create the csv.
Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15
Second, define the basic chart options.
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Units'
}
},
series: []
};
Third, process data.
$.get('data.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
And here is the result.
You should be able to load data into a Highcharts/Highstock object by using an array or a named-value object. The PHP sample URL on highcharts.com returns JSON data that can be understood by Highcharts/Highstock, but you can use any data source that returns JSON data.
As an example, here is some code that uses a simple array for the series data:
$(function() {
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
title : {
text : 'My chart'
},
series : [{
name : 'My Series',
data : [
[Date.UTC(2006, 0, 29, 0, 0, 0), 30.14],
[Date.UTC(2006, 0, 29, 1, 0, 0), 34.76],
[Date.UTC(2006, 0, 29, 2, 0, 0), 34.34],
[Date.UTC(2006, 0, 29, 3, 0, 0), 33.9]
]
}]
});
});
Here's a live sample: http://jsfiddle.net/fF9Ru/1/
If you have an existing data source, please post a sample of the data it is returning. The chart may not be rendering if the data is not properly formatted.

Highcharts error #13 unless I run under IE compatibility view?

I am developing an asp applicaiton which uses WCF service (.svc not .asmx) to send JSON data to highcharts. It only seems to work if I use ie compatibility view. If I don't I get the message:
Microsoft JScript runtime error: Highcharts error #13: http://www.highcharts.com/errors/13
Error number 13 along with online searching suggests I don't have the proper renter to DIV, but it is present. Any ideas what I can to to make my application work in non-compatibility view?
Thanks!
As requested here is some code. I have two charts placed side by side one deals with "Low" turnover items the other with high. Here is the low item chart thus it renders to a named containerLow.
var lowchart = new Highcharts.Chart({
chart: {
renderTo: 'containerLow'
},
xAxis: {
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
//ChartClicked(this.x, this.y, this, this.series.name, this.series.color, this.index);
ChartClicked(this, 'Low');
}
}
}
}
},
tooltip: {
formatter: function () {
var txt = "$= <b>" + this.point.x + "</b><br/>"
+ "Wait = <b>" + this.point.y + "</b><br/>"
+ "Other DB Info for future Bow Wave, etc. <b><br/>"
+ "Avg Fill Rate = <b>" + this.point.config.averageFillRate + "</b><br/>"
+ "Average On Hand = <b>" + this.point.config.averageOnHand + "</b><br/>"
+ "Average Workload = <b>" + this.point.config.averageWorkload + "</b><br/>"
return txt;
}
}
}); //end chart
My web service get a JSON string with multiple series in it. On page load I call the web service (twice once for hight and low items) and loop through the series array to plot the multiple curves.
function pageLoad() {
JSONGraphing.GetDataDB(getParameterByName("id"), 2, OnGetDataCompleteLow, OnError);
JSONGraphing.GetDataDB(getParameterByName("id"), 1, OnGetDataCompleteHigh, OnError);
}
Here is an example of one of the call back functions for the low graph.
function OnGetDataCompleteLow(result) {
var webServiceData = eval("(" + result + ")");
for (var i = 0; i < webServiceData.series.length; i++) {
lowchart.addSeries({
data: webServiceData.series[i].data
});
}
lowchart.yAxis[0].setTitle({
text: 'Wait time in Days'
});
lowchart.xAxis[0].setTitle({
text: 'Investment in Dollars'
});
lowchart.setTitle({ text: 'Low Frequency Items' });
}
I am in a bit of a time crunch any and all help greatly appreciated.
To make sure that the container exists you have to run your code after it gets rendered, it can be done by the following ways.
document.ready(function() {
// your code
});
or
<div id="container"> </div>
<script type="type="text/javascript"">
// your code here
</script>
or
(function() {
// your code here
})

Highcharts Legend titles changing after drilldown and back?

I have sample code for question here: http://jsfiddle.net/MuydK/
The problem relates to legend title in the key under chart are changing after I have drilled in and out.
They should stay as
"actual" and
"target"
And are changing to "series 1" and "series 2".
$(function () {
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories1 = ['1011', '1112', '1213', '1415'],
name1 = 'Actual',
I think I may be missing something in drilldown configuration or setChart code?
I got the same problem with a couple if charts based on code posted above.
Many Thanks
Hope this is what you need,
JSFiddle - Legend Name Problem
code:
function setChart(name, categories, data, color) {
console.log(name, categories, data, color);
chart.xAxis[0].setCategories(categories);
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < data.length; i++) {
chart.addSeries({
name: name[i],
data: data[i],
color: color[i]
});
}
}
Edit2: The problem is in your else statement in the function bellow.
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color);
} else { // restore
setChart(name, categories1, [data1, data2], 'white');
}
}ā€‹
Instead get rid of name1 = 'Actual' and only have data1 and data2 and add name and color to them then you could do like this instead
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
chart.xAxis[0].setCategories(drilldown.categories);
setChart([drilldown.data]);
} else { // restore
chart.xAxis[0].setCategories(categories);
setChart([data1, data2]);
}
}
// add code for removing series
chart.addSeries({
data
});ā€‹
I hope you understand, but it will be easier if you build data1/2as a highcharts object, and just add the drilldown part to it. So you can change;
series: [{
name: name1,
data: data1,
color: colors[0]},
{
name: name2,
data: data2,
color: colors[1]}],
to:
series: [data1, data2],ā€‹
Edit: When you are doing operations bellow you should not set redraw to true, it will be much faster. The same goes for adding the series. You do not need to call chart.redraw() until you have removed and added the charts. And removing stuff is easier backwards. So change:
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
To
for (var i = chart.series.length; i >= 0; i--){
chart.series[i].remove(false);
}
// add series with redraw == false
chart.redraw();

Resources