[Announce] Dashboard version 2.27.0

Dashboard
1

Hi,

a couple of enhancements and fixes. One to allow a chain of multiple middleware, and one to allow polar are chart to choose nicer colours.

And an apology / fix for the button text colour that I broker last time round by an over-enthusiastic application of a simple idea... :slight_smile: reverted to as it was .

Enhancements

  • Let user configured middleware be an array. PR #664
  • Let polar area chart have different colours per series item. PR #662

Fixes

  • Fix dropdown pre-select of multiple options
  • Fix button text colour - dumb mistake. Issue #670
4 Likes
2

Is there any plan to add zoom in/out option in the line chart in the near future? :grin:
IMHO, this feature will make the line chart super nice :sweat_smile:

3

No plans, but a pull request to add it would be nice.

4

I am not an expert on chart, OW I would love to work on it :sweat_smile:

5

The zoom feature is not something the chart library has by nature. It is basically choice of the user about the limits of data input. To provide zoom like feature it goes one level up. Let's say chart with controls. And that will be whole new widget.

Much more advanced solutions are provided for example with plotly charts. Free to use and very well documented.

I see the basic chart should stay as simple as possible and advanced cases are something which for sure take some knowledge to gain or to have.

6

Sorry . I have updated the last version already but It is still not working.I use msg.ui_control.icon
to change the color of icon

7

Oh! It is a new update with color. I can do It now

8

The problem is that although there are other charts offering zoom/in out solutions, they need lots of extra coding effort. Integrating those features takes tremendous efforts for newbies like me :sweat_smile: For example, I tried chartjs and quickly realize that I need to add extra plug in for zoom in/out. Also, when I used previous flow examples of Chartjs(which was posted 4 years ago and obviously outdated), it made Node Red freeze whenever I made changes. So I had to re-install Node Red to fix it.

So far the major feature missing in the line chart of dashboard is the zoom in/out function. This will make the chart complete and a powerful tool.

9

That may sound simple, but it isn't. When you zoom out then data that is not currently on the chart needs to appear at the start. Where is that data stored in order that it can be displayed?

10

It is pretty hard to make controls for chartjs.
But plotly has it by default.

[{"id":"5e0d9a67.116c84","type":"ui_template","z":"e8af3254.77f7e","group":"","name":"Allow Plotly ","order":17,"width":0,"height":0,"format":"<script src=\"https://cdn.plot.ly/plotly-latest.min.js\"></script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":650,"y":200,"wires":[[]]},{"id":"66e905d7.65d2bc","type":"inject","z":"e8af3254.77f7e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"str","x":350,"y":240,"wires":[["d2dfc384.0bb3b"]]},{"id":"2e5762f6.c687fe","type":"ui_template","z":"e8af3254.77f7e","group":"6aa20356.9b59bc","name":"Chart","order":1,"width":16,"height":"9","format":"<div id=\"plotlychart\" style=\"width:100%\"></div>\n<script>\n\n// Initialize chart\nvar time = new Date();\n\nvar data = [{\n  x: [time],\n  y: [0],\n  mode: 'lines',\n  line: {color: '#80CAF6'}\n}]\nvar layout = {\n    title:'Plotly Chart',\n    width: 838,\n  height: 400,\n    paper_bgcolor:\"#EEEDED\",\n    plot_bgcolor:\"#EEEDED\"\n   \n};\nPlotly.newPlot('plotlychart', data, layout);\n\n// Update data & layout\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n       \n    var time = new Date();\n\n      var update = {\n          x:  [[time]],\n          y: [[msg.payload]]\n      }\n    \n      var olderTime = time.setMinutes(time.getMinutes() - 1);\n      var futureTime = time.setMinutes(time.getMinutes() + 1);\n    \n      var minuteView = {\n            xaxis: {\n              type: 'date',\n              range: [olderTime,futureTime]\n            }\n          };\n    \n      Plotly.relayout('plotlychart', minuteView);\n      Plotly.extendTraces('plotlychart', update, [0])\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":640,"y":240,"wires":[[]]},{"id":"d2dfc384.0bb3b","type":"random","z":"e8af3254.77f7e","name":"","low":1,"high":10,"inte":"true","property":"payload","x":500,"y":240,"wires":[["2e5762f6.c687fe"]]},{"id":"6aa20356.9b59bc","type":"ui_group","name":"chart","tab":"d5ad8b85.f5ba18","order":1,"disp":true,"width":"16","collapse":false},{"id":"d5ad8b85.f5ba18","type":"ui_tab","name":"Plotly","icon":"dashboard","disabled":false,"hidden":false}]
2 Likes
11

Yes I agree that it is not easy for real-time data when new data comes in constantly.
For static mode (no new data coming in), it should be easier to implement?

For real-time data, a solution is to have the chart enter static mode(not accepting new data) and only zooms in the selected area of the curve.

Once reset to the normal view, then the chart goes back to the real-time mode.

12

Thanks and I will check it out. Your GUI is beautiful BTW.

13

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