How to start with D3.js basic example Line chart

Hello people, how r u?
Maybe u can help me, I was working to draw a basic chart with D3.js, I did many steps but maybe another friend have more experience with this. From this example dashboard tips d3.js . Until now, I have a nodes for build a chart but the result it's not very good, You can see here the images:

In the top is the normal chart with nodeRED chart node, in the bottom is with D3.js (the same data for the two pictures), I need more things in this picture, like this example from D3.js basics:

Important: The data is coming from SQLite (I'm not using csv files) to D3.js in this format, and the code in my D3.js template is there.

I will share my nodes maybe is more useful for other people.
Best regards
D3JSEXAMPLE.json (15.5 KB)

The example uses only the line. To make it also draw x and y axis you'll need to add those commands with all the necessary modifications for them.

See the example of Basic line chart in d3.js and pay attention on commented sections in code like
// Add X axis --> it is a date format
// Add Y axis

Thank u my friend, I have news the 1st example for 1 simple Line works, using data from SQL, the result is here:

the code for this example is here, u can try the data from sql is simulated:

I have questions, for the example two (multiple lines), in D3.js lines, the problem is that the data format maybe is incorrect and the template can't read, the example of the format of the data is and the problem context:

I will share my nodes, maybe can u help me and is useful for another people, thanks a lot!
All is here:
example 1 line and multiple lines d3js nodered.json (100.9 KB)

Best regards

I have news, the example for many lines works now, the solution was only add this dataset1 = {{{payload.chartdata2}}} in the template for multiple line, and maybe you can look this check chart ui

u will see something like this:

I hope can be useful for more people,
Best regards

I'm trying to add more things to the chart line, I saw this example with multiple lines, d3js tooltip cursor many lines. The example look like this:

But when I add to my flow and I deploy the example, something is wrong and the cursor can't move, always is in the same place, my chart is here:


thanks for ur help!
Best regards

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