Unfortunately, I feel the same way. We're having snow chaos here 
But you can actually find everything in the PDF in my first post in this thread.
That is using a UI template. I am interested in whether it can be done using the built in chart node.
The problem with the tooltip seems to be a vue problem. I created a vanilla vue app and used a vanilla example code from the echarts webpage and it also failed to show the tooltip (but only for 'XAxis' not for 'Item'), same as in the ui-template node.
The build in chart from flowfuse does, as far as I understand it, not allow multiple Y-Axis, at least I donĀ“t see where I could configure them in the chart node. There are some hints on the echarts web page that in vue you have to avoid the ref for initializing the chart, but this didnĀ“t make a difference when I tried it.
Yes, i do hope this will be fixed in a future version but as for now i am glad to have the workaround.
I am still not sure what the issue is. I use eCharts in a ui-template node with 2 Y axis and have no problem with tooltip
You can now use msg.ui_builder.chartOptions msg.ui_updates.chartOptions to provide for options not provided in the node's config. See the node help text.
Edit: corrected typo above.
Thanks for pointing this out! I was confused by the help of the ui-chart node because in the beginning they talk about echarts, but in the "custom charts" area they import still the old "chartjs". But you are right it seems that i can set the option object of echarts with a msg object. I will have a try if the tooltip there works!
msg.ui_update.chartOptions. This works well. I like my x axis labels at a 35 degree angle. Simples
Hmm, that is not ideal. These should be reworked, preferably using ui_update.chartOptions where relevant.
I can confirm that I can set multiple y axis and that the tooltip works. But I have a problem that once I send the chart.Option message the chart gets cleard. Also how does the chart assign sequential indexes to the series? Which one is series 0, 1, 2...?
Here is my flow:
[
{
"id": "5215d52243d14908",
"type": "tab",
"label": "Flow 7",
"disabled": false,
"info": "",
"env": []
},
{
"id": "a380bd05bbd478e6",
"type": "inject",
"z": "5215d52243d14908",
"name": "ui_update",
"props": [
{
"p": "ui_update.chartOptions",
"v": "{\"yAxis\":[{\"type\":\"value\",\"name\":\"Temperatur\",\"min\":10,\"max\":24,\"splitLine\":{\"show\":true},\"axisLabel\":{\"formatter\":\"{value}Ā°C\"},\"axisLine\":{\"show\":true},\"axisPointer\":{\"snap\":true}},{\"type\":\"value\",\"name\":\"CO2\",\"splitLine\":{\"show\":false},\"nameGap\":15,\"nameMoveOverlap\":true,\"position\":\"right\",\"offset\":45,\"axisLine\":{\"show\":true},\"axisTick\":{\"show\":true},\"min\":400,\"max\":1500},{\"type\":\"value\",\"name\":\"% RH\",\"position\":\"right\",\"splitLine\":{\"show\":false},\"axisLine\":{\"show\":true}}],\"series\":[{\"name\":\"Temperatur\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"yAxisIndex\":0,\"symbolSize\":2,\"tooltip\":{\"valueFormatter\":\"{value} Ā°C\"},\"lineStyle\":{\"width\":1}},{\"name\":\"CO2 (ppm)\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"symbolSize\":2,\"yAxisIndex\":1},{\"name\":\"RH in %\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"symbolSize\":2,\"splitLine\":{\"show\":false,\"lineStyle\":{\"width\":1}},\"yAxisIndex\":2}]}",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 260,
"y": 160,
"wires": [
[
"3550f7e778083a88"
]
],
"info": " chartTitle: 'Met Office Weather 24hr Forecast for',\r\n\r\n // Note that these are the standard for my normal charts. Not used for this chart\r\n yAxisKey: 'value', \t// String value - label, 'y' is the default\r\n xAxisKey: 'period', \t// Number value - data, 'x' is the default\r\n seriesKey: 'attribute', \t// '' is the default (none)\r\n\r\n yAxisLeftMin: -5,\r\n yAxisLeftMax: 30.0,\r\n\r\n yAxisRightMin: 0,\r\n yAxisRightMax: 10.0,\r\n\r\n yAxisLeftTitle: 'Temperature [Ā°C]',\r\n\t\t\t\tyAxisRightTitle: 'Rainfall [mm]',\r\n xAxisTitle: '',"
},
{
"id": "2d2e714030317eee",
"type": "inject",
"z": "5215d52243d14908",
"name": "Klimadaten",
"props": [
{
"p": "payload"
},
{
"p": "payload.title",
"v": "Klimadaten",
"vt": "str"
},
{
"p": "payload.labels",
"v": "[\"07:00\",\"08:00\",\"09:00\",\"10:00\",\"11:00\",\"12:00\",\"13:00\",\"14:00\",\"15:00\",\"16:00\",\"17:00\",\"18:00\"]",
"vt": "json"
},
{
"p": "payload.CO2",
"v": "[8600,8750,7800,8700,9600,6400,5600,4750,5980,6000,5555,5150]",
"vt": "json"
},
{
"p": "payload.RH",
"v": "[70,71,75,80,77,80,85,90,90,89,88,87]",
"vt": "json"
},
{
"p": "payload.Temp",
"v": "[15,15,16,17,19,18,19,17,16.5,16.5,17,20]",
"vt": "json"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "data",
"payload": "{}",
"payloadType": "json",
"x": 260,
"y": 80,
"wires": [
[
"749ab2cc9890203c"
]
]
},
{
"id": "3550f7e778083a88",
"type": "ui-chart",
"z": "5215d52243d14908",
"group": "27cbb588209b066c",
"name": "TestGraph",
"label": "Fruchtungsraum1",
"order": 9007199254740991,
"chartType": "line",
"category": "tag",
"categoryType": "property",
"xAxisLabel": "Zeit",
"xAxisProperty": "label",
"xAxisPropertyType": "property",
"xAxisType": "category",
"xAxisFormat": "",
"xAxisFormatType": "auto",
"xmin": "",
"xmax": "",
"yAxisLabel": "",
"yAxisProperty": "value",
"yAxisPropertyType": "property",
"ymin": "",
"ymax": "",
"bins": 10,
"action": "replace",
"stackSeries": false,
"pointShape": "circle",
"pointRadius": "2",
"showLegend": true,
"removeOlder": 1,
"removeOlderUnit": "3600",
"removeOlderPoints": "",
"colors": [
"#0095ff",
"#ff0000",
"#36b300",
"#2ca02c",
"#a347e1",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"textColor": [
"#666666"
],
"textColorDefault": true,
"gridColor": [
"#e5e5e5"
],
"gridColorDefault": true,
"width": 6,
"height": 8,
"className": "",
"interpolation": "linear",
"x": 710,
"y": 160,
"wires": [
[]
]
},
{
"id": "749ab2cc9890203c",
"type": "function",
"z": "5215d52243d14908",
"name": "function 3",
"func": "var mydata = []\nfor( var i=0; i<12; i++ ){\n mydata.push({\"label\": msg.payload.labels[i], \"tag\": \"Temp\", value: msg.payload.Temp[i]})\n mydata.push({\"label\": msg.payload.labels[i], \"tag\": \"CO2\", value: msg.payload.CO2[i]})\n mydata.push({\"label\": msg.payload.labels[i], \"tag\": \"RH\", value: msg.payload.RH[i]})\n}\nmsg.payload = mydata;\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 500,
"y": 120,
"wires": [
[
"3550f7e778083a88",
"18d953fbae906c40"
]
]
},
{
"id": "18d953fbae906c40",
"type": "debug",
"z": "5215d52243d14908",
"name": "debug 1",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 720,
"y": 240,
"wires": []
},
{
"id": "27cbb588209b066c",
"type": "ui-group",
"name": "Graph-Control",
"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": 2,
"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": "35ef3321c2bb5fc2",
"type": "global-config",
"env": [],
"modules": {
"@flowfuse/node-red-dashboard": "1.30.0"
}
}
]
It isn't by position in the array, the name property in the series elements is used to match it to the data, so, for your data, then name properties in the series array should be Temp, CO2 and RH. The names in the axis array can be different as they are indexed from the series.
I am not seeing the chart being cleared when the ui_update is fed in, and I am not seeing the tooltip (after ui_update), instead in the browser developer console I am seeing a crash in eCharts.
After further investigation, the crash is being caused by the tooltip format spec in the Temp series
"tooltip": {
"valueFormatter": "{value} Ā°C"
},
If I remove that, and correct the names in the series then it all seems to be working, apart from the fact that the tooltip formatting is missing. I will take a look at that.
The first problem with the tooltip formatting is that it should be
"tooltip": {
"formatter": "{c} Ā°C"
},
See Documentation - Apache ECharts
The second problem is that, as is noted in that link,
Noticeļ¼ series.tooltip only works when tooltip.trigger is 'item'
So to make it work you have to add, at the top level, not in the series
"tooltip": {
"trigger": "item"
},
The tooltip does then work, but because it is set to 'item' you get a tooltip on each individual data point, not across the whole set. So basically eCharts does not support tooltip formating in the axis tooltip mode.
Apart from that it seems to be all working, for me.
Hi Colin, thanks very much for your corrections. I fixed my code according to your suggestions, except for the tooltip trigger, since I actually see the tooltip correctly:
My problem is that all series are aligned to the left y axis and this didnĀ“t change even when I named the series in the option object to the names in the data object!?
It also seems there is some buffering going on. When I deployed the chart the first time, it didnĀ“t have any additional y-axis (since they are defined only in the additional options object). Then I send the option object and the y axis appear all correctly with their min-max value, but the chart is empty. When I now inject the data again, the axis stay, but only the left y-axis (the default) is used.If i remove the chart and deploy it again, it still seems to hold the optional settings from before, since the right y-axises also appear, so I cannot go back to the initial stage.
No you aren't. The
You asked for the temperature to be displayed in the tootip with Ā°C on the end. That is not there. That is the feature that eCharts does not support with the tooltip in axis mode.
Are you sure that you are using the latest version of the dashboard, v1.30.1?
If you are can you export just the two inject nodes so that I can try exactly what you are now doing plese.
Ok. I was on 1.30.0 and updated to 1.30.1.
- After the update+restart, the chart did not show the additional axis anymore.
- When I send the data to the chart, it showed all three lines, yet all connected to the left, default yAxis. Tooltip worked cummulativ for all lines
- When I send the option object, the 2 additional axis on the right showed up and this time all lines where mapped correctly! Tooltip worked cummulativ for all lines, yet WITHOUT the formatting
I could live without the formatting, but from now on all changes in the options object are applied cummulative. I tried the formatter which brought an error in the console and no tooltip showed anymore, then i REMOVED the formatter, but the error in the console still shows and complaints some code in the formatter section of echarts. Even if i set the tooltip object to {} I cannot undo my setting.
Is there a way to reset the options to the state that the echart control generates by default?
Here is my options msg node:
[
{
"id": "a380bd05bbd478e6",
"type": "inject",
"z": "5215d52243d14908",
"name": "ui_update",
"props": [
{
"p": "ui_update.chartOptions",
"v": "{\"yAxis\":[{\"type\":\"value\",\"name\":\"Temp\",\"min\":10,\"max\":24,\"splitLine\":{\"show\":true},\"axisLabel\":{},\"axisLine\":{\"show\":true},\"axisPointer\":{\"snap\":true}},{\"type\":\"value\",\"name\":\"CO2\",\"splitLine\":{\"show\":false},\"nameGap\":15,\"nameMoveOverlap\":true,\"position\":\"right\",\"offset\":45,\"axisLine\":{\"show\":true},\"axisTick\":{\"show\":true},\"min\":400,\"max\":1500},{\"type\":\"value\",\"name\":\"RH\",\"position\":\"right\",\"splitLine\":{\"show\":false},\"axisLine\":{\"show\":true}}],\"series\":[{\"name\":\"Temp\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"yAxisIndex\":0,\"symbolSize\":2,\"tooltip\":{},\"lineStyle\":{\"width\":1}},{\"name\":\"CO2\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"symbolSize\":2,\"yAxisIndex\":1},{\"name\":\"RH\",\"type\":\"line\",\"smooth\":true,\"showSymbol\":true,\"symbolSize\":2,\"splitLine\":{\"show\":false,\"lineStyle\":{\"width\":1}},\"yAxisIndex\":2}]}",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 260,
"y": 160,
"wires": [
[
"3550f7e778083a88"
]
],
"info": " chartTitle: 'Met Office Weather 24hr Forecast for',\r\n\r\n // Note that these are the standard for my normal charts. Not used for this chart\r\n yAxisKey: 'value', \t// String value - label, 'y' is the default\r\n xAxisKey: 'period', \t// Number value - data, 'x' is the default\r\n seriesKey: 'attribute', \t// '' is the default (none)\r\n\r\n yAxisLeftMin: -5,\r\n yAxisLeftMax: 30.0,\r\n\r\n yAxisRightMin: 0,\r\n yAxisRightMax: 10.0,\r\n\r\n yAxisLeftTitle: 'Temperature [Ā°C]',\r\n\t\t\t\tyAxisRightTitle: 'Rainfall [mm]',\r\n xAxisTitle: '',"
}
]
Later: there was a hickup with the upgrade. Now I am on 1.30.1 and there is no error anymore when setting the formatter, it is just ignored in series as well as in yAxis. I can live with the current state although I eagerly wait for the formatter being functional in a future version!
Thanks for your help, Colin!
As I explained, that is not something that we can do anything about, eCharts does not support tooltip formatting in axis mode. If they start supporting it then it will work in node red.
So is everything else working correctly now?
Mmmmh, maybe I get something wrong, but I was able to format on their example page:
And in the help I find this:
When trigger is 'axis' , or when tooltip is triggered by axisPointer, params is the data array of multiple series. The content of each item of the array is the same as above.
Am I looking in the wrong place?
That isn't what you have got, that is using the same format for all series, you are trying to format the tooltip differently for each series.
try
valueFormatter: (value) => value + 'Ā°C'
or
valueFormatter: (value) => `${value} Ā°C`
When you look above at my screenshot, i have ONE tooltip object that is linked to the x-axis and shows the value of all 3 series. That is exactly the same in the echarts example. One tooltip and in that tooltip i can format each series as a list.
it doesnĀ“t like the '>': The Symbol '>' cannot be used as an unary operator
