hi.
How i can to use JAVASCRIPT Chart in node-red with dynamic data !!!? (use variables in JS)
Thank you for your help.
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 for any example flows that do something like that.
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
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
