Customizing default y-axis label in Highcharts - 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.

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/

Highcharts: how to assign different colours to a spline depending on positive or negative slope?

I'm evaluating Highcharts for a project and it seems to be missing a built-in feature I would need.
For a spline, I need to assign one colour if the slope is positive, and another if it is negative, like this:
Before I invest the time in learning the API, it would be helpful to know if this is doable. A working example would be much appreciated.
You can use dynamically calculated zones, for example:
events: {
load: function() {
let points = this.series[0].points,
zones = [],
color;
function addZone(value, color) {
zones.push({
value: value,
color: color
});
}
points.forEach(function(p, i) {
if (points[i - 1]) {
if (p.y >= points[i - 1].y) {
if (color && color !== 'green') {
addZone(points[i - 1].x, 'red');
}
color = 'green';
} else if (p.y <= points[i - 1].y) {
if (color && color !== 'red') {
addZone(points[i - 1].x, 'green');
}
color = 'red';
}
}
addZone(p.x, color);
});
this.series[0].update({
zones: zones
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/jmckag4q/1/
API Reference: https://api.highcharts.com/highcharts/series.line.zones

Angular UI-grid not sorting by date

I am using UI-grid, and I have a bunch of JS date objects like so:
"dob": new Date('1942-11-19')
I want to be able to filter the column by date when you click the "sort ascending/descending" buttons. As such, I have set the colDef up like so:
{
field: 'dob'
, displayName: 'D.O.B.'
, width: '130'
, editableCellTemplate: '<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="\'colt\' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD" style="border-bottom-color: #74B3CE; border-bottom-width: 2px;"></form></div>'
, headerCellClass: $scope.highlightFilteredHeader
, cellTemplate: '<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col)| date:\'MM-dd-yyyy\'}}</div>'
, cellFilter: 'date'
, type: 'date'
},
however, the column simply does not sort correctly. I even tried to set up a function to sort it from an external button like so:
function mostRecent(){
console.log('clicked mostRecent');
$scope.gridApi.grid.sortColumn(
$scope.gridApi.grid.getColumn('dob'), uiGridConstants.DESC
);
$scope.gridApi.grid.notifyDataChange(uiGridConstants.dataChange.ALL); //this line updates the rest of the columns accordingly
};
But it also causes a mish-mush sort that is not correct. Does anyone know what the issue is? I thought it might have to do with my cellTemplate, but after removing the template, there wasn't a difference...
Yes you are right, ui-grid doesn't support sorting of Date type columns.
However you can define a sortingAlgorithm in the columnDef.
Here is how your column definition should look like:
...
columnDefinition.sortingAlgorithm = function (firstDateString, secondDateString) {
var dateFormat = 'YYYY-MM-DD';
return function (firstDateString, secondDateString, dateFormat) {
if (!firstDateString && !secondDateString) {
return 0;
}
if (!firstDateString) {
return 1;
}
if (!secondDateString) {
return -1;
}
var firstDate = $window.moment(firstDateString, dateFormat);
if (!firstDate.isValid()) {
throw new Error('Invalid date: ', firstDateString);
}
var secondDate = $window.moment(secondDateString, dateFormat);
if (!firstDate.isValid()) {
throw new Error('Invalid date: ', secondDateString);
}
if (firstDate.isSame(secondDate)) {
return 0;
} else {
return firstDate.isBefore(secondDate) ? -1 : 1;
}
};
};
...
Please note that in this example Moment.js is used. It is a very useful library so you might probably find also another place in your project where to use it.
$scope.gridOptions = {
data: 'gridData',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field:'age',
displayName:'Birth Date',
sortFn: function (aDate, bDate) {
var a=new Date(aDate);
var b=new Date(bDate);
if (a < b) {
return -1;
}
else if (a > b) {
return 1;
}
else {
return 0;
}
}
}]
};
Try this
http://plnkr.co/edit/0VD3X5YvuNSWAZlig95X?p=info
reference :
https://github.com/angular-ui/ui-grid/issues/222
You can define the Sorting Algorithm for the date fields in UI Grid like below
columnDefs: [
{
field: 'DateFrom', displayName: 'From',
sortingAlgorithm: function (aDate, bDate, rowA, rowB, direction) {
var a = new Date(moment(aDate, "DD-MM-YYYY").format("YYYY-MM-DD"));
//here DD-MM-YYYY is the current format in which the dates are returned
var b = new Date(moment(bDate, "DD-MM-YYYY").format("YYYY-MM-DD"));
if (a < b) {
return -1;
}
else if (a > b) {
return 1;
}
else {
return 0;
}
}
}
]
We can sort the ui-grid column containing date field in a simplest way.
Make use of cellTemplate in this way:
{
name: "Date",
field: 'date',
cellTemplate:'<div>{{row.entity.date | date:"dd/MM/yyyy"}}</div>'
},
So, you can choose any format for date, for eg. date:"dd-MM" etc.

Synchronized charts example with Highstock crashes with "Cannot read property 'category' of undefined"

I want the functionality of the "Synchronized charts" example, but with Highstock. But when trying to accomplish this, I get "highstock.src.js:9991 Uncaught TypeError: Cannot read property 'category' of undefined"
This also holds directly for the example: http://www.highcharts.com/demo/synchronized-charts doesn't work when converted to Highstock: http://jsfiddle.net/9gq47g0w/
(Since StackOverflow demands me to post some code along with the fiddle, here's from Highstock, noting the point where it crashes with **):
/**
* Refresh the tooltip's text and position.
* #param {Object} point
*/
refresh: function (point, mouseEvent) {
...
// shared tooltip, array is sent over
if (shared && !(point.series && point.series.noSharedTooltip)) {
...
textConfig = {
x: ** point[0].category, ** <- here!
y: point[0].y
};
...
}
...
},
Here you can find an example of synchronized highstock charts:
http://jsfiddle.net/vw77cooj/20/
This example is using custom functions for synchronizing extremes and tooltips on charts:
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function(chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
trigger: 'syncExtremes'
});
}
}
});
}
}
$('#container').bind('mousemove touchmove touchstart', function(e) {
Highcharts.each(Highcharts.charts, function(chart) {
event = chart.pointer.normalize(e.originalEvent);
point = chart.series[0].searchPoint(event, true);
if (point) {
point.onMouseOver(); // Show the hover marker
chart.tooltip.refresh(point); // Show the tooltip
chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair
}
});
});
In case of having multiple series on your chart you may change function responsible for synchronizing your tooltip:
function syncTooltip(container, p) {
var i = 0,
j = 0,
data,
series,
points = [];
for (; i < chartSummary.length; i++) {
if (container.id != chartSummary[i].container.id) {
series = chartSummary[i].series
Highcharts.each(series, function(s) {
Highcharts.each(s.data, function(point) {
if (point.x === p && point.series.yAxis.options.index !== 1) {
points.push(point)
}
})
});
chartSummary[i].tooltip.refresh(points);
}
};
}
http://jsfiddle.net/ZArZM/316/
For a nice working example on Highstock, please follow this example with MouseOver and MouseOut:
var onMouseOver = function onMouseOver() {
var x = this.x,
interactedChart = this.series.chart,
points = [],
charts = Highcharts.charts,
each = Highcharts.each;
each(charts, function(chart) {
if (chart !== interactedChart) {
each(chart.series, function(series) {
each(series.data, function(point) {
if (point.x === x && point.series.yAxis.options.index !== 1) {
points.push(point)
}
})
});
each(points, function(p) {
p.setState('hover');
});
chart.tooltip.refresh(points);
}
});
}
http://jsfiddle.net/ska1r5wq/
You can avoid many tooltip issues from examples provided on the web.
Source : https://github.com/highcharts/highcharts/issues/6595

