Im looking to display multiple y axis on a chart with the chart in node-red:
topic: 1
Ymin and Ymax (0-10)
topic: 2
Ymin and Ymax (0-1000)
Thank you for your help.
Sorry - not currently possible with the chart node.
you could of course use the range node to scale one of the inputs to match the other.
Otherwise you need to use a ui_template node and your own charting library etc…
Thank you for your response, i'm looking to that with "hightchart" for example in javascript but i don't know how i can to refresh just the chart hightchart in the page, I have to refresh my page to load new data in the chart.
Code javascript et node-red :
[{"id":"89d2b465.193578","type":"ui_template","z":"abf75faf.69e94","group":"9cf8c98a.61b208","name":"myhead","order":0,"width":"12","height":"12","format":"<script src=\"//code.jquery.com/jquery-1.11.3.min.js\"></script>\n<script src=\"https://code.highcharts.com/highcharts.js\"></script>\n<script src=\"https://code.highcharts.com/modules/exporting.js\"></script>\n<script src=\"https://code.highcharts.com/modules/export-data.js\"></script>\n<div id=\"container\" style=\"min-width: 800px; height: 900px; margin: 0 auto\"></div>\n\n<style>\n#container {\n\tmin-width: 400px;\n\tmax-width: 800px;\n\theight: 400px;\n\tmargin: 0 auto\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":880,"y":260,"wires":[["ae6277b1.bd1ea8"]]},{"id":"ae6277b1.bd1ea8","type":"ui_template","z":"abf75faf.69e94","group":"9cf8c98a.61b208","name":"Javascript hightchart","order":0,"width":"15","height":"10","format":"<div id=\"container\"></div>\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 \nHighcharts.chart('container', {\n chart: {\n\n backgroundColor: '#',\n type: 'column'\n },\n title: {\n text: 'Bancs'\n },\n xAxis: {\n categories: a[0]\n },\n yAxis: {\n min: 0,\n title: {\n text: ''\n },\n stackLabels: {\n enabled: true,\n style: {\n fontWeight: 'arial',\n color: (Highcharts.theme && Highcharts.theme.textColor) || 'white'\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: a[1]\n }, {\n name: 'BANC2',\n data: a[2]\n }, {\n name: 'BANC3',\n data: a[3]\n },\n {\n name: 'BANC4',\n data: a[4]\n }]\n}\n);\n }, 500);\n })(scope);\n})\n\n();\n\n\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1060,"y":260,"wires":[[]]},{"id":"ad6dfd4.dbb87","type":"mysql","z":"abf75faf.69e94","mydb":"697538d2.6cce68","name":"serveuremc","x":450,"y":400,"wires":[["b1718436.1fe018","78bf820a.50b3dc"]]},{"id":"d27c1bfa.c40aa8","type":"ui_form","z":"abf75faf.69e94","name":"","label":"","group":"9cf8c98a.61b208","order":2,"width":0,"height":0,"options":[{"label":"DĂ©part : 1993-08-26","value":"ddepart","type":"text","required":true},{"label":"Fin : 1993-08-28","value":"dfin","type":"text","required":true}],"formValue":{"ddepart":"","dfin":""},"payload":"","topic":"","x":110,"y":400,"wires":[["d16abce3.a04d3"]]},{"id":"d16abce3.a04d3","type":"function","z":"abf75faf.69e94","name":"TIMESTAP","func":"\nmsg.topic = \"SELECT * FROM stackedchart WHERE timestamp BETWEEN DATE_FORMAT('\"+msg.payload.ddepart+\"','%Y-%m-%d') AND DATE_FORMAT('\"+msg.payload.dfin+\"','%Y-%m-%d')\";\nreturn msg;\n\n","outputs":1,"noerr":0,"x":270,"y":400,"wires":[["ad6dfd4.dbb87"]]},{"id":"b1718436.1fe018","type":"function","z":"abf75faf.69e94","name":"serveuremc","func":"var databanc1=[];\nvar databanc2=[];\nvar databanc3=[];\nvar databanc4=[];\nvar databanc5=[];\nvar date=[];\nvar data={};\n//for (var i = 0; i==msg.payload.length; i++) {\n//var tbl = [ msg.payload[i].banc1, msg.payload[i].banc2 , msg.payload[i].banc3 , msg.payload[i].banc4 , msg.payload[i].banc5 ];\n//var msg = {payload : [ msg.payload[1].banc1, msg.payload[1].banc2 , msg.payload[1].banc3 , msg.payload[1].banc4 , msg.payload[1].banc5 ]};\n\n//msg2[0] = msg.payload[0].banc1;\n//msg2[1] = msg.payload[1].banc1;\n//msg2[2] = msg.payload[2].banc1;\n//msg2[3] = msg.payload[3].banc1;\nfor (var i = 0 ; i< msg.payload.length; i++) {\n date[i]=msg.payload[i].timestamp;\n databanc1[i] = msg.payload[i].banc1;\n databanc2[i] = msg.payload[i].banc2;\n databanc3[i] = msg.payload[i].banc3;\n databanc4[i] = msg.payload[i].banc4;\n databanc5[i] = msg.payload[i].banc5;\n}\n\ndata.payload = [date, databanc1, databanc2, databanc3, databanc4, databanc5 ];\nreturn data;","outputs":1,"noerr":0,"x":690,"y":260,"wires":[["2b3009ab.eba6d6","89d2b465.193578"]]},{"id":"9cf8c98a.61b208","type":"ui_group","z":"","name":"Default","tab":"67698669.0c3458","disp":true,"width":"18","collapse":false},{"id":"697538d2.6cce68","type":"MySQLdatabase","z":"","host":"192.168.5.247","port":"3306","db":"emcdb","tz":""},{"id":"67698669.0c3458","type":"ui_tab","z":"abf75faf.69e94","name":"Tab 3","icon":"dashboard","order":3}]
Thank you
Still not possible to have multiple Y-axes?
1 Like
No. Not until someone writes the code.
1 Like
