Highchart export server prevent 0 value in the pdf - highcharts

I am using highchart export server for exporting the highchart as psd in itextsharp.
I have created a handler that will give me the highchart as png image this image is rendered into the itext pdf.
So my rendering is: Convert the highchart to image using json file that will be used for rendering it into the pdf.
Expected: http://jsfiddle.net/9owxLgm9/1/
The problem is I am not able to add the code that will prevent the rendering of 0 values in the highchart pdf
formatter: function () {
if (this.y != 0) {
return Highcharts.numberFormat(this.percentage, 0) + ' %';
}
},
so my pdf images render something like this
http://jsfiddle.net/9owxLgm9/2/
ie it also shows the 0 values.
Is there any way i can remove the 0 based values in the json file

I don't know if it's really the result you want, but you can remove empty values / stats labels from the pie chart with this simple formatter:
formatter: function() {
if (this.y != 0) {
return this.y +'%';
} else {
return null;
}
}
Your updated demo here.
The above code will output the percentages as label value, so if you want to keep the names as label, you simply need to replace return this.y +'%'; by return this.point.name;
Here's another example with names as label (also following your fiddle).

The solution was to add a formatter function
"pie": {
"allowPointSelect": true,
"cursor": "pointer",
"dataLabels": {
"enabled": true,
"formatter": "function () {if (this.y != 0) { return Highcharts.numberFormat(this.percentage, 0) + ' %';} }",
"format": "{point.percentage:.2f} %",
"distance": 4,
"filter": { "property": "percentage", "operator": ">", "value": 1}
},
"showInLegend": true
}

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/

Customizing default y-axis label in Highcharts

I want to prefix a $ to the default y-axis label. My bar chart is using values in the millions so the chart is returning value-MM (80MM, 30MM). What I would like to do is format the y-axis like $-value-MM ($80MMm $30MM). I have tried the code below and can't get it to work?
yAxis: [{ // Primary yAxis
labels: {
formatter: function () {
return '$' + this.value;
}
},
title: {
text: 'Revenue',
If I understand the question correctly, your data already has 'MM' suffix and you want to add the prefix '$'.
Try,
yAxis: {
labels: {
format: '${value}'
}
}
One rather elaborate way to achieve this is to re-use the code Highcharts uses in their internal defaultLabelFormatter for axis that are numeric, and use it in the axis formatter.
An example of this, with your added prefix (JSFiddle):
yAxis: {
labels: {
formatter: function() {
var numericSymbols = Highcharts.getOptions().lang.numericSymbols;
var i = numericSymbols && numericSymbols.length;
var numericSymbolDetector = this.axis.isLog ? this.value : this.axis.tickInterval;
var UNDEFINED, ret, multi;
while (i-- && ret === UNDEFINED) {
multi = Math.pow(1000, i + 1);
if (numericSymbolDetector >= multi && (this.value * 10) % multi === 0 && numericSymbols[i] !== null) {
ret = Highcharts.numberFormat(this.value / multi, -1) + numericSymbols[i];
}
}
if (ret === UNDEFINED) {
if (Math.abs(this.value) >= 10000) {
ret = Highcharts.numberFormat(this.value, -1);
} else {
ret = Highcharts.numberFormat(this.value, -1, UNDEFINED, '');
}
}
return "$"+ret; // Adding the prefix
}
},
}
A experimental short form of this would be to call the defaultLabelFormatter with the essential parts of the context it requires. An example of this (JSFiddle):
yAxis: {
labels: {
formatter: function() {
return "$" + this.axis.defaultLabelFormatter.call({
axis: this.axis,
value: this.value
});
}
},
}
As the context is incomplete it wouldn't work as expected if your axis was datetime or categories or perhaps logarithmical, but should work for numeric axis. For the full picture I suggest looking at the full defaultLabelFormatter implementation.

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 );

Setting formatter callback using highcharts-convert.js

I am using highcharts-convert.js to create PDF charts on the serverside. I want to set the dataLabel formatter for a column chart (http://api.highcharts.com/highcharts#plotOptions.column.dataLabels). As this is a function, I can't write it in my output json file that is the input for highcharts-convert.js. So I assume I need to put it in my callback.js and call it like:
highcharts-convert.js -infile infile.js -outfile outfile.pdf -width 1000 -callback callback.js
But I can't set the formatter function in callback.js. I tried this:
function( chart ) {
var labelFormatter = function(p) {
if (this.y == 0) {
return '';
}
else {
return this.y
}
};
chart.series.dataLabels.formatter = labelFormatter;
}
But that gives me this error:
TypeError: 'undefined' is not an object (evaluating 'chart.series.dataLabels.formatter = labelFormatter')
I tried putting the formatter function outside the definition of the callback, but highcharts-convert.js won't accept that. How do I set a dataLabel formatter callback for highcharts-convert.js?
Well, input file for Highcharts exporting server doesn't have to be true JSON. In general, function in that JSON are supported. Just use that as example:
{"series": [{"data": [29.9, 71.5, 106.4], "dataLabels": { "enabled": true, "formatter":function(p) {if (this.y == 0) {return '';} else {return this.y+'a';}}}}]}
if you use callback function at serverside, Use this.
function (chart) {
options = chart.options;
var labelFormatter = function() {
if (this.y == 0) return '';
else return this.y;
}
options.yAxis[0].labels = new Object();
options.yAxis[0].labels.formatter = labelFormatter;
chart = new Highcharts.Chart(options);
chart.redraw();
}

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.

Resources