I am trying to create a graph with 3 y axis using the ui-template of flowfuse but I have problems setting the data points.
Here is the logic:
[
{
"id": "92fb440a9871ab5d",
"type": "catch",
"z": "1c6c6bc511cd2d54",
"name": "",
"scope": null,
"uncaught": false,
"x": 760,
"y": 300,
"wires": [
[
"0783d5e36455cc58"
]
]
},
{
"id": "0783d5e36455cc58",
"type": "debug",
"z": "1c6c6bc511cd2d54",
"name": "debug 3",
"active": false,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 940,
"y": 300,
"wires": []
},
{
"id": "9e5f9bdc599c2bfa",
"type": "complete",
"z": "1c6c6bc511cd2d54",
"name": "",
"scope": [
"8dccb30859665dd9"
],
"uncaught": false,
"x": 770,
"y": 360,
"wires": [
[
"7cf07454f7ab4928"
]
]
},
{
"id": "7cf07454f7ab4928",
"type": "debug",
"z": "1c6c6bc511cd2d54",
"name": "debug 5",
"active": false,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 940,
"y": 360,
"wires": []
},
{
"id": "13466bf49075c9dd",
"type": "ui-template",
"z": "1c6c6bc511cd2d54",
"group": "459ee3e2b7fa9235",
"page": "",
"ui": "",
"name": "Klimawerte",
"order": 1,
"width": "5",
"height": "4",
"head": "",
"format": "<template>\n <canvas ref=\"chart\" />\n</template>\n\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<script>\n export default {\n mounted() {\n // register a listener for incoming data\n this.$socket.on('msg-input:' + this.id, this.onInput)\n\n // code here when the component is first loaded\n let interval = setInterval(() => {\n if (window.Chart) {\n // Babylon.js is loaded, so we can now use it\n clearInterval(interval);\n this.draw()\n }\n }, 100);\n },\n methods: {\n onInput (msg) {\n // add a new data point ot our existing dataset\n // add time labels as array\n // add 3 series data as array\n //Array1.splice(0, Array1.length, ...Array2);\n this.chart.data.datasets[0].data.length = 0\n this.chart.data.datasets[0].data.push(msg.payload.CO2_series)\n this.chart.data.datasets[1].data.length = 0\n this.chart.data.datasets[1].data.push(msg.payload.Temp_series)\n this.chart.data.datasets[2].data.length = 0\n this.chart.data.datasets[2].data.push(msg.payload.RH_series)\n this.chart.data.labels.length = 0;\n this.chart.data.labels.push(msg.payload.TimeLabels)\n // ensure the chart re-renders\n this.chart.update()\n },\n draw () {\n const ctx = this.$refs.chart\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: [1767079800000],\n datasets: [\n {\n label: 'CO2',\n borderColor: 'red',\n data: [500],\n yAxisID: 'y',\n pointStyle: false,\n },\n {\n label: 'Temperature',\n borderColor: '#7CBB00',\n data: [20],\n yAxisID: 'y1',\n pointStyle: false,\n },\n {\n label: 'RH',\n borderColor: '#2800bbff',\n backgroundColor: '#2800bbff',\n data: [80],\n yAxisID: 'y2',\n pointStyle: false,\n },\n ],\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n stacked: false,\n title: {\n display: true,\n },\n scales: {\n x: {\n title:{\n display: true,\n text: \"Datum\",\n },\n },\n y: {\n title: {\n display: true,\n text: 'CO2 (ppm)',\n color: '#f87979',\n },\n position: 'left',\n max: 2000,\n min: 0,\n ticks: {\n stepSize: 500,\n fontColor: 'red',\n color: '#f87979',\n },\n },\n y1: {\n title: {\n display: true,\n text: 'Temperature (°C)',\n color: '#7CBB00',\n },\n position: 'right',\n max: 25,\n min: 15,\n grid: {\n drawOnChartArea: false,\n },\n },\n y2: {\n title: {\n display: true,\n text: 'Relative Humidity (%)',\n color: '#2800bbff',\n },\n position: 'right',\n max: 100,\n min: 30,\n grid: {\n drawOnChartArea: false,\n },\n },\n },\n }\n });\n }\n }\n }\n</script>",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 730,
"y": 220,
"wires": [
[]
]
},
{
"id": "ab7f34a950855549",
"type": "debug",
"z": "1c6c6bc511cd2d54",
"name": "debug 6",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 640,
"y": 400,
"wires": []
},
{
"id": "beeca0f426bc173c",
"type": "function",
"z": "1c6c6bc511cd2d54",
"name": "function 1",
"func": "var obj = {};\nobj.RH_series=[]\nobj.Temp_series=[]\nobj.CO2_series=[] \nobj.TimeLabels=[];\nvar element;\nfor (const [index, el] of msg.payload.entries()) {\n obj.RH_series.push(el.RH);\n obj.CO2_series.push(el.CO2);\n obj.Temp_series.push(el.Temp);\n obj.TimeLabels.push(new Date(el._time).getTime())\n if ( index === 5 ) break;\n}\n// temp.push(element.temp);\n// ppm.push(element.ppm)\n //labels.push(new Date(element._time).getTime())\n\nmsg.payload = obj;\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 500,
"y": 280,
"wires": [
[
"ab7f34a950855549",
"13466bf49075c9dd"
]
]
},
{
"id": "459ee3e2b7fa9235",
"type": "ui-group",
"name": "Gruppe 1",
"page": "b1366025f77b8dd4",
"width": 6,
"height": 1,
"order": 1,
"showTitle": true,
"className": "",
"visible": true,
"disabled": false,
"groupType": "default"
},
{
"id": "b1366025f77b8dd4",
"type": "ui-page",
"name": "Seite 1",
"ui": "6a50f35f2ffe099b",
"path": "/page1",
"icon": "home",
"layout": "grid",
"theme": "dfda5a006f3f7e59",
"breakpoints": [
{
"name": "Default",
"px": 0,
"cols": 3
},
{
"name": "Tablet",
"px": 576,
"cols": 6
},
{
"name": "Small Desktop",
"px": 768,
"cols": 9
},
{
"name": "Desktop",
"px": 1024,
"cols": 12
}
],
"order": 1,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "6a50f35f2ffe099b",
"type": "ui-base",
"name": "Mein Dashboard",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "default",
"titleBarStyle": "default",
"showReconnectNotification": true,
"notificationDisplayTime": 1,
"showDisconnectNotification": true,
"allowInstall": false
},
{
"id": "dfda5a006f3f7e59",
"type": "ui-theme",
"name": "Standardthema",
"colors": {
"surface": "#ffffff",
"primary": "#0094CE",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
},
{
"id": "3fb11335f58241f8",
"type": "global-config",
"env": [],
"modules": {
"@flowfuse/node-red-dashboard": "1.30.0"
}
}
]
My object that is coming in looks like this:
So each of the 3 axis has a number array with values.
I assign the values in the ui-template like so:
But what i get is only the chart without any lines.
The one point that is showing is hardcoded in the chart.config and should be replaced by the new incoming data.
Apart from that, as soon as I set the xAxis to "type = 'time'" nothing is displayed any more. I know that in vue I have to import a date adapter for the time series to work, but I assume that this is already imported in node red dashboard?
Any help much appreciated!
