# How to use JS chart and mysql data in node-red?

**URL:** <https://discourse.nodered.org/t/how-to-use-js-chart-and-mysql-data-in-node-red/701>\
**Category:** General\
**Created:** [8 June 2018 16:04 UTC](https://discourse.nodered.org/t/how-to-use-js-chart-and-mysql-data-in-node-red/701 "2018-06-08T16:04:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)\
**Post date:** [8 June 2018 16:04 UTC](https://discourse.nodered.org/t/how-to-use-js-chart-and-mysql-data-in-node-red/701/1 "2018-06-08T16:04:10Z")

</div>

hi.  
How i can to use JAVASCRIPT Chart in node-red with dynamic data !!!? (use variables in JS)  
Thank you for your help.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [8 June 2018 17:04 UTC](https://discourse.nodered.org/t/how-to-use-js-chart-and-mysql-data-in-node-red/701/2 "2018-06-08T17:04:16Z")

</div>

Have you looked at Node-RED Dashboard? That lets you quickly get a chart on a webpage and throw data at it.

I’d recommend you browse [flows.nodered.org](http://flows.nodered.org) for any example flows that do something like that.

---

<div class="post-metadata">

**Author:** ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)\
**Post date:** [11 June 2018 07:32 UTC](https://discourse.nodered.org/t/how-to-use-js-chart-and-mysql-data-in-node-red/701/3 "2018-06-11T07:32:20Z")

</div>

Thank you for your response, but i don’t found an example for Highcharts i have alwase the erreur to generate the code when i run my ui .

Uncaught Error: Highcharts error #16: [www.highcharts.com/errors/16](http://www.highcharts.com/errors/16)  
at Object.a.error (VM4082 highcharts.js:10)  
at VM4082 highcharts.js:9  
at VM4082 highcharts.js:10  
at VM4082 highcharts.js:8  
at VM4082 highcharts.js:8

it my ui :

`[{"id":"d0172514.ff3f48","type":"ui_template","z":"a4ed90e.c803d7","group":"bf1a48d6.287238","name":"myhead","order":0,"width":"12","height":"12","format":"<script src=\"https://code.highcharts.com/highcharts.js\"></script>\n\n<style>\n#container {\n\tmin-width: 310px;\n\tmax-width: 800px;\n\theight: 400px;\n\tmargin: 0 auto\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":560,"y":340,"wires":[["1d95db32.4f5785"]]},{"id":"1d95db32.4f5785","type":"ui_template","z":"a4ed90e.c803d7","group":"bf1a48d6.287238","name":"q bc","order":0,"width":"12","height":"12","format":"<div id=\"container\"></div>\n\n\n<script>\n(function() {\n (function($scope) {\n \n setTimeout(function(){\n var a = $scope.msg.payload; \n console.log($scope)\n console.log($scope.msg)\n \n \nHighcharts.chart('container', {\n chart: {\n type: 'column'\n },\n title: {\n text: 'Bancs'\n },\n xAxis: {\n categories: ['Lundi', 'Mardi', 'Mercredi', 'jeudi', 'vendredi','samedi']\n },\n yAxis: {\n min: 0,\n title: {\n text: 'Total fruit consumption'\n },\n stackLabels: {\n enabled: true,\n style: {\n fontWeight: 'bold',\n color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'\n }\n }\n },\n legend: {\n align: 'right',\n x: -30,\n verticalAlign: 'top',\n y: 25,\n floating: true,\n backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',\n borderColor: '#CCC',\n borderWidth: 1,\n shadow: false\n },\n tooltip: {\n headerFormat: '<b>{point.x}</b><br/>',\n pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'\n },\n plotOptions: {\n column: {\n stacking: 'normal',\n dataLabels: {\n enabled: true,\n color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'\n }\n }\n },\n series: [{\n name: 'BANC1',\n data: [5, 3, 4, 7, 2,10]\n }, {\n name: 'BANC2',\n data: [2, 2, 3, 2,20]\n }, {\n name: 'BANC3',\n data: a\n }]\n});\n\n }, 50);\n\n })(scope);\n})();\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":690,"y":340,"wires":[[]]},{"id":"e7c16251.a495","type":"function","z":"a4ed90e.c803d7","name":"qsdsd","func":"var a= Math.round (Math.random() * 100);\nvar b = Math.round (Math.random() * 50);\nvar c = Math.round (Math.random() * 110);\nvar d = Math.round (Math.random() * 150);\nvar e = Math.round (Math.random() * 90);\nvar f = Math.round (Math.random() * 93);\nvar msg = {payload :[a,b,c,d,e,f]};\nreturn msg;\n","outputs":1,"noerr":0,"x":430,"y":440,"wires":[["d0172514.ff3f48","1dd6d4ab.ce3c9b"]]},{"id":"bf602cf5.a6b52","type":"inject","z":"a4ed90e.c803d7","name":"","topic":"a","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":290,"y":440,"wires":[["e7c16251.a495"]]},{"id":"1dd6d4ab.ce3c9b","type":"debug","z":"a4ed90e.c803d7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":670,"y":440,"wires":[]},{"id":"bf1a48d6.287238","type":"ui_group","z":"","name":"Default","tab":"3283e039.61b18","disp":true,"width":"13","collapse":false},{"id":"3283e039.61b18","type":"ui_tab","z":"a4ed90e.c803d7","name":"Tab 3","icon":"dashboard","order":3}]`

thank you for your help