# Possible to create a two-variable (X-Y) chart?

**URL:** <https://discourse.nodered.org/t/possible-to-create-a-two-variable-x-y-chart/28474>\
**Category:** Dashboard\
**Created:** [17 June 2020 12:29 UTC](https://discourse.nodered.org/t/possible-to-create-a-two-variable-x-y-chart/28474 "2020-06-17T12:29:32Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![e-Duardo](https://avatars.discourse-cdn.com/v4/letter/e/96bed5/32.png) [@e-Duardo](https://discourse.nodered.org/u/e-Duardo)\
**Post date:** [17 June 2020 12:29 UTC](https://discourse.nodered.org/t/possible-to-create-a-two-variable-x-y-chart/28474/1 "2020-06-17T12:29:32Z")

</div>

As far as I know (I am very newby in Node-Red), the dashboard node corresponding to "Chart" allows us to represent a variable (Y-axis) versus time (X-axis), besides to bar or pie charts.

I would like to represent a complex value (polar coordinates, which could be converted to cartesian) on a chart. The chart should be refresed any time that the coordinates of the point changes (onece per second or so)  
Is there any way to do that?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [17 June 2020 13:18 UTC](https://discourse.nodered.org/t/possible-to-create-a-two-variable-x-y-chart/28474/2 "2020-06-17T13:18:12Z")

</div>

Not sure if this will help, but take a look at this example flow [https://flows.nodered.org/flow/d1b9f2c606e536ce4a3960abcd887754](https://flows.nodered.org/flow/d1b9f2c606e536ce4a3960abcd887754)  
which may give you a basis for what you want to do.

---

<div class="post-metadata">

**Author:** ![e-Duardo](https://avatars.discourse-cdn.com/v4/letter/e/96bed5/32.png) [@e-Duardo](https://discourse.nodered.org/u/e-Duardo)\
**Post date:** [18 June 2020 10:07 UTC](https://discourse.nodered.org/t/possible-to-create-a-two-variable-x-y-chart/28474/3 "2020-06-18T10:07:36Z")

</div>

Thanks so much!  
I think that it may be useful.  
I would like to learn more about programming in nodejs (and more in particular, writting my own templates or functions in node-red).  
Could you recommend any documentation or well structured tutorial to start from scratch?

Other thing that I would like to do with the aforementioned chart is to superimpose a image on it (I want to represent a point on a Smith-chart)...

---

<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:** [18 June 2020 11:35 UTC](https://discourse.nodered.org/t/possible-to-create-a-two-variable-x-y-chart/28474/4 "2020-06-18T11:35:44Z")

</div>

There is not much well made tutorials for making chart with node-red dashboard. Dashboard includes [https://jtblin.github.io/angular-chart.js/](https://jtblin.github.io/angular-chart.js/) library, (used in dashboard node and can be used also with ui\_template node without need any external library) which is good for simple stuff, but not all cool chart types supported.  
There is also [https://flows.nodered.org/node/node-red-node-ui-vega](https://flows.nodered.org/node/node-red-node-ui-vega) which I haven't played much but according to documentation should provide much more than default.

How to make use of ui\_template to modify charts there is many examples you can search here. I have been part of discussion in many of such [https://discourse.nodered.org/search?q=%40hotNipi%20chart](https://discourse.nodered.org/search?q=%40hotNipi%20chart) .So you can find useful info from those and may be some simple flows as starting point.

Smith-chart will probably be kind of challenge. 😛

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [18 June 2020 11:48 UTC](https://discourse.nodered.org/t/possible-to-create-a-two-variable-x-y-chart/28474/5 "2020-06-18T11:48:10Z")

</div>

My first attempt would be to explore D3.js or libraries based on D3.

> **[Polar Plot](https://bl.ocks.org/mbostock/4583749)**
>
> Mike Bostock’s Block 4583749

> **[Polar Charts](https://plotly.com/javascript/polar-chart/)**
>
> How to make D3.js-based polar charts in Plotly.js.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [18 June 2020 13:14 UTC](https://discourse.nodered.org/t/possible-to-create-a-two-variable-x-y-chart/28474/6 "2020-06-18T13:14:24Z")

</div>

If you really need Smith charts then there is this commercial library you could probably include via a template - [https://www.syncfusion.com/javascript-ui-controls/js-smith-chart](https://www.syncfusion.com/javascript-ui-controls/js-smith-chart)

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [18 June 2020 16:51 UTC](https://discourse.nodered.org/t/possible-to-create-a-two-variable-x-y-chart/28474/7 "2020-06-18T16:51:53Z")

</div>

> [@dceejay](#):
>
> there is this commercial library you could probably include via a template - [https://www.syncfusion.com/javascript-ui-controls/js-smith-chart](https://www.syncfusion.com/javascript-ui-controls/js-smith-chart)

Ah, syncfusion 🙂 Important caveat here, you might be eligible for a free license, depending on if you do this commercially or not, and if commercially how many developers would work on it/yearly revenue of your company. You can even hand it over to end users and allow the end user to make further modifications depending on how many developers the end user puts on it. I don't remember the exact page where they list this, but if you search around their site you can probably find it. I'm using it in a couple of my Node-RED based interfaces.

---

<div class="post-metadata">

**Author:** ![e-Duardo](https://avatars.discourse-cdn.com/v4/letter/e/96bed5/32.png) [@e-Duardo](https://discourse.nodered.org/u/e-Duardo)\
**Post date:** [26 June 2020 07:23 UTC](https://discourse.nodered.org/t/possible-to-create-a-two-variable-x-y-chart/28474/8 "2020-06-26T07:23:04Z")

</div>

Thanks!  
This seems to be very interesting. Unfortunatelly I can not afford the cost (I am not a developer but I am just learning)

---

<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:** [26 July 2020 07:23 UTC](https://discourse.nodered.org/t/possible-to-create-a-two-variable-x-y-chart/28474/9 "2020-07-26T07:23:06Z")

</div>

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