How to achieve line chart with x-y axis data from different node

[Kang]

Dear sir
I can see the line chart function in the flow editor, and there is only one data source for Y axis, and the X axis seems to always be the time or points, what if I want to relate the X axis to another data node? How can I achieve this feature.

How can I achieve several line curves at one chart, which means several series for Y values tied with one X axis.

[E1cid]

Have you checked the documentation here Chart ui-chart | Node-RED Dashboard 2.0

[jbudd]

Welcome to the forum @Kang.

Are you using node-red-dashboard ("Dashboard 1") or @flowfuse/node-red-dashboard ("Dashboard 2")?

It might help us to answer if you show us a sketch of the chart you are trying to get, and / or a bit of sample data.

[Kang]

Hi, actually, I am the developer from Rexroth ctrlX platform, and I am using the node-red app from this platform, I am not really sure which version node-red I am using. I can only see the version description from flow editor, which is v3.1.11.

And when I importing the example chart json data from Dashboard 2.0, it is incompatible, so I guess the version I am using is not dashboard 2.0

[jbudd]

It does look like you are working with the original dashboard.

You could confirm this via the "Manage palette" popup.
For example, I have node-red-dashboard v3.6.5

There is documentation for line charts at https://github.com/node-red/node-red-dashboard/blob/master/Charts.md

The current Node-red version is 4.0.9 (it's shown at the bottom of the hamburger menu) so you are rather out of date.

[joepavitt]

Yes, the nodes you have on the left-side palette are the (now deprecated) original Node-RED Dashboard. The flow you have is using a node from FlowFuse Dashboard (ak.a. Node-RED Dashboard 2.0, the official successor)

[Kang]

Hi, Thanks for the example, which can be used in my editor.

And here is my version for node-red-dashboard, it is also 3.6.5.

I have additional quesitons:

1. Can version 3.6.5 support table display? I did not find this feature in my editor.
2. Does the node red provide direct access to database, such as SQLite or MySQL? Or the data from database must be converted into json at first?
3. Another feature I need is to draw free line in the line chart and store the users' drawed line into json data? Is it possible in node-red?
   
   

[jbudd]

@Kang

Can version 3.6.5 support table display?

With the original dashboard, support for tables was provided by a node which you have to install separately, node-red-node-ui-table

@Kang

Does the node red provide direct access to database, such as SQLite or MySQL?

There are nodes available for both SQLite and MySQL.

@Kang

Another feature I need is to draw free line in the line chart and store the users' drawed line into json data? Is it possible in node-red?

I'm not aware of any way to do this in Node-red dashboard (or indeed the new dashboard)

[Steve-Mcl]

@jbudd

@Kang

Another feature I need is to draw free line in the line chart and store the users' drawed line into json data? Is it possible in node-red?

I'm not aware of any way to do this in Node-red dashboard (or indeed the new dashboard)

By "draw free line in the line chart" I guess you mean "present a virtual series like a target line or trend line"?

Just as you prepare and send database data to a chart you can mix in any other series of virtual/computed data you desire.

If you truly want to draw non series type annotations then you need to import a lib like eCharts which has a very rich API and D.I.Y it

There is an example flow on the forum for importing and using eCharts. To manipulate it further, you will need to read the eChart docs and pay with it in their playground. Here is one that renders a custom trend line: Examples - Apache ECharts

Here is a demo of eCharts in dashboard 2.0: How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl

[Kang]

@Steve-Mcl

By "draw free line in the line chart" I guess you mean "present a virtual series like a target line or trend line"?

Just as you prepare and send database data to a chart you can mix in any other series of virtual/computed data you desire.

If you truly want to draw non series type annotations then you need to import a lib like eCharts which has a very rich API and D.I.Y it

There is an example flow on the forum for importing and using eCharts. To manipulate it further, you will need to read the eChart docs and pay with it in their playground. Here is one that renders a custom trend line: Examples - Apache ECharts

Here is a demo of eCharts in dashboard 2.0: How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl

Hi

By draw a free line in chart, I mean the user can use the mouse to click on the chart, the chart can get the first click position(x, y) of the chart, then the user click a second position, the line starts from fisrt position to second position is drawn automatically by flowchart, and the click position can be stored as json data type in my backend.

[Steve-Mcl]

Same thing. You will need to use something more sophisticated like eCharts. Capture click events, draw custom points and send({payload:YOUR_NEW_DATA}) to the serverside (Node-RED) where you can store it or whatever you need to do.

Anything is possible, limited only by imagination and skill But, I am unaware of anything out of the box with this kind of functionality. Have a hunt around the forum, you might get lucky.