# How to start with D3.js basic example Line chart

**URL:** <https://discourse.nodered.org/t/how-to-start-with-d3-js-basic-example-line-chart/65907>\
**Category:** General\
**Created:** [2 August 2022 03:48 UTC](https://discourse.nodered.org/t/how-to-start-with-d3-js-basic-example-line-chart/65907 "2022-08-02T03:48:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zupayruna1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zupayruna1/32/65541_2.png) [@Zupayruna1](https://discourse.nodered.org/u/Zupayruna1)\
**Post date:** [2 August 2022 03:48 UTC](https://discourse.nodered.org/t/how-to-start-with-d3-js-basic-example-line-chart/65907/1 "2022-08-02T03:48:11Z")

</div>

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](https://discourse.nodered.org/t/dashboard-tips-value-with-area-chart-using-d3-js/43411) . Until now, I have a nodes for build a chart but the result it's not very good, You can see here the images:

 ![imagen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b23531142ffb01318a62bb5c73c1e4ce004020de.png)

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](https://d3-graph-gallery.com/graph/line_basic.html):  
 ![imagen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/64e3fd754252ef45d6bd6b553289b0900a30c2b0.png)

**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.

 ![imagen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a164ebe2619c81fd4e5afe1a70a0deb1fbbf18d.jpeg)

I will share my nodes maybe is more useful for other people.  
Best regards  
[D3JSEXAMPLE.json](https://discourse.nodered.org/uploads/short-url/3VfHrKgyAq8IkapZt0H1CUlN2vt.json) (15.5 KB)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [2 August 2022 06:16 UTC](https://discourse.nodered.org/t/how-to-start-with-d3-js-basic-example-line-chart/65907/2 "2022-08-02T06:16:56Z")

</div>

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](https://d3-graph-gallery.com/graph/line_basic.html) and pay attention on commented sections in code like  
`// Add X axis --> it is a date format`  
and  
`// Add Y axis`

---

<div class="post-metadata">

**Author:** ![Zupayruna1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zupayruna1/32/65541_2.png) [@Zupayruna1](https://discourse.nodered.org/u/Zupayruna1)\
**Post date:** [4 August 2022 06:22 UTC](https://discourse.nodered.org/t/how-to-start-with-d3-js-basic-example-line-chart/65907/3 "2022-08-04T06:22:07Z")

</div>

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

 ![imagen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/656caf0724cd06000db8ed3a566ec8f5a1ae618e.png)

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

 ![imagen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/a/9a64e0e2e5baf1cadaf5f166a16fb6e8fd3d7105.png)

I have questions, for the example two (multiple lines), in [D3.js lines](https://d3-graph-gallery.com/graph/line_several_group.html), 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:

 ![imagen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/3/0304f40433508cc85efb1a98cae1723ee735f800.png)

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](https://discourse.nodered.org/uploads/short-url/xw73lZSuJvv19wtPX9tkKBAhPaS.json) (100.9 KB)

Best regards

---

<div class="post-metadata">

**Author:** ![Zupayruna1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zupayruna1/32/65541_2.png) [@Zupayruna1](https://discourse.nodered.org/u/Zupayruna1)\
**Post date:** [10 August 2022 02:58 UTC](https://discourse.nodered.org/t/how-to-start-with-d3-js-basic-example-line-chart/65907/4 "2022-08-10T02:58:04Z")

</div>

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](https://discourse.nodered.org/t/fontawesome-icon-with-incorrect-color/16521/6)

u will see something like this:

 ![imagen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/d/8d664d8765dd9f4056aeeda1bfa7c8f8d7ce57b2.png)

I hope can be useful for more people,  
Best regards

---

<div class="post-metadata">

**Author:** ![Zupayruna1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zupayruna1/32/65541_2.png) [@Zupayruna1](https://discourse.nodered.org/u/Zupayruna1)\
**Post date:** [10 August 2022 03:50 UTC](https://discourse.nodered.org/t/how-to-start-with-d3-js-basic-example-line-chart/65907/5 "2022-08-10T03:50:31Z")

</div>

Hello,  
I'm trying to add more things to the chart line, I saw this example with multiple lines, [d3js tooltip cursor many lines](https://stackoverflow.com/questions/43408335/d3-multi-line-with-mouse-over-cursor-for-both-y-and-x-value). The example look like this:

 ![imagen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/c/eccc69acbce75381e6faada66b2c05821024e055.png)

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:

![imagen](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/4/e44848a8ff4febd31782a04d060e9adff24359eb.png)

thanks for ur help!  
Best regards

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [9 October 2022 03:51 UTC](https://discourse.nodered.org/t/how-to-start-with-d3-js-basic-example-line-chart/65907/6 "2022-10-09T03:51:14Z")

</div>

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