Hi folks,
I have been trying to get a multi series chart working in DB 2.0, and I am struggling...
I have looked at the documentation, linked Here and although it helped quite a bit I now have a very annoying issue that I cant work out how to fix...
For context...
I am reading data from Influx, using a dynamic query, with the intention being to allow series values to be selected, along with time range, aggregate period an a scale factor that can be optionally applied once the data is delivered to Node-Red.
As of now I have the code to build the query, but no clever connected, so the query is effectively fixed, removing that as a potential cause of the issue.
So... To the issue
I am sending the chart an array of objects, as per the docs, and have appropriate keys in place, so far as I can tell.
The screenshot is the processed data, well a tiny snippet of it anyway...
With the chart node set to X Axis Time\Scale I see a timescale that is correct but nothing plots, despite the series labels populating...
However if I change the X Axis to Linear, the data plots just fine and the timestamp labels disappear.
What is even more odd is that if I then switch back to the timescale setting, and deploy, the data remains and he timestamps are displayed, right up until the chart is reloaded or new data passed tom it.
FYI, that only works one way around, if the data fails to plot, it cant be 'reveled', like the timestamps, by changing a setting, so it looks like it isn't being received and cashed.
The code snippet is below, but as nothing in it is changing I don't think it will help much...
[
{
"id": "164b0e335568cf73",
"type": "ui-chart",
"z": "f1dfd5fdaa5b6807",
"group": "c50b707a69ef9e81",
"name": "",
"label": "chart",
"order": 3,
"chartType": "line",
"category": "series",
"categoryType": "property",
"xAxisLabel": "",
"xAxisProperty": "timestamp",
"xAxisPropertyType": "property",
"xAxisType": "linear",
"xAxisFormat": "MM-dd HH:mm",
"xAxisFormatType": "custom",
"xmin": "",
"xmax": "",
"yAxisLabel": "",
"yAxisProperty": "value",
"yAxisPropertyType": "property",
"ymin": "-8000",
"ymax": "8000",
"bins": 10,
"action": "replace",
"stackSeries": false,
"pointShape": "line",
"pointRadius": "1",
"showLegend": true,
"removeOlder": "53",
"removeOlderUnit": "604800",
"removeOlderPoints": "1000",
"colors": [
"#0095ff",
"#ff0000",
"#ff7f0e",
"#2ca02c",
"#a347e1",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"textColor": [
"#666666"
],
"textColorDefault": true,
"gridColor": [
"#e5e5e5"
],
"gridColorDefault": true,
"width": 6,
"height": 8,
"className": "",
"interpolation": "bezier",
"x": 1430,
"y": 320,
"wires": [
[]
]
},
{
"id": "968d51e060c3a60a",
"type": "function",
"z": "f1dfd5fdaa5b6807",
"name": "function 2",
"func": "/*\n\nfrom(bucket: \"HydroDB\")\n |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n |> filter(fn: (r) => r[\"_measurement\"] == \"Electrical\" or r[\"_measurement\"] == \"Resource\")\n |> filter(fn: (r) => r[\"_field\"] == \"Grid_Watts\" or r[\"_field\"] == \"Inv_Volts\" or r[\"_field\"] == \"Inv_Watts\" or r[\"_field\"] == \"intake\")\n |> aggregateWindow(every: 10s, fn: mean, createEmpty: false)\n |> yield(name: \"mean\")\n\n*/\n\n/*\nvar MinLen = msg.series.min.length;\nvar MeanLen = msg.series.mean.length;\nvar MaxLen = msg.series.max.length;\n*/\nvar EndTime = (Math.floor(new Date().getTime() / 1000));\nvar StartTime = 60 * 60; // * 24 * 7;\nStartTime = EndTime - StartTime;\nvar AggPeriod = '10s';\nvar strStartTime = StartTime.toString();\nvar strEndtTime = EndTime.toString();\n\n/*\nif(MinLen + MeanLen + MaxLen == 0){\n msg.payload = {};\n return msg;\n}\n*/\n\nvar Q1 = 'from(bucket: \"HydroDB\") ';\nQ1 = Q1 + '|> range(start: ' + strStartTime + ', stop: ' + strEndtTime + ') ';\nQ1 = Q1 + '|> filter(fn: (r) => r[\"_measurement\"] == \"Electrical\" or r[\"_measurement\"] == \"Resource\") ';\nQ1 = Q1 + '|> filter(fn: (r) => r[\"_field\"] == \"'\n\n\nvar Q2 = 'Grid_Watts\" or r[\"_field\"] == \"Inv_Volts\" or r[\"_field\"] == \"Inv_Watts\" or r[\"_field\"] == \"intake\") '\n\n\nvar Q3 = '|> aggregateWindow(every: ' + AggPeriod + ', fn: mean, createEmpty: false) ';\nQ3 = Q3 + '|> yield(name: \"Mean\")'\n\nmsg.query = Q1 + Q2 + Q3;\n//msg.topic = [\"Grid_Watts\",\"Inv_Volts\",\"Inv_Watts\",\"intake\"]\nreturn msg;\n\n/*\nvar t2 = (Math.floor(new Date().getTime() / 1000));\n//var t2 = 1740765600;\nvar t1 = t2 - 172800;\nvar st1 = t1.toString();\nvar st2 = t2.toString();\n\nvar q1= 'from(bucket: \"HydroDB\")';\nvar q2 ='|> range(start: ';\nvar q3 ='1740762000';\nvar q4 =', stop: ';\nvar q5 ='1740765600';\nvar q6 =')|> filter(fn: (r) => r[\"_measurement\"] == \"Resource\")';\nvar q7 ='|> filter(fn: (r) => r[\"_field\"] == \"intake\")';\nvar q8 ='|> aggregateWindow(every: 60s, fn: mean, createEmpty: true)';\n\nmsg.query0 = q1 + q2 + q3 + q4 + q5 + q6 + q7 + q8;\nmsg.query = q1 + q2 + st1 + q4 + st2 + q6 + q7 + q8;\nreturn msg;\n*/\n\n\n \n \n ",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1440,
"y": 160,
"wires": [
[
"ed673caa910941fa"
]
]
},
{
"id": "ed673caa910941fa",
"type": "influxdb in",
"z": "f1dfd5fdaa5b6807",
"influxdb": "4772320437ed5849",
"name": "Test Data",
"query": "",
"rawOutput": false,
"precision": "",
"retentionPolicy": "",
"org": "Hydro",
"x": 1440,
"y": 200,
"wires": [
[
"3966f4ebb30eed82"
]
]
},
{
"id": "0d08bc81f2706d01",
"type": "debug",
"z": "f1dfd5fdaa5b6807",
"name": "debug 141",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 1690,
"y": 280,
"wires": []
},
{
"id": "640f246061a32ce1",
"type": "ui-button",
"z": "f1dfd5fdaa5b6807",
"group": "c50b707a69ef9e81",
"name": "",
"label": "Last Hour",
"order": 2,
"width": 0,
"height": 0,
"emulateClick": false,
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"iconPosition": "left",
"payload": "",
"payloadType": "date",
"topic": "01:00",
"topicType": "str",
"buttonColor": "",
"textColor": "",
"iconColor": "",
"enableClick": true,
"enablePointerdown": false,
"pointerdownPayload": "",
"pointerdownPayloadType": "str",
"enablePointerup": false,
"pointerupPayload": "",
"pointerupPayloadType": "str",
"x": 1440,
"y": 80,
"wires": [
[
"69a8e6cce9736606"
]
]
},
{
"id": "69a8e6cce9736606",
"type": "change",
"z": "f1dfd5fdaa5b6807",
"name": "",
"rules": [
{
"t": "set",
"p": "series.min",
"pt": "msg",
"to": "[\"Grid_Waytts\"]",
"tot": "json"
},
{
"t": "set",
"p": "series.mean",
"pt": "msg",
"to": "[\"Grid_Waytts\"]",
"tot": "json"
},
{
"t": "set",
"p": "series.max",
"pt": "msg",
"to": "[\"Grid_Waytts\"]",
"tot": "json"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1460,
"y": 120,
"wires": [
[
"968d51e060c3a60a"
]
]
},
{
"id": "91fd4883faf8f85f",
"type": "function",
"z": "f1dfd5fdaa5b6807",
"name": "function 14",
"func": "var i = 0;\nvar data = [];\n\nwhile (i < msg.payload.length){\n data.push({\n \"series\": msg.payload[i]._field + \" (\" + msg.payload[i].result + \")\",\n timestamp: (Math.floor(new Date(msg.payload[i]._time).getTime() / 1000)), //.toLocaleString(),\n \"value\": Math.round(msg.payload[i]._value)\n })\n i++;\n}\nmsg.payload = data;\nreturn msg;\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1450,
"y": 280,
"wires": [
[
"0d08bc81f2706d01",
"164b0e335568cf73"
]
]
},
{
"id": "3966f4ebb30eed82",
"type": "change",
"z": "f1dfd5fdaa5b6807",
"name": "",
"rules": [
{
"t": "delete",
"p": "query",
"pt": "msg"
},
{
"t": "delete",
"p": "series",
"pt": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1460,
"y": 240,
"wires": [
[
"91fd4883faf8f85f"
]
]
},
{
"id": "c50b707a69ef9e81",
"type": "ui-group",
"name": "Template test",
"page": "eb006b1c548a7bbd",
"width": "6",
"height": "1",
"order": 2,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "4772320437ed5849",
"type": "influxdb",
"hostname": "127.0.0.1",
"port": "8086",
"protocol": "http",
"database": "HydroDB",
"name": "Maelogen-HydroDB",
"usetls": false,
"tls": "",
"influxdbVersion": "2.0",
"url": "http://localhost:8086",
"timeout": "10",
"rejectUnauthorized": false
},
{
"id": "eb006b1c548a7bbd",
"type": "ui-page",
"name": "Controls",
"ui": "b4b795d903e635e9",
"path": "/page5",
"icon": "home",
"layout": "grid",
"theme": "42d980984d7dba34",
"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": 5,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "b4b795d903e635e9",
"type": "ui-base",
"name": "Temp Dashboard",
"path": "/dashboard",
"appIcon": "",
"includeClientData": false,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": true,
"headerContent": "page",
"navigationStyle": "default",
"titleBarStyle": "default",
"showReconnectNotification": false,
"notificationDisplayTime": "5",
"showDisconnectNotification": false
},
{
"id": "42d980984d7dba34",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094CE",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
Ignore the comments in the query builder section, that will just be used to control the building of the query... As you can see it is fixed right now.
I am probably just missing something silly but I am pulling my hair out trying to figure out what!
Any help suggestions would be much appreciated.
I have attached a short data set, just in case anyone wants to play!
Data.txt (15.6 KB)
It is just a copy of the debug node output, so exactly what the chart is getting!
Cheers,
Al
