ECharts: A big thank you and a short question

Dashboard
,
1

Dear all,

First of all, I’d really like to thank you for switching the charts library and introducing ECharts. For the first time in years, I’m able to display multiple temperature curves simultaneously without knocking out my system. I am aware that ECharts is not fully functional at this early stage, however already the present stage is a huge gain for me. So again, thank you so much for this decision and your efforts.

Now my short question: Is it intended in the future to consider dynamic properties where one could influence the appearance by sending a message to the node (similar to the ui-button, e.g. msg.ui_update.lineColor). Background is that I would like to change the color of a line plot depending on a threshold. A simple example: When a value of 25 is exceeded the line should become red, below or equal 25 the line should continue in blue ?

Best regards and greetings from Berlin...

2

Yes, I have started looking at that, I am only doing this in my spare time though, so it won't be tomorrow.

That is a different question. Dynamic control of a data series line colour would change it for the whole line, not for only part of the line. I don't know whether eCharts supports what you are asking for. You should be able to achieve what you want at the moment by using two series of different colours and sending the data to one or the other dependent on the value. Send null values to the other series to leave a gap in that line.

2 Likes
3

For things like line charts, I would normally change the background rather than the line colour. As an example, I think that I posted something about the new weather page I'm working on - though that was an example using Observable Plot rather than eCharts but I think eCharts has the same capability, I've just not got round to trying that yet.

A quick check shows that you can actually do this with a background area (markArea) but you can also use variable line colours using visualMap.

However, this does again illustrate the limitation of relying on nodes for charting and other complex tasks. It is hard to account for all the possibilities. So you may be better off using eCharts manually yourself.

4

Nothing to say but Thank You!

Thanks for the hint. Will try and see

Thanks as well — you just sparked an idea.

5

Did not realize that DB2 switched to Echarts. This will be fantastic and a big game changer.
Will check it out soon.

6

Checked and it worked like a charm. No codes change is needed.
Will migrate more dashboard 1 applications to DB2.

7

db1 linechart design is back! Space is used for data, not for excessive decoration. Linewidth allowing for exact representation of data.
The change is very much appreciated!

Is there a chance to get an option to turn animation on/off?

8

It is mostly off, exactly what animation do you mean?

9

When I switch to a dashboard tab containing chart nodes, the lines build up from left to right, taking some 500 ms to complete. 2 charts on the dashboard tab, each displaying a couple of 100 datapoints.
If I initialize the chart by sending an array containing the same data, lines are displayed immediately.

I played around with eCharts a year ago, and vaguely remember this could be turned on and off. Not a big issue anyway.

10

Are you using the latest version? 1.29.0

11

I have a bar chart which still has animation. eCharts can animate individual series, an attribute I use on one of my ui-template eChart nodes, but it can be turned off completely.

I am using 1.29

12

I can see the issue with line and pie charts, and how to fix it, but I don't see animation on bar charts.

Can you post a simple example that I can use to exhibit the problem with a bar chart please?
What option are you using to turn it off in the template?

13

Hi Colin

This is a short flow, almost the same as the original. In the original data is generated from influx every 1 minute, I have increased that frequency in this flow.

