Hi - I'm attempting to plot 4 datasets (3 bar, 1 line) using chartjs and the sample code from @hotNipi in this topic
https://discourse.nodered.org/t/chart-options-mixed-charts-and-bars-and-multi-axes/25814/6.
I can get one bar chart and one line chart to display, but when I enable the other series, the chart stops working.
Below is the sample flow with the data. NOTE: In the "template" node, the mapping for the other data series (solar and battery) has been commented out.
[{"id":"5eae0de8.c2547c","type":"function","z":"506d369f.7aad98","name":"Create Chart Arrays","func":"var arrayLength = msg.payload.length;\n\n\nvar home=[]\nvar grid=[]\nvar solar=[]\nvar battery=[]\nvar labels = []\nvar localDt =new Date()\n\n\nfor (var i = 0; i < arrayLength; i++) \n{\n home[i] = {\n x: msg.payload[i].created,\n y: msg.payload[i].home\n }\n \n grid[i] = msg.payload[i].grid\n /* { x: msg.payload[i].created,\n y: msg.payload[i].grid\n }*/\n \n solar[i] = msg.payload[i].solar\n /*{\n x: msg.payload[i].epochTime,\n y: msg.payload[i].solar\n }*/\n \n battery[i] = msg.payload[i].battery\n /*{\n x: msg.payload[i].epochTime,\n y: msg.payload[i].battery\n }\n */\n \n localDt = msg.payload[i].created\n labels[i] = localDt.toLocaleString()\n /* { x: msg.payload[i].created,\n y: msg.payload[i].grid\n }*/\n}\n\ndelete msg.payload;\n\nmsg.home = JSON.stringify(home);\nmsg.grid = JSON.stringify(grid);\nmsg.labels = JSON.stringify(labels);\nmsg.solar = JSON.stringify(solar);\nmsg.battery = JSON.stringify(battery);\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":582.6665649414062,"y":2798.0003662109375,"wires":[["48dff044.4e20f8"]]},{"id":"48dff044.4e20f8","type":"change","z":"506d369f.7aad98","name":"Set Data","rules":[{"t":"set","p":"payload.labels","pt":"msg","to":"labels","tot":"msg"},{"t":"set","p":"payload.home","pt":"msg","to":"home","tot":"msg"},{"t":"set","p":"payload.grid","pt":"msg","to":"grid","tot":"msg"},{"t":"set","p":"payload.solar","pt":"msg","to":"solar","tot":"msg"},{"t":"set","p":"payload.battery","pt":"msg","to":"battery","tot":"msg"},{"t":"delete","p":"labels","pt":"msg"},{"t":"delete","p":"home","pt":"msg"},{"t":"delete","p":"grid","pt":"msg"},{"t":"delete","p":"solar","pt":"msg"},{"t":"delete","p":"battery","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":774.3333129882812,"y":2796.666748046875,"wires":[["8654012a.dfffb"]]},{"id":"8654012a.dfffb","type":"template","z":"506d369f.7aad98","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart2\" width=600 height =300></canvas>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\n//var linecolors = ['#009900','#889900']\nvar linecolors = ['#009900','#ffa500']\n\nvar ctx = document.getElementById('myChart2').getContext('2d');\nvar chart = new Chart(ctx, {\n // The type of chart we want to create\n type: 'bar',\n\n // The data for our dataset\n data: {\n labels: {{{payload.labels}}},\n //labels: '',\n datasets: [\n {\n type:'line',\n label: 'Home',\n backgroundColor: linecolors[0],\n borderColor: linecolors[0],\n data: {{{payload.home}}},\n yAxisID: 'left-y-axis',\n steppedLine: false,\n fill: false,\n borderWidth: 3\n },\n {\n type:'bar',\n label: 'Grid',\n \n backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n data: {{{payload.grid}}},\n yAxisID: 'left-y-axis',\n barPercentage: 0.5,\n barThickness: 2,\n maxBarThickness: 2,\n minBarLength: 2,\n }\n /*{\n type:'bar',\n label: 'Solar',\n \n backgroundColor: linecolors[0],\n borderColor: linecolors[0],\n data: {{{payload.solar}}},\n yAxisID: 'right-y-axis',\n barPercentage: 0.5,\n barThickness: 2,\n maxBarThickness: 2,\n minBarLength: 2,\n }\n {\n type:'bar',\n label: 'Battery',\n \n backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n data: {{{payload.battery}}},\n yAxisID: 'right-y-axis',\n barPercentage: 0.5,\n barThickness: 6,\n maxBarThickness: 8,\n minBarLength: 2,\n }*/\n ]\n },\n\n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\n gridLines :{display:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n fontColor: textcolor\n }\n },\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n fontColor:textcolor\n }\n }\n ],\n xAxes: [\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n //type: 'timeseries',\n ticks: {\n fontColor:textcolor\n }\n }\n ]\n }\n }\n});\n</script>\n","output":"str","x":937.6665954589844,"y":2796.000244140625,"wires":[["f9934ae3.096548"]]},{"id":"f9934ae3.096548","type":"ui_template","z":"506d369f.7aad98","group":"d12c839.d7254","name":"Line Chart Solar","order":1,"width":"26","height":"20","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1139.6665954589844,"y":2795.000244140625,"wires":[[]]},{"id":"42e24046.96964","type":"inject","z":"506d369f.7aad98","name":"Inject data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"home\":622,\"grid\":622,\"solar\":-10,\"battery\":0,\"epochTime\":1641708000000,\"created\":\"2022-01-09T06:00:00.000Z\"},{\"home\":605.25,\"grid\":630,\"solar\":-10,\"battery\":-20,\"epochTime\":1641708300000,\"created\":\"2022-01-09T06:05:00.000Z\"},{\"home\":606.25,\"grid\":619,\"solar\":0,\"battery\":-10,\"epochTime\":1641708600000,\"created\":\"2022-01-09T06:10:00.000Z\"},{\"home\":637.25,\"grid\":630,\"solar\":0,\"battery\":0,\"epochTime\":1641708900000,\"created\":\"2022-01-09T06:15:00.000Z\"},{\"home\":617.25,\"grid\":622,\"solar\":0,\"battery\":-10,\"epochTime\":1641709200000,\"created\":\"2022-01-09T06:20:00.000Z\"},{\"home\":621,\"grid\":619,\"solar\":0,\"battery\":-20,\"epochTime\":1641709500000,\"created\":\"2022-01-09T06:25:00.000Z\"},{\"home\":631,\"grid\":623,\"solar\":-10,\"battery\":30,\"epochTime\":1641709800000,\"created\":\"2022-01-09T06:30:00.000Z\"},{\"home\":630.25,\"grid\":619,\"solar\":0,\"battery\":0,\"epochTime\":1641710100000,\"created\":\"2022-01-09T06:35:00.000Z\"},{\"home\":653.75,\"grid\":679,\"solar\":-10,\"battery\":-10,\"epochTime\":1641710400000,\"created\":\"2022-01-09T06:40:00.000Z\"},{\"home\":657.5,\"grid\":669,\"solar\":-10,\"battery\":0,\"epochTime\":1641710700000,\"created\":\"2022-01-09T06:45:00.000Z\"},{\"home\":720,\"grid\":726,\"solar\":-20,\"battery\":10,\"epochTime\":1641711000000,\"created\":\"2022-01-09T06:50:00.000Z\"},{\"home\":730.25,\"grid\":779,\"solar\":0,\"battery\":-30,\"epochTime\":1641711300000,\"created\":\"2022-01-09T06:55:00.000Z\"},{\"home\":717,\"grid\":733,\"solar\":-20,\"battery\":0,\"epochTime\":1641711600000,\"created\":\"2022-01-09T07:00:00.000Z\"},{\"home\":720.25,\"grid\":743,\"solar\":-10,\"battery\":10,\"epochTime\":1641711900000,\"created\":\"2022-01-09T07:05:00.000Z\"},{\"home\":750.25,\"grid\":741,\"solar\":0,\"battery\":-10,\"epochTime\":1641712200000,\"created\":\"2022-01-09T07:10:00.000Z\"},{\"home\":719.5,\"grid\":728,\"solar\":-10,\"battery\":-20,\"epochTime\":1641712500000,\"created\":\"2022-01-09T07:15:00.000Z\"},{\"home\":731.25,\"grid\":730,\"solar\":-10,\"battery\":-10,\"epochTime\":1641712800000,\"created\":\"2022-01-09T07:20:00.000Z\"},{\"home\":688.25,\"grid\":712,\"solar\":-20,\"battery\":-20,\"epochTime\":1641713100000,\"created\":\"2022-01-09T07:25:00.000Z\"},{\"home\":718.5,\"grid\":726,\"solar\":-10,\"battery\":-30,\"epochTime\":1641713400000,\"created\":\"2022-01-09T07:30:00.000Z\"},{\"home\":699,\"grid\":715,\"solar\":-20,\"battery\":0,\"epochTime\":1641713700000,\"created\":\"2022-01-09T07:35:00.000Z\"}]","payloadType":"json","x":359.3333435058594,"y":2795,"wires":[["5eae0de8.c2547c"]]},{"id":"d12c839.d7254","type":"ui_group","name":"Chart","tab":"2ecb90e3.af7a5","order":3,"disp":true,"width":"26","collapse":false},{"id":"2ecb90e3.af7a5","type":"ui_tab","name":"Solar","icon":"fa-sun-o","order":1,"disabled":false,"hidden":false}]
Any help or guidance would be appreciated. Thanks.
