Highchart zoom feature is not working. It is in https://jsfiddle.net/f0n31uqx/ - highcharts
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/
Related
Drilldown in Sankey Diagram
I'm looking for example code on how to implement a drilldown in a sankey diagram. I tried using the drilldown code from the column drilldown demo but it didn't work for sankey. The intended functionality is very similar to a dendogram, i.e- click a node to hide reveal child nodes. Example: https://jsfiddle.net/y_tddel/d7jby2z1/5/ . In this example each node in the second column will be clickable and have their own child nodes.The expanded view of Indo-Iranian node is shown as as an example.
Series.point.events can be used to trigger the event when the user clicks on any node, and update the series data, and adding a back button.
Link: https://api.highcharts.com/highcharts/series.sankey.point.events.click
Look at the following code sample:
Highcharts.chart('container', {
series: [{
point: {
events: {
click: function (e) {
console.log(e, 'e')
let series = this.series,
chart = series.chart;
if (this.isNode) {
if (isDrilldown[isDrilldown.length - 1] != this.name && drilldown_data.hasOwnProperty(this.name)) {
chart.backButton = chart.renderer.button('back', chart.plotLeft, 20, function () {
isDrilldown.pop();
d = JSON.parse(JSON.stringify(drilldown_data[isDrilldown[isDrilldown.length - 1]]));
series.update({data: d});
chart.backButton.destroy();
chart.title.show();
}).add()
isDrilldown.push(this.name);
chart.title.hide()
this.series.update({
data: JSON.parse(JSON.stringify(drilldown_data[this.name]))
})
}
}
}
}
},
keys: ['from', 'to', 'weight', 'drilldown'],
data: JSON.parse(JSON.stringify(plot_data)),
type: 'sankey'
}],
});
Demo: https://jsfiddle.net/deveshgoyal/1zcnuq5b/2/
Current drilldown module is not compatible with the sankey series. You will need to create your own drilldown logic. Below is a basic demo which shows how to update series on click event - which could be treated as an drilldown to other series.
Demo: https://jsfiddle.net/BlackLabel/hn19xga5/
events: {
click() {
let series = this.series,
chart = series.chart;
if (!isDrilldown) {
chart.backButton = chart.renderer.button('back', 20, 20, function() {
series.update({
data: initialData
})
chart.backButton.destroy();
isDrilldown = false;
}).add()
isDrilldown = true;
}
this.series.update({
data: drilldown1
})
}
}
API: https://api.highcharts.com/highcharts/series.sankey.data.events.click
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
Highstock - How to add point if I have different data on main chart and navigator
I want to have data on the chart with scale 1 hour for point and have navigator data with scale 1 day per point.
At the same time I want to add new points to the chart in real time.
When I run my example:
https://jsfiddle.net/antongrinenko/aj7m2euk/3/
$(function () {
var val = 0;
function generateValue() {
val++;
if (val > 5) {
val = 0;
}
return val;
}
function generateData(backInDays, pointDuration) {
var points = [];
var d = new Date();
d.setDate(d.getDate() - backInDays);
for (var i = d.getTime(); i<new Date().getTime(); i += pointDuration) {
points.push([i, generateValue()]);
}
return points;
};
var weekData = generateData(30, 1000 * 60 * 60 * 24); //1 day per point
var oneDayData = generateData(1, 1000 * 60 * 60); //1 hour per point
$('#chart').highcharts('StockChart', {
chart: {
type: 'line'
},
series: [{
name: 'SomeData',
data: oneDayData
}],
navigator : {
adaptToUpdatedData: false,
series: {
data: weekData
},
},
scrollbar: {
liveRedraw: false
},
yAxis: {
floor: 0
}
});
setInterval(function() {
$('#chart').highcharts().series[0].addPoint([new Date().getTime(), generateValue()]);
}, 2000);
});
all works fine. But when I scroll a litte left and then back to right main chart stops updating with new points.
How can I fix this problem?
try commenting adaptToUpdatedData: false, working well
How to load data in highcharts from text
I would like to use a CSV file as source for a highcharts graph.
Could you give some guidance? I need to understand basically how to get data in the web page.
Do I need to put the function that load the text file in the "series" part of the js function?
This is what I have so far:
<script type='text/javascript'>
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'chart example'
},
xAxis: {
categories: []
},
yAxis: {
},
series: []
};
$.get('test.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 == 1) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
This is how the data file is structured in the CSV file:
Compound,Value
mix1,0.244
mix2,0.453
pureCu,1
pureAg,0.98
The value of column 1 is an ID basically, so the distance between each of them could be considered as 1. So technically, the first column would be always from 1 to 15 for example, with the label using the name in the first column
I would like to put the second field on the Y, and on the X the first field; but using the code pasted (which is what is on an example on the Highcharts website), I can't really figure out how to set up correctly the values on each side of the chart.
Thanks
Here you can find tutorials from Highcharts to load data from external file: http://www.highcharts.com/docs/working-with-data/preprocessing About refreshing page - yes you can refresh page every n-seconds, however it would be better (I think) to call AJAX to fetch new data from server and then replace it in Highcharts (simply using chart.series[0].setData( new_array_of_data );
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 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();