First things first – HighCharts are not free for commercial use. However, for your own website, a school site or a non-profit organisation they are free to use. You are also OK to make modifications. So – that’s the “cover my back” bit out of the way – now, how to use them in Node-Red.
I’ve looked at this before, because their charts are very, very nice. As some of you know, I’m now sold on Grafana but I also really like the idea of using charts with my favourite database – SQLITE and this is not supported as far as I can see with Grafana. Indeed I’m glad there is a Node-Red Node for InfluxDB as I had trouble getting my head around inputting data into InfluxDB otherwise (the node makes it REALLY easy).
And so it was that I came back to HighCharts. Now one of the demos of theirs that I really like, involves plotting variable numbers of time-based lines in a graph (temperature, humidity etc)– with potentially missing values. I found when using other chart systems that if you had the odd missing value due to power failure etc, you had to fix that – with the HighCharts demo it just draws a smooth curve between the two.
Another of their demos features zooming and it is only in the last couple of days when taking another look – that I realised you could combine the two – zoomable multi-line graphs.
What you see on the right is little more than a tweeked version of their basic demo – with a few bits taken out to make the whole thing work in the limited space we typically have in Node-Red Desktop – and zooming built in.
I tested everything in JSFiddle and then tried dumping it into Node-Red – nothing – zilch. I found that using the libraries remotely just would not work. Out of desperation I grabbed the libraries, one of which is big and put them into one of my usual “myjs” directories on the Raspberry Pi and lo and behold, it all worked.
Here you see above my test – now bear in mind this is very preliminary. In the brown FUNCTION nodes I have 2 different sets of data just to test things… and these feed an object in msg.payload through to the Dashboard UI. I’ve made two of these – using two different DIVs. One is called “mine1” and the other is called “mine2” – they fill DIV ids “container1” and “container2" respectively. Everything else is the same.
So – starting off with their demo here http://www.highcharts.com/demo/spline-irregular-time
I took that demo and wrapped the lot in a function (object) – so as to hide everything from the outside world in case I wanted two or more of these on a page. I then wrapped the code inside a local, externally accessible function. This could be way more efficient – but I wanted something up and running and as you will see I have two completely independent graphs here.
Here is the code inside the blue template. The only thing that changes is the reference to the DIV (container1/container2) and the references to the new object (mine1/mine2) – and of course near the end I’ve fed unique titles and subtitles when creating the object but the latter do not have to be unique.
<script src="/myjs/highcharts.js"></script>
<script src="/myjs/exporting.js"></script>
<div id="container1" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
<script>
(function(scope){
scope.$watch('msg', function(msg) {
mine1.graph(msg.payload);
});
})(scope);
var sample_data1=[{
name: 'Winter 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}, {
name: 'Winter 2013-2014',
data: [
[Date.UTC(1970, 9, 29), 0],
[Date.UTC(1970, 10, 9), 0.4],
[Date.UTC(1970, 11, 1), 0.25],
[Date.UTC(1971, 0, 1), 1.66],
[Date.UTC(1971, 0, 10), 1.8],
[Date.UTC(1971, 1, 19), 1.76],
[Date.UTC(1971, 2, 25), 2.62],
[Date.UTC(1971, 3, 19), 2.41],
[Date.UTC(1971, 3, 30), 2.05],
[Date.UTC(1971, 4, 14), 1.7],
[Date.UTC(1971, 4, 24), 1.1],
[Date.UTC(1971, 5, 10), 0]
]
}, {
name: 'Winter 2014-2015',
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6],
[Date.UTC(1971, 0, 17), 2.55],
[Date.UTC(1971, 0, 24), 2.62],
[Date.UTC(1971, 1, 4), 2.5],
[Date.UTC(1971, 1, 14), 2.42],
[Date.UTC(1971, 2, 6), 2.74],
[Date.UTC(1971, 2, 14), 2.62],
[Date.UTC(1971, 2, 24), 2.6],
[Date.UTC(1971, 3, 2), 2.81],
[Date.UTC(1971, 3, 12), 2.63],
[Date.UTC(1971, 3, 28), 2.77],
[Date.UTC(1971, 4, 5), 2.68],
[Date.UTC(1971, 4, 10), 2.56],
[Date.UTC(1971, 4, 15), 2.39],
[Date.UTC(1971, 4, 20), 2.3],
[Date.UTC(1971, 5, 5), 2],
[Date.UTC(1971, 5, 10), 1.85],
[Date.UTC(1971, 5, 15), 1.49],
[Date.UTC(1971, 5, 23), 1.08]
]
}];
function doit(theContainer,title,subtitle)
{
this.graph=function(xx)
{
Highcharts.chart(theContainer, {
chart: {
zoomType: 'x',
type: 'spline'
},
title: {
text: title
},
subtitle: {
text: subtitle
},
credits: { enabled: false },
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
exporting: {
buttons: {
contextButton: {
enabled: false
} } },
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: false
}
}
},
series: xx
});
}
}
mine1=new doit("container1","title1","Subtitle1");
mine1.graph(sample_data1);
</script>
and here is the code inside one of those orange functions – the only thing that changes is the data.
msg.payload=[{
name: 'Win 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}, {
name: 'Win 2013-2014',
data: [
[Date.UTC(1970, 9, 29), 0],
[Date.UTC(1970, 10, 9), 0.4],
[Date.UTC(1970, 11, 1), 0.25],
[Date.UTC(1971, 0, 1), 1.66],
[Date.UTC(1971, 0, 10), 1.8],
[Date.UTC(1971, 1, 19), 1.76],
[Date.UTC(1971, 2, 25), 2.62],
[Date.UTC(1971, 3, 19), 2.41],
[Date.UTC(1971, 3, 30), 2.05],
[Date.UTC(1971, 4, 14), 1.7],
[Date.UTC(1971, 4, 24), 1.1],
[Date.UTC(1971, 5, 10), 0]
]
}, {
name: 'Win 2014-2015',
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6],
[Date.UTC(1971, 0, 17), 2.55],
[Date.UTC(1971, 0, 24), 2.62],
[Date.UTC(1971, 1, 4), 2.5],
[Date.UTC(1971, 1, 14), 2.42],
[Date.UTC(1971, 2, 6), 2.74],
[Date.UTC(1971, 2, 14), 2.62],
[Date.UTC(1971, 2, 24), 2.6],
[Date.UTC(1971, 3, 2), 2.81],
[Date.UTC(1971, 3, 12), 2.63],
[Date.UTC(1971, 3, 28), 2.77],
[Date.UTC(1971, 4, 5), 2.68],
[Date.UTC(1971, 4, 10), 2.56],
[Date.UTC(1971, 4, 15), 2.39],
[Date.UTC(1971, 4, 20), 2.3],
[Date.UTC(1971, 5, 5), 2],
[Date.UTC(1971, 5, 10), 1.85],
[Date.UTC(1971, 5, 15), 1.49],
[Date.UTC(1971, 5, 23), 1.08]
]
}];
return msg;
With more work, this could be really useful – and don’t forget to check the BIG range of graphs and other widgets in the HiCharts demos – there is some wonderful stuff in there.
Back to databases - as you can see it would not be hard at all to pull data like this out of just about any database! That's my next job after I tidy this up a bit.
I’ve just spent time working on my hallway wall display, the amount of which would be considered commercial suicide. Good job it isn’t commercial.
![MiFlora[6]](https://tech.scargill.net/wp-content/uploads/2017/02/MiFlora6.jpg "MiFlora[6]")