Highcharts: How to access range values in formatter for "columnrange" type?

I want to customize the tooltips of my Highcharts graph. The y-axis is of type "columnrange", i.e. it has an interval for the y-value:
series: [{
data: [
[-0.547571175, 0.401498266],
[-0.960011899, 0.444655955],
[-0.660727717, 0.862639688],
[-0.446911722, 0.660380453],
[-0.863925256, 0.619544707],
.......
]
}]
The tooltip formatter should look something like this:
tooltip: {
formatter: function() {
var point = this.points[0];
return '<b>'+ point.x +'</b><br />Interval:'+ point.low +' - '+ point.high;
},
shared: true
}
But point.low and point.high are not defined... How to get these low/high values?
Here you find a sample graph: http://jsfiddle.net/dmN3N/21/
In case when you use shared option in tooltip then you need to use this.points[0] etc, if you have shared option disabled you should use this.point
Take look at example shared
http://jsfiddle.net/dmN3N/24/
tooltip: {
shared:true,
valueSuffix: '',
formatter:function(){
return 'LOW: '+this.points[0].point.low+' HIGH: '+this.points[0].point.high ;
}
},
and not shared
http://jsfiddle.net/dmN3N/22/
tooltip: {
valueSuffix: '',
formatter:function(){
return 'LOW: '+this.point.low+' HIGH: '+this.point.high;
}
},
This code works fine for the formatter of tooltips:
tooltip: {
formatter: function() {
var point = this.points[0];
return '<b>'+ point.x +'</b><br />Interval:'+ point.series.data[0].low +' - '+ point.series.data[0].high;
},
shared: true
}
See here for a sample: http://jsfiddle.net/c2gVe/1/
To use the basic pointFormat property you can do:
tooltip: { pointFormat: '{point.low}' }
Aren't they just point[0] and point[1] for low and high respectively?
Try this, for your formatter function:
formatter: function() {
var lowPoint = getLow(this.series.data, 'x');
var highPoint = getHigh(this.series.data, 'x');
return '<b>'+ this.x +'</b><br />Interval:'+ lowPoint +' - '+ highPoint;
}
The getLow() and getHigh() functions simply take the list of points and returns the low/high points respectively.
Here is one way of implementing it, but you're free to use whatever algorithm you like.
I'm assuming you wanted the highest/lowest x value (you can easily get y by passing in 'y' as axis argument):
var getLow = function(list, axis) {
var low = null;
for (var i = 0; i < list.length; i++){
if (low !== null) {
low = list[i][axis] < low ? list[i][axis] : low;
} else {
low = list[i][axis];
}
}
return low;
};
var getHigh = function(list, axis) {
var high = null;
for (var i = 0; i < list.length; i++){
if (high !== null) {
high = list[i][axis] > high ? list[i][axis] : high;
} else {
high = list[i][axis];
}
}
return high;
};
Here is the fiddle to demonstrate: http://jsfiddle.net/tKB7y/

Resources