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

**URL:** <https://discourse.nodered.org/t/how-to-connect-node-red-to-high-charts-for-generating-reports/2220>\
**Category:** Dashboard\
**Created:** [11 August 2018 06:20 UTC](https://discourse.nodered.org/t/how-to-connect-node-red-to-high-charts-for-generating-reports/2220 "2018-08-11T06:20:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![M-M-Labhe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/m-m-labhe/32/1719_2.png) [@M-M-Labhe](https://discourse.nodered.org/u/M-M-Labhe)\
**Post date:** [11 August 2018 06:20 UTC](https://discourse.nodered.org/t/how-to-connect-node-red-to-high-charts-for-generating-reports/2220/1 "2018-08-11T06:20:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 August 2018 06:33 UTC](https://discourse.nodered.org/t/how-to-connect-node-red-to-high-charts-for-generating-reports/2220/2 "2018-08-11T06:33:47Z")

</div>

> **[Node Red and HighCharts - Scargill's Tech Blog](https://tech.scargill.net/node-red-and-highcharts/)**
>
> 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...

---

<div class="post-metadata">

**Author:** ![M-M-Labhe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/m-m-labhe/32/1719_2.png) [@M-M-Labhe](https://discourse.nodered.org/u/M-M-Labhe)\
**Post date:** [11 August 2018 07:31 UTC](https://discourse.nodered.org/t/how-to-connect-node-red-to-high-charts-for-generating-reports/2220/3 "2018-08-11T07:31:38Z")

</div>

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