How to Connect Node-RED to High Charts for generating reports?

#1

I want to connect Real - Time as well as Historical Data sources to High Charts using Node-RED. Is it possible? If yes, how to do it?

0 Likes

#2
0 Likes

#3

I tried the same configurations as given on your blog , but I'm not able to get the graph on Node-RED UI.
How can we get the output graph?

Flow is given below:

[{"id":"4c9bcdcf.e56994","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"debd4311.942a","type":"function","z":"4c9bcdcf.e56994","name":"","func":"\nmsg.payload=[{\n name: 'Win 2012-2013',\n // Define the data points. All series have a dummy year\n // of 1970/71 in order to be compared on the same x axis. Note\n // that in JavaScript, months start at 0 for January, 1 for February etc.\n data: [\n [Date.UTC(1970, 9, 21), 0],\n [Date.UTC(1970, 10, 4), 0.28],\n [Date.UTC(1970, 10, 9), 0.25],\n [Date.UTC(1970, 10, 27), 0.2],\n [Date.UTC(1970, 11, 2), 0.28],\n [Date.UTC(1970, 11, 26), 0.28],\n [Date.UTC(1970, 11, 29), 0.47],\n [Date.UTC(1971, 0, 11), 0.79],\n [Date.UTC(1971, 0, 26), 0.72],\n [Date.UTC(1971, 1, 3), 1.02],\n [Date.UTC(1971, 1, 11), 1.12],\n [Date.UTC(1971, 1, 25), 1.2],\n [Date.UTC(1971, 2, 11), 1.18],\n [Date.UTC(1971, 3, 11), 1.19],\n [Date.UTC(1971, 4, 1), 1.85],\n [Date.UTC(1971, 4, 5), 2.22],\n [Date.UTC(1971, 4, 19), 1.15],\n [Date.UTC(1971, 5, 3), 0]\n ]\n }, {\n name: 'Win 2013-2014',\n data: [\n [Date.UTC(1970, 9, 29), 0],\n [Date.UTC(1970, 10, 9), 0.4],\n [Date.UTC(1970, 11, 1), 0.25],\n [Date.UTC(1971, 0, 1), 1.66],\n [Date.UTC(1971, 0, 10), 1.8],\n [Date.UTC(1971, 1, 19), 1.76],\n [Date.UTC(1971, 2, 25), 2.62],\n [Date.UTC(1971, 3, 19), 2.41],\n [Date.UTC(1971, 3, 30), 2.05],\n [Date.UTC(1971, 4, 14), 1.7],\n [Date.UTC(1971, 4, 24), 1.1],\n [Date.UTC(1971, 5, 10), 0]\n ]\n }, {\n name: 'Win 2014-2015',\n data: [\n [Date.UTC(1970, 10, 25), 0],\n [Date.UTC(1970, 11, 6), 0.25],\n [Date.UTC(1970, 11, 20), 1.41],\n [Date.UTC(1970, 11, 25), 1.64],\n [Date.UTC(1971, 0, 4), 1.6],\n [Date.UTC(1971, 0, 17), 2.55],\n [Date.UTC(1971, 0, 24), 2.62],\n [Date.UTC(1971, 1, 4), 2.5],\n [Date.UTC(1971, 1, 14), 2.42],\n [Date.UTC(1971, 2, 6), 2.74],\n [Date.UTC(1971, 2, 14), 2.62],\n [Date.UTC(1971, 2, 24), 2.6],\n [Date.UTC(1971, 3, 2), 2.81],\n [Date.UTC(1971, 3, 12), 2.63],\n [Date.UTC(1971, 3, 28), 2.77],\n [Date.UTC(1971, 4, 5), 2.68],\n [Date.UTC(1971, 4, 10), 2.56],\n [Date.UTC(1971, 4, 15), 2.39],\n [Date.UTC(1971, 4, 20), 2.3],\n [Date.UTC(1971, 5, 5), 2],\n [Date.UTC(1971, 5, 10), 1.85],\n [Date.UTC(1971, 5, 15), 1.49],\n [Date.UTC(1971, 5, 23), 1.08]\n ]\n }];\n \nreturn msg;\n\n","outputs":1,"noerr":0,"x":574.5000076293945,"y":151.00000190734863,"wires":[["fdd97c80.f3857"]]},{"id":"fdd97c80.f3857","type":"ui_template","z":"4c9bcdcf.e56994","group":"9ca5f562.6cb4d8","name":"","order":0,"width":0,"height":0,"format":"<script src=\"/myjs/highcharts.js\"></script>\n<script src=\"/myjs/exporting.js\"></script>\n<div id=\"container1\" style=\"min-width: 300px; height: 300px; margin: 0 auto\"></div>\n\n<script>\n (function(scope){\n scope.$watch('msg', function(msg) {\n mine1.graph(msg.payload);\n });\n })(scope);\n\n\nvar sample_data1=[{\n name: 'Winter 2012-2013',\n // Define the data points. All series have a dummy year\n // of 1970/71 in order to be compared on the same x axis. Note\n // that in JavaScript, months start at 0 for January, 1 for February etc.\n data: [\n [Date.UTC(1970, 9, 21), 0],\n [Date.UTC(1970, 10, 4), 0.28],\n [Date.UTC(1970, 10, 9), 0.25],\n [Date.UTC(1970, 10, 27), 0.2],\n [Date.UTC(1970, 11, 2), 0.28],\n [Date.UTC(1970, 11, 26), 0.28],\n [Date.UTC(1970, 11, 29), 0.47],\n [Date.UTC(1971, 0, 11), 0.79],\n [Date.UTC(1971, 0, 26), 0.72],\n [Date.UTC(1971, 1, 3), 1.02],\n [Date.UTC(1971, 1, 11), 1.12],\n [Date.UTC(1971, 1, 25), 1.2],\n [Date.UTC(1971, 2, 11), 1.18],\n [Date.UTC(1971, 3, 11), 1.19],\n [Date.UTC(1971, 4, 1), 1.85],\n [Date.UTC(1971, 4, 5), 2.22],\n [Date.UTC(1971, 4, 19), 1.15],\n [Date.UTC(1971, 5, 3), 0]\n ]\n }, {\n name: 'Winter 2013-2014',\n data: [\n [Date.UTC(1970, 9, 29), 0],\n [Date.UTC(1970, 10, 9), 0.4],\n [Date.UTC(1970, 11, 1), 0.25],\n [Date.UTC(1971, 0, 1), 1.66],\n [Date.UTC(1971, 0, 10), 1.8],\n [Date.UTC(1971, 1, 19), 1.76],\n [Date.UTC(1971, 2, 25), 2.62],\n [Date.UTC(1971, 3, 19), 2.41],\n [Date.UTC(1971, 3, 30), 2.05],\n [Date.UTC(1971, 4, 14), 1.7],\n [Date.UTC(1971, 4, 24), 1.1],\n [Date.UTC(1971, 5, 10), 0]\n ]\n }, {\n name: 'Winter 2014-2015',\n data: [\n [Date.UTC(1970, 10, 25), 0],\n [Date.UTC(1970, 11, 6), 0.25],\n [Date.UTC(1970, 11, 20), 1.41],\n [Date.UTC(1970, 11, 25), 1.64],\n [Date.UTC(1971, 0, 4), 1.6],\n [Date.UTC(1971, 0, 17), 2.55],\n [Date.UTC(1971, 0, 24), 2.62],\n [Date.UTC(1971, 1, 4), 2.5],\n [Date.UTC(1971, 1, 14), 2.42],\n [Date.UTC(1971, 2, 6), 2.74],\n [Date.UTC(1971, 2, 14), 2.62],\n [Date.UTC(1971, 2, 24), 2.6],\n [Date.UTC(1971, 3, 2), 2.81],\n [Date.UTC(1971, 3, 12), 2.63],\n [Date.UTC(1971, 3, 28), 2.77],\n [Date.UTC(1971, 4, 5), 2.68],\n [Date.UTC(1971, 4, 10), 2.56],\n [Date.UTC(1971, 4, 15), 2.39],\n [Date.UTC(1971, 4, 20), 2.3],\n [Date.UTC(1971, 5, 5), 2],\n [Date.UTC(1971, 5, 10), 1.85],\n [Date.UTC(1971, 5, 15), 1.49],\n [Date.UTC(1971, 5, 23), 1.08]\n ]\n }];\n \nfunction doit(theContainer,title,subtitle)\n{\nthis.graph=function(xx)\n{\nHighcharts.chart(theContainer, {\n chart: {\n zoomType: 'x',\n type: 'spline'\n },\n title: {\n text: title\n },\n subtitle: {\n text: subtitle\n },\n credits: { enabled: false },\n xAxis: {\n type: 'datetime',\n dateTimeLabelFormats: { // don't display the dummy year\n month: '%e. %b',\n year: '%b'\n },\n title: {\n text: 'Date'\n }\n },\n \n exporting: {\n buttons: {\n contextButton: {\n enabled: false\n } } },\n\n yAxis: {\n title: {\n text: 'Snow depth (m)'\n },\n min: 0\n },\n tooltip: {\n headerFormat: '<b>{series.name}</b><br>',\n pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'\n },\n\n plotOptions: {\n spline: {\n marker: {\n enabled: false\n }\n }\n },\n\n series: xx\n});\n\n}\n\n}\nmine1=new doit(\"container1\",\"title1\",\"Subtitle1\");\nmine1.graph(sample_data1);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":778.1000366210938,"y":251,"wires":[[]]},{"id":"b795a88f.a71d38","type":"inject","z":"4c9bcdcf.e56994","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":325.1000061035156,"y":129,"wires":[["debd4311.942a"]]},{"id":"7f299d5f.74ca54","type":"function","z":"4c9bcdcf.e56994","name":"","func":"msg.payload=[{\n name: 'Win 2012-2013',\n // Define the data points. All series have a dummy year\n // of 1970/71 in order to be compared on the same x axis. Note\n // that in JavaScript, months start at 0 for January, 1 for February etc.\n data: [\n [Date.UTC(1970, 9, 21), 0],\n [Date.UTC(1970, 10, 4), 0.28],\n [Date.UTC(1970, 10, 9), 0.25],\n [Date.UTC(1970, 10, 27), 0.2],\n [Date.UTC(1970, 11, 2), 0.28],\n [Date.UTC(1970, 11, 26), 0.28],\n [Date.UTC(1970, 11, 29), 0.47],\n [Date.UTC(1971, 0, 11), 0.79],\n [Date.UTC(1971, 0, 26), 0.72],\n [Date.UTC(1971, 1, 3), 1.02],\n [Date.UTC(1971, 1, 11), 1.12],\n [Date.UTC(1971, 1, 25), 1.2],\n [Date.UTC(1971, 2, 11), 1.18],\n [Date.UTC(1971, 3, 11), 1.19],\n [Date.UTC(1971, 4, 1), 1.85],\n [Date.UTC(1971, 4, 5), 2.22],\n [Date.UTC(1971, 4, 19), 1.15],\n [Date.UTC(1971, 5, 3), 0]\n ]\n }, {\n name: 'Win 2013-2014',\n data: [\n [Date.UTC(1970, 9, 29), 0],\n [Date.UTC(1970, 10, 9), 0.4],\n [Date.UTC(1970, 11, 1), 0.25],\n [Date.UTC(1971, 0, 1), 1.66],\n [Date.UTC(1971, 0, 10), 1.8],\n [Date.UTC(1971, 1, 19), 1.76],\n [Date.UTC(1971, 2, 25), 2.62],\n [Date.UTC(1971, 3, 19), 2.41],\n [Date.UTC(1971, 3, 30), 2.05],\n [Date.UTC(1971, 4, 14), 1.7],\n [Date.UTC(1971, 4, 24), 1.1],\n [Date.UTC(1971, 5, 10), 0]\n ]\n }, {\n name: 'Win 2014-2015',\n data: [\n [Date.UTC(1970, 10, 25), 0],\n [Date.UTC(1970, 11, 6), 0.25],\n [Date.UTC(1970, 11, 20), 1.41],\n [Date.UTC(1970, 11, 25), 1.64],\n [Date.UTC(1971, 0, 4), 1.6],\n [Date.UTC(1971, 0, 17), 2.55],\n [Date.UTC(1971, 0, 24), 2.62],\n [Date.UTC(1971, 1, 4), 2.5],\n [Date.UTC(1971, 1, 14), 2.42],\n [Date.UTC(1971, 2, 6), 2.74],\n [Date.UTC(1971, 2, 14), 2.62],\n [Date.UTC(1971, 2, 24), 2.6],\n [Date.UTC(1971, 3, 2), 2.81],\n [Date.UTC(1971, 3, 12), 2.63],\n [Date.UTC(1971, 3, 28), 2.77],\n [Date.UTC(1971, 4, 5), 2.68],\n [Date.UTC(1971, 4, 10), 2.56],\n [Date.UTC(1971, 4, 15), 2.39],\n [Date.UTC(1971, 4, 20), 2.3],\n [Date.UTC(1971, 5, 5), 2],\n [Date.UTC(1971, 5, 10), 1.85],\n [Date.UTC(1971, 5, 15), 1.49],\n [Date.UTC(1971, 5, 23), 1.08]\n ]\n }];\n \nreturn msg;","outputs":1,"noerr":0,"x":604.5,"y":338,"wires":[["fdd97c80.f3857"]]},{"id":"fc58c6fd.738328","type":"inject","z":"4c9bcdcf.e56994","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":308.1000061035156,"y":349,"wires":[["7f299d5f.74ca54"]]},{"id":"9ca5f562.6cb4d8","type":"ui_group","z":"","name":"Group 1","tab":"87c4bc9f.a9621","order":1,"disp":true,"width":"6","collapse":false},{"id":"87c4bc9f.a9621","type":"ui_tab","name":"Tab 18","icon":"dashboard","order":14}]

Thanks,
Maitreya

0 Likes