[{"id":"176dfc9a1da375c1","type":"function","z":"506727cd93754bdb","name":"Sonic Sensor 01","func":"const maxTankDepth = 81.5\nconst minOilLevel = 10\n\nif (!Array.isArray(msg.payload)) { \n    return\n\n}\n\nmsg.payload = msg.payload.map((element) => {\n    if (element.value > 0 && element.value !== undefined) {\n        return {...element, ...{value: maxTankDepth - roundToHalf(element.value)}}\n\n    }\n\n})\n\nreturn msg\n\n\n/********************************************************************************************************************** */\n\n    /* \n\t* Summary. \t\tRounds the supplied argument to an integer if the value of the argument is 0 - 3 or 7 - 9\n    *                otherwise rounds to 0.5 of the argument\t\t\n    *\n\t* Description.  Check that the value is a number (either Number or numeric String).\n    *               Get any decimals in the value. \n    *               Round the decimal result to a single decimal place. \n    *               If the result is less than 3 or greater than 7 round the supplied value to the nearest integer.  \n    *               Otherwise reduce the supplied value to an integer and add 0.5. \n    *\n    * @param  {number|string}   value   - Number to convert     Example 12.5647\"\n    *\n    * @return {number} \t\t\t\t- Return converted number\n    *                                 Example 12.5\n    *\n    */\n    function roundToHalf(value) {\n        let converted = parseFloat(value)                              // Make sure we have a number\n        \n        if (!Number.isNaN(converted)) {\n            let decimal = (converted - parseInt(converted, 10))\n\n            decimal = Math.round(decimal * 10)\n\n            if ( (decimal < 3) || (decimal > 7) ) {\n                converted = Math.round(converted)\n\n            } else {\n                converted = (parseInt(converted, 10) + 0.5)\n\n            }\n\n        }\n\n        return converted\n\n    } // End Function roundToHalf()","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1820,"y":2640,"wires":[["8d319bd892306c3e","1d31c4b4261dfda6"]]},{"id":"8d319bd892306c3e","type":"ui-chart","z":"506727cd93754bdb","group":"e1ccc054be6575a6","name":"Oil Tank 01","label":"Tank 01 Oil Depth","order":1,"chartType":"bar","category":"","categoryType":"none","xAxisLabel":"","xAxisProperty":"period","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"cm","yAxisProperty":"value","yAxisPropertyType":"property","ymin":"0","ymax":"80","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":false,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"4","height":"4","className":"","interpolation":"linear","x":2130,"y":2640,"wires":[[]]},{"id":"cf540ae6b82cb313","type":"inject","z":"506727cd93754bdb","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"10","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[{\"period\":\"24 April\",\"value\":51.453125},{\"period\":\"1 May\",\"value\":51.64248704663213},{\"period\":\"8 May\",\"value\":52.53694581280788},{\"period\":\"15 May\",\"value\":53.045685279187815},{\"period\":\"22 May\",\"value\":53.38095238095238},{\"period\":\"29 May\",\"value\":48.91891891891892},{\"period\":\"5 June\",\"value\":18.151832460732983},{\"period\":\"12 June\",\"value\":18.810126582278482},{\"period\":\"19 June\",\"value\":19.632558139534883},{\"period\":\"26 June\",\"value\":20.393805309734514},{\"period\":\"3 July\",\"value\":21.12562814070352},{\"period\":\"10 July\",\"value\":22.176470588235293},{\"period\":\"17 July\",\"value\":23.65},{\"period\":\"24 July\",\"value\":24.401574803149607},{\"period\":\"31 July\",\"value\":25.045045045045047},{\"period\":\"7 August\",\"value\":25.607142857142858},{\"period\":\"14 August\",\"value\":26.147321428571427},{\"period\":\"21 August\",\"value\":26.821428571428573},{\"period\":\"28 August\",\"value\":27.554054054054053},{\"period\":\"4 September\",\"value\":28.274509803921568},{\"period\":\"11 September\",\"value\":29.32867132867133},{\"period\":\"18 September\",\"value\":30.791666666666668},{\"period\":\"25 September\",\"value\":32.45641025641025},{\"period\":\"2 October\",\"value\":34.04347826086956},{\"period\":\"9 October\",\"value\":35.82051282051282},{\"period\":\"16 October\",\"value\":37.11764705882353}]","payloadType":"json","x":1570,"y":2640,"wires":[["176dfc9a1da375c1","889c1109ed40702d"]]},{"id":"1d31c4b4261dfda6","type":"debug","z":"506727cd93754bdb","name":"Sensor \\n Data Out","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":2120,"y":2580,"wires":[]},{"id":"889c1109ed40702d","type":"debug","z":"506727cd93754bdb","name":"Sensor Influx \\n Data In","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":1810,"y":2580,"wires":[]},{"id":"e1ccc054be6575a6","type":"ui-group","name":"eChart Example","page":"3e0fcc77180ac6fa","width":6,"height":1,"order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"3e0fcc77180ac6fa","type":"ui-page","name":"Debug Chart.js","ui":"b810194ea14e3502","path":"/Debug_Chart_Tester","icon":"home","layout":"flex","theme":"5075a7d8e4947586","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":14,"className":"","visible":"true","disabled":"false"},{"id":"b810194ea14e3502","type":"ui-base","name":"Dashboard 2 Examples","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#ffffff","groupBg":"#eeeeee","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}},{"id":"86a7c120be79f847","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]

In my ui-template node I am using this to prevent animation in those series it is not required (one series has animation enabled) This series is part of the eChart option

series: [
	{
		name: 'Temperature',                  			// Used in the the 'tooltip'
		type: 'line',
		symbol: 'none',                     			// Shape of data point on graph
		animation: false,

		data: [],
	
},

And this to prevent animation entirely

option {
   animation: false,
}

Although t is also available for the xAxis & yAxis it does not appear to actually do anything

14

OK, I see the problem. I will get a PR in.

15

I have submitted an issue and will get a PR in shortly.

1 Like
16

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