Mixed Charts in chartjs - showing more than 2 data series

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.

This should get you close....

image

Flow...

[{"id":"5eae0de8.c2547c","type":"function","z":"af952aeaa20f4f97","name":"Create Chart Arrays","func":"const data = msg.payload;\nconst dataLength = data.length;\n\nconst home=[]\nconst grid=[]\nconst solar=[]\nconst battery=[]\nconst labels = []\n\nfor (var i = 0; i < dataLength; i++) {\n    const localDt = new Date(data[i].created)\n    labels[i] = localDt.toLocaleString()\n    home[i] = {\n        x: data[i].created,\n        y: data[i].home\n    }\n    grid[i] = data[i].grid\n    solar[i] = data[i].solar\n    battery[i] = data[i].battery\n}\n\nmsg.payload = {\n    labels: JSON.stringify(labels),\n    home: JSON.stringify(home),\n    grid: JSON.stringify(grid),\n    solar: JSON.stringify(solar),\n    battery: JSON.stringify(battery),\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":510,"y":980,"wires":[["8654012a.dfffb"]]},{"id":"8654012a.dfffb","type":"template","z":"af952aeaa20f4f97","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');\nvar linecolors = ['#009900','#ffa500','#aaff00','#00ffaa']\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        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                type:'bar',\n                label: 'Grid',                \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              type:'bar',\n                label: 'Solar',                \n                backgroundColor: linecolors[2],\n                borderColor: linecolors[2],\n                data: {{{payload.solar}}},\n                yAxisID: 'right-y-axis',\n                barPercentage: 0.5,\n                barThickness: 2,\n                maxBarThickness: 2,\n                minBarLength: 2,\n            }, {\n                type:'bar',\n                label: 'Battery',                \n                backgroundColor: linecolors[3],\n                borderColor: linecolors[3],\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 :{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                    gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                    id: 'right-y-axis',\n                    type: 'linear',\n                    position: 'right',\n                    ticks: {\n                        fontColor:textcolor\n                    }\n                }\n            ],\n            xAxes: [\n                {\n                    gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                    ticks: {\n                        fontColor:textcolor\n                    }\n                }\n            ]\n        }\n    }\n});\n</script>\n","output":"str","x":700,"y":980,"wires":[["f9934ae3.096548"]]},{"id":"f9934ae3.096548","type":"ui_template","z":"af952aeaa20f4f97","group":"d12c839.d7254","name":"Line Chart Solar","order":1,"width":"26","height":"20","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":880,"y":980,"wires":[[]]},{"id":"42e24046.96964","type":"inject","z":"af952aeaa20f4f97","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":320,"y":980,"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}]

Output...

2 Likes

Thank you!!! That is exactly what I was trying to do. In comparing what I was doing (not working) vs what you did (working), I guess I was missing some commas in the dataset section or was it something else?

There was a bit more to it than that. Look closer. You didn't specify the right y axis.

Also, the change node was overcomplicating things so I simplified the function node and removed the change node.

Lastly I added the extra line colours in the template.

2 Likes

Thank you for all your help. This is what it looks like now - could not have done it without your help
:pray:t3:

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.