# Showing several complex values (realpart + i\*imagin part) in a cartesian or an polar coordinate system
**URL:** https://discourse.nodered.org/t/showing-several-complex-values-realpart-i-imagin-part-in-a-cartesian-or-an-polar-coordinate-system/64429
**Category:** Dashboard
**Tags:** chart
**Created:** [27 June 2022 16:37 UTC](https://discourse.nodered.org/t/showing-several-complex-values-realpart-i-imagin-part-in-a-cartesian-or-an-polar-coordinate-system/64429 "2022-06-27T16:37:26Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Tetrastruct](https://discourse.nodered.org/u/Tetrastruct)
#### Post date: [27 June 2022 16:37 UTC](https://discourse.nodered.org/t/showing-several-complex-values-realpart-i-imagin-part-in-a-cartesian-or-an-polar-coordinate-system/64429/1 "2022-06-27T16:37:26Z")
Hello, I am quite new here and i am working with ST32cubeMonitor.
I urgently need a possibility to show several oscillating values in a complex
y over x version. Is there any possibility to make such a module by myself ? and how did this work or are there tools or examples which do such visualisation ?
Thank you for helping.
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [27 June 2022 18:21 UTC](https://discourse.nodered.org/t/showing-several-complex-values-realpart-i-imagin-part-in-a-cartesian-or-an-polar-coordinate-system/64429/2 "2022-06-27T18:21:13Z")
Welcome to the forum @Tetrastruct
Can you show is an example of what you want the display to look like? Also in what format are the complex values in node red?
---
### Author:  [@Tetrastruct](https://discourse.nodered.org/u/Tetrastruct)
#### Post date: [28 June 2022 11:13 UTC](https://discourse.nodered.org/t/showing-several-complex-values-realpart-i-imagin-part-in-a-cartesian-or-an-polar-coordinate-system/64429/3 "2022-06-28T11:13:20Z")
Hello Colin,
Thank you very much for your answer. Maybe you are the one who can help me a little bit and take me
at the hand for some informations. I dived in the monitor program by trail and error and had some success to visualize my STM32F405 datas. The main issue is to show datas y over x, because in the drive control techniques you vhave always to handle with rotating vactors and their position to each other.
Normaly you can also use complex numbers to describe these vectors mathematically. So the visualisation is not only for complex numers also for kartesion vectors or vectors in polar coordinates.
My need is to take always pairs of (x,y) values, isolate them and link them to a block where this datastream is imediately shown as a point in the coordinate system. The coordinate system should stay still without autoscaling, by putting some cornerpoints at the maximum values i.e.
I am trieing to build such a block by the tools in the monitor program, but I have no experiences, ho to direct a isolated variable into a msg.template.
I found an example to show points y over x and modified it, (see the code) but all my tries how to bring the datastream of an isolated variable into this file had no success cause of my low experience.
Could you tell me how I can direct a isolated variable into another program?
The added file works and shows at the dashboard what i imagine. It sould also work for more variable-pairs, lets say max 10 pairs.
Please answer me. Im sitting here in Germany waiting for help to do it by my own.
Bye Bye and thank you
Reinhard
---
### Author:  [@Tetrastruct](https://discourse.nodered.org/u/Tetrastruct)
#### Post date: [28 June 2022 11:23 UTC](https://discourse.nodered.org/t/showing-several-complex-values-realpart-i-imagin-part-in-a-cartesian-or-an-polar-coordinate-system/64429/4 "2022-06-28T11:23:08Z")
```auto
`
This template i created by changing an examle I found and it shows a little bit what i mean.
When I put it this in a template it works- But how can i direct my variables (isolated) to the x, y positions of theis template. This is the my main question.
Thank you
```
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [28 June 2022 11:39 UTC](https://discourse.nodered.org/t/showing-several-complex-values-realpart-i-imagin-part-in-a-cartesian-or-an-polar-coordinate-system/64429/5 "2022-06-28T11:39:49Z")
Have you tried the [node-red-node-ui-vega](https://flows.nodered.org/node/node-red-node-ui-vega) node?
There are several examples that you can import from the Node-RED editor menu:
**Import \> Examples \> node-red-node-ui-vega**
Here is a demo...
Demo flow...
```auto
[{"id":"21e0e3e1.04f72c","type":"ui_vega","z":"459244a5.abbb6c","group":"84147604.b29078","name":"Vega","order":3,"width":"10","height":"9","vega":"","x":390,"y":100,"wires":[]},{"id":"cea3fa34.2ba198","type":"template","z":"459244a5.abbb6c","name":"Tree Data","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"[\n {\n \"id\": 0,\n \"name\": \"@node-red\"\n },\n {\n \"id\": 1,\n \"name\": \"util\",\n \"parent\": 0\n },\n {\n \"id\": 2,\n \"name\": \"lib\",\n \"parent\": 1\n },\n {\n \"id\": 3,\n \"name\": \"nodes\",\n \"parent\": 0\n },\n {\n \"id\": 4,\n \"name\": \"locales\",\n \"parent\": 3\n },\n {\n \"id\": 5,\n \"name\": \"ja\",\n \"parent\": 4\n },\n {\n \"id\": 6,\n \"name\": \"zh-CN\",\n \"parent\": 4\n },\n {\n \"id\": 7,\n \"name\": \"de\",\n \"parent\": 4\n },\n {\n \"id\": 8,\n \"name\": \"ko\",\n \"parent\": 4\n },\n {\n \"id\": 9,\n \"name\": \"en-US\",\n \"parent\": 4\n },\n {\n \"id\": 10,\n \"name\": \"core\",\n \"parent\": 3\n },\n {\n \"id\": 11,\n \"name\": \"parsers\",\n \"parent\": 10\n },\n {\n \"id\": 12,\n \"name\": \"hardware\",\n \"parent\": 10\n },\n {\n \"id\": 13,\n \"name\": \"core\",\n \"parent\": 10\n },\n {\n \"id\": 14,\n \"name\": \"lib\",\n \"parent\": 13\n },\n {\n \"id\": 15,\n \"name\": \"debug\",\n \"parent\": 14\n },\n {\n \"id\": 16,\n \"name\": \"io\",\n \"parent\": 10\n },\n {\n \"id\": 17,\n \"name\": \"lib\",\n \"parent\": 16\n },\n {\n \"id\": 18,\n \"name\": \"logic\",\n \"parent\": 10\n },\n {\n \"id\": 19,\n \"name\": \"storage\",\n \"parent\": 10\n },\n {\n \"id\": 20,\n \"name\": \"icons\",\n \"parent\": 3\n },\n {\n \"id\": 21,\n \"name\": \"editor-api\",\n \"parent\": 0\n },\n {\n \"id\": 22,\n \"name\": \"lib\",\n \"parent\": 21\n },\n {\n \"id\": 23,\n \"name\": \"auth\",\n \"parent\": 22\n },\n {\n \"id\": 24,\n \"name\": \"admin\",\n \"parent\": 22\n },\n {\n \"id\": 25,\n \"name\": \"editor\",\n \"parent\": 22\n },\n {\n \"id\": 26,\n \"name\": \"runtime\",\n \"parent\": 0\n },\n {\n \"id\": 27,\n \"name\": \"locales\",\n \"parent\": 26\n },\n {\n \"id\": 28,\n \"name\": \"ja\",\n \"parent\": 27\n },\n {\n \"id\": 29,\n \"name\": \"de\",\n \"parent\": 27\n },\n {\n \"id\": 30,\n \"name\": \"ko\",\n \"parent\": 27\n },\n {\n \"id\": 31,\n \"name\": \"en-US\",\n \"parent\": 27\n },\n {\n \"id\": 32,\n \"name\": \"lib\",\n \"parent\": 26\n },\n {\n \"id\": 33,\n \"name\": \"nodes\",\n \"parent\": 32\n },\n {\n \"id\": 34,\n \"name\": \"context\",\n \"parent\": 33\n },\n {\n \"id\": 35,\n \"name\": \"flows\",\n \"parent\": 33\n },\n {\n \"id\": 36,\n \"name\": \"library\",\n \"parent\": 32\n },\n {\n \"id\": 37,\n \"name\": \"storage\",\n \"parent\": 32\n },\n {\n \"id\": 38,\n \"name\": \"localfilesystem\",\n \"parent\": 37\n },\n {\n \"id\": 39,\n \"name\": \"projects\",\n \"parent\": 38\n },\n {\n \"id\": 40,\n \"name\": \"ssh\",\n \"parent\": 39\n },\n {\n \"id\": 41,\n \"name\": \"git\",\n \"parent\": 39\n },\n {\n \"id\": 42,\n \"name\": \"api\",\n \"parent\": 32\n },\n {\n \"id\": 43,\n \"name\": \"registry\",\n \"parent\": 0\n },\n {\n \"id\": 44,\n \"name\": \"lib\",\n \"parent\": 43\n },\n {\n \"id\": 45,\n \"name\": \"editor-client\",\n \"parent\": 0\n },\n {\n \"id\": 46,\n \"name\": \"locales\",\n \"parent\": 45\n },\n {\n \"id\": 47,\n \"name\": \"ja\",\n \"parent\": 46\n },\n {\n \"id\": 48,\n \"name\": \"zh-CN\",\n \"parent\": 46\n },\n {\n \"id\": 49,\n \"name\": \"de\",\n \"parent\": 46\n },\n {\n \"id\": 50,\n \"name\": \"ko\",\n \"parent\": 46\n },\n {\n \"id\": 51,\n \"name\": \"en-US\",\n \"parent\": 46\n },\n {\n \"id\": 52,\n \"name\": \"templates\",\n \"parent\": 45\n },\n {\n \"id\": 53,\n \"name\": \"src\",\n \"parent\": 45\n },\n {\n \"id\": 54,\n \"name\": \"images\",\n \"parent\": 53\n },\n {\n \"id\": 55,\n \"name\": \"typedInput\",\n \"parent\": 54\n },\n {\n \"id\": 56,\n \"name\": \"icons\",\n \"parent\": 54\n },\n {\n \"id\": 57,\n \"name\": \"js\",\n \"parent\": 53\n },\n {\n \"id\": 58,\n \"name\": \"ui\",\n \"parent\": 57\n },\n {\n \"id\": 59,\n \"name\": \"touch\",\n \"parent\": 58\n },\n {\n \"id\": 60,\n \"name\": \"projects\",\n \"parent\": 58\n },\n {\n \"id\": 61,\n \"name\": \"editors\",\n \"parent\": 58\n },\n {\n \"id\": 62,\n \"name\": \"common\",\n \"parent\": 58\n },\n {\n \"id\": 63,\n \"name\": \"text\",\n \"parent\": 57\n },\n {\n \"id\": 64,\n \"name\": \"sass\",\n \"parent\": 53\n },\n {\n \"id\": 65,\n \"name\": \"ui\",\n \"parent\": 64\n },\n {\n \"id\": 66,\n \"name\": \"common\",\n \"parent\": 65\n },\n {\n \"id\": 67,\n \"name\": \"ace\",\n \"parent\": 53\n },\n {\n \"id\": 68,\n \"name\": \"mode\",\n \"parent\": 67\n },\n {\n \"id\": 69,\n \"name\": \"bin\",\n \"parent\": 67\n },\n {\n \"id\": 70,\n \"name\": \"snippets\",\n \"parent\": 69\n },\n {\n \"id\": 71,\n \"name\": \"vendor\",\n \"parent\": 53\n },\n {\n \"id\": 72,\n \"name\": \"bootstrap\",\n \"parent\": 71\n },\n {\n \"id\": 73,\n \"name\": \"css\",\n \"parent\": 72\n },\n {\n \"id\": 74,\n \"name\": \"js\",\n \"parent\": 72\n },\n {\n \"id\": 75,\n \"name\": \"img\",\n \"parent\": 72\n },\n {\n \"id\": 76,\n \"name\": \"marked\",\n \"parent\": 71\n },\n {\n \"id\": 77,\n \"name\": \"jsonata\",\n \"parent\": 71\n },\n {\n \"id\": 78,\n \"name\": \"jquery\",\n \"parent\": 71\n },\n {\n \"id\": 79,\n \"name\": \"css\",\n \"parent\": 78\n },\n {\n \"id\": 80,\n \"name\": \"smoothness\",\n \"parent\": 79\n },\n {\n \"id\": 81,\n \"name\": \"images\",\n \"parent\": 80\n },\n {\n \"id\": 82,\n \"name\": \"js\",\n \"parent\": 78\n },\n {\n \"id\": 83,\n \"name\": \"i18next\",\n \"parent\": 71\n },\n {\n \"id\": 84,\n \"name\": \"d3\",\n \"parent\": 71\n },\n {\n \"id\": 85,\n \"name\": \"ace\",\n \"parent\": 71\n },\n {\n \"id\": 86,\n \"name\": \"snippets\",\n \"parent\": 85\n },\n {\n \"id\": 87,\n \"name\": \"font-awesome\",\n \"parent\": 71\n },\n {\n \"id\": 88,\n \"name\": \"css\",\n \"parent\": 87\n },\n {\n \"id\": 89,\n \"name\": \"fonts\",\n \"parent\": 87\n }\n]\n","output":"json","x":380,"y":200,"wires":[["e1ab4237.3d54c"]]},{"id":"5ce63905.31c738","type":"http in","z":"459244a5.abbb6c","name":"","url":"/tree-data","method":"get","upload":false,"swaggerDoc":"","x":200,"y":200,"wires":[["cea3fa34.2ba198"]]},{"id":"e1ab4237.3d54c","type":"http response","z":"459244a5.abbb6c","name":"","statusCode":"","headers":{},"x":570,"y":200,"wires":[]},{"id":"e8086d9c.1ec5a","type":"comment","z":"459244a5.abbb6c","name":"↓ Display on Dashboard","info":"","x":220,"y":40,"wires":[]},{"id":"f7890dd7.a12d1","type":"comment","z":"459244a5.abbb6c","name":"↓ Provide URL access of data used in Vega spec.","info":"","x":300,"y":160,"wires":[]},{"id":"140b0f1062b96436","type":"inject","z":"459244a5.abbb6c","name":"example 2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"$schema\":\"https://vega.github.io/schema/vega/v5.json\",\"description\":\"A radar chart example, showing multiple dimensions in a radial layout.\",\"width\":480,\"height\":450,\"padding\":5,\"autosize\":{\"type\":\"none\",\"contains\":\"padding\"},\"signals\":[{\"name\":\"radius\",\"update\":\"width / 2\"}],\"data\":[{\"name\":\"table\",\"url\":\"/example2data\"},{\"name\":\"keys\",\"source\":\"table\",\"transform\":[{\"type\":\"aggregate\",\"groupby\":[\"key\"]}]}],\"scales\":[{\"name\":\"angular\",\"type\":\"point\",\"range\":{\"signal\":\"[-PI, PI]\"},\"padding\":0.5,\"domain\":{\"data\":\"table\",\"field\":\"key\"}},{\"name\":\"radial\",\"type\":\"linear\",\"range\":{\"signal\":\"[0, radius]\"},\"zero\":true,\"nice\":false,\"domain\":{\"data\":\"table\",\"field\":\"value\"},\"domainMin\":0},{\"name\":\"color\",\"type\":\"ordinal\",\"domain\":{\"data\":\"table\",\"field\":\"category\"},\"range\":{\"scheme\":\"category10\"}}],\"encode\":{\"enter\":{\"x\":{\"signal\":\"radius\"},\"y\":{\"signal\":\"radius\"}}},\"marks\":[{\"type\":\"group\",\"name\":\"categories\",\"zindex\":1,\"from\":{\"facet\":{\"data\":\"table\",\"name\":\"facet\",\"groupby\":[\"category\"]}},\"marks\":[{\"type\":\"line\",\"name\":\"category-line\",\"from\":{\"data\":\"facet\"},\"encode\":{\"enter\":{\"interpolate\":{\"value\":\"linear-closed\"},\"x\":{\"signal\":\"scale('radial', datum.value) * cos(scale('angular', datum.key))\"},\"y\":{\"signal\":\"scale('radial', datum.value) * sin(scale('angular', datum.key))\"},\"stroke\":{\"scale\":\"color\",\"field\":\"category\"},\"strokeWidth\":{\"value\":1},\"fill\":{\"scale\":\"color\",\"field\":\"category\"},\"fillOpacity\":{\"value\":0.1}}}},{\"type\":\"text\",\"name\":\"value-text\",\"from\":{\"data\":\"category-line\"},\"encode\":{\"enter\":{\"x\":{\"signal\":\"datum.x\"},\"y\":{\"signal\":\"datum.y\"},\"text\":{\"signal\":\"datum.datum.value\"},\"align\":{\"value\":\"center\"},\"baseline\":{\"value\":\"middle\"},\"fill\":{\"value\":\"black\"}}}}]},{\"type\":\"rule\",\"name\":\"radial-grid\",\"from\":{\"data\":\"keys\"},\"zindex\":0,\"encode\":{\"enter\":{\"x\":{\"value\":0},\"y\":{\"value\":0},\"x2\":{\"signal\":\"radius * cos(scale('angular', datum.key))\"},\"y2\":{\"signal\":\"radius * sin(scale('angular', datum.key))\"},\"stroke\":{\"value\":\"lightgray\"},\"strokeWidth\":{\"value\":1}}}},{\"type\":\"text\",\"name\":\"key-label\",\"from\":{\"data\":\"keys\"},\"zindex\":1,\"encode\":{\"enter\":{\"x\":{\"signal\":\"(radius + 5) * cos(scale('angular', datum.key))\"},\"y\":{\"signal\":\"(radius + 5) * sin(scale('angular', datum.key))\"},\"text\":{\"field\":\"key\"},\"align\":[{\"test\":\"abs(scale('angular', datum.key)) > PI / 2\",\"value\":\"right\"},{\"value\":\"left\"}],\"baseline\":[{\"test\":\"scale('angular', datum.key) > 0\",\"value\":\"top\"},{\"test\":\"scale('angular', datum.key) == 0\",\"value\":\"middle\"},{\"value\":\"bottom\"}],\"fill\":{\"value\":\"black\"},\"fontWeight\":{\"value\":\"bold\"}}}},{\"type\":\"line\",\"name\":\"outer-line\",\"from\":{\"data\":\"radial-grid\"},\"encode\":{\"enter\":{\"interpolate\":{\"value\":\"linear-closed\"},\"x\":{\"field\":\"x2\"},\"y\":{\"field\":\"y2\"},\"stroke\":{\"value\":\"lightgray\"},\"strokeWidth\":{\"value\":1}}}}]}","payloadType":"json","x":200,"y":120,"wires":[["21e0e3e1.04f72c"]]},{"id":"af3636ee0ac08a17","type":"inject","z":"459244a5.abbb6c","name":"example 1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"width\":480,\"height\":450,\"padding\":5,\"autosize\":\"none\",\"signals\":[{\"name\":\"originX\",\"update\":\"width / 2\"},{\"name\":\"originY\",\"update\":\"height / 2\"}],\"data\":[{\"name\":\"tree\",\"url\":\"/tree-data\",\"transform\":[{\"type\":\"stratify\",\"key\":\"id\",\"parentKey\":\"parent\"},{\"type\":\"tree\",\"method\":\"tidy\",\"size\":[1,230],\"as\":[\"alpha\",\"radius\",\"depth\",\"children\"]},{\"type\":\"formula\",\"expr\":\"(360 * datum.alpha + 270) % 360\",\"as\":\"angle\"},{\"type\":\"formula\",\"expr\":\"PI * datum.angle / 180\",\"as\":\"radians\"},{\"type\":\"formula\",\"expr\":\"inrange(datum.angle, [90, 270])\",\"as\":\"leftside\"},{\"type\":\"formula\",\"expr\":\"originX + datum.radius * cos(datum.radians)\",\"as\":\"x\"},{\"type\":\"formula\",\"expr\":\"originY + datum.radius * sin(datum.radians)\",\"as\":\"y\"}]},{\"name\":\"links\",\"source\":\"tree\",\"transform\":[{\"type\":\"treelinks\"},{\"type\":\"linkpath\",\"shape\":\"line\",\"orient\":\"radial\",\"sourceX\":\"source.radians\",\"sourceY\":\"source.radius\",\"targetX\":\"target.radians\",\"targetY\":\"target.radius\"}]}],\"scales\":[{\"name\":\"color\",\"type\":\"linear\",\"range\":{\"scheme\":\"magma\"},\"domain\":{\"data\":\"tree\",\"field\":\"depth\"},\"zero\":true}],\"marks\":[{\"type\":\"path\",\"from\":{\"data\":\"links\"},\"encode\":{\"update\":{\"x\":{\"signal\":\"originX\"},\"y\":{\"signal\":\"originY\"},\"path\":{\"field\":\"path\"},\"stroke\":{\"value\":\"#ccc\"}}}},{\"type\":\"symbol\",\"from\":{\"data\":\"tree\"},\"encode\":{\"enter\":{\"size\":{\"value\":100},\"stroke\":{\"value\":\"#fff\"}},\"update\":{\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"},\"fill\":{\"scale\":\"color\",\"field\":\"depth\"}}}},{\"type\":\"text\",\"from\":{\"data\":\"tree\"},\"encode\":{\"enter\":{\"text\":{\"field\":\"name\"},\"fontSize\":{\"value\":12},\"baseline\":{\"value\":\"middle\"}},\"update\":{\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"},\"dx\":{\"signal\":\"(datum.leftside ? -1 : 1) * 6\"},\"angle\":{\"signal\":\"datum.leftside ? datum.angle - 180 : datum.angle\"},\"align\":{\"signal\":\"datum.leftside ? 'right' : 'left'\"},\"opacity\":1}}}]}","payloadType":"json","x":200,"y":80,"wires":[["21e0e3e1.04f72c"]]},{"id":"595b88879081fe98","type":"http in","z":"459244a5.abbb6c","name":"","url":"/example2data","method":"get","upload":false,"swaggerDoc":"","x":210,"y":260,"wires":[["8c90127a27538b1c"]]},{"id":"8c90127a27538b1c","type":"template","z":"459244a5.abbb6c","name":"Example 2 Data","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"[\n {\n \"key\": \"key-0\",\n \"value\": 19,\n \"category\": 0\n },\n {\n \"key\": \"key-1\",\n \"value\": 22,\n \"category\": 0\n },\n {\n \"key\": \"key-2\",\n \"value\": 14,\n \"category\": 0\n },\n {\n \"key\": \"key-3\",\n \"value\": 38,\n \"category\": 0\n },\n {\n \"key\": \"key-4\",\n \"value\": 23,\n \"category\": 0\n },\n {\n \"key\": \"key-5\",\n \"value\": 5,\n \"category\": 0\n },\n {\n \"key\": \"key-6\",\n \"value\": 27,\n \"category\": 0\n },\n {\n \"key\": \"key-0\",\n \"value\": 13,\n \"category\": 1\n },\n {\n \"key\": \"key-1\",\n \"value\": 12,\n \"category\": 1\n },\n {\n \"key\": \"key-2\",\n \"value\": 42,\n \"category\": 1\n },\n {\n \"key\": \"key-3\",\n \"value\": 13,\n \"category\": 1\n },\n {\n \"key\": \"key-4\",\n \"value\": 6,\n \"category\": 1\n },\n {\n \"key\": \"key-5\",\n \"value\": 15,\n \"category\": 1\n },\n {\n \"key\": \"key-6\",\n \"value\": 8,\n \"category\": 1\n }\n]","output":"json","x":400,"y":260,"wires":[["6a488ad61cb33960"]]},{"id":"6a488ad61cb33960","type":"http response","z":"459244a5.abbb6c","name":"","statusCode":"","headers":{},"x":570,"y":260,"wires":[]},{"id":"84147604.b29078","type":"ui_group","name":"Group 1","tab":"56d91d75.d0ebf4","order":1,"disp":false,"width":"10","collapse":false},{"id":"56d91d75.d0ebf4","type":"ui_tab","name":"[Vega] Tree Layout","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
```
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [28 June 2022 11:42 UTC](https://discourse.nodered.org/t/showing-several-complex-values-realpart-i-imagin-part-in-a-cartesian-or-an-polar-coordinate-system/64429/6 "2022-06-28T11:42:32Z")
Here is another demo automating chartjs
> [@Problem with X/Y graph with ui\_graph](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713/8):
>
> Here is a scatter demo using chart.js... [4CJBilIHJz] [{"id":"acbdb34e9e6d9720","type":"change","z":"553814a2.1248ec","name":"random x/y","rules":[{"t":"set","p":"payload","pt":"msg","to":"(\t $minimum := 1;\t $maximum := 100;\t $x := $round(($random() \* ($maximum-$minimum)) + $minimum, 0);\t $y := $round(($random() \* ($maximum-$minimum)) + $minimum, 0);\t {\t \"x\": $x,\t \"y\": $y\t }\t)","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":fals…
---
### Author:  [@Tetrastruct](https://discourse.nodered.org/u/Tetrastruct)
#### Post date: [28 June 2022 12:20 UTC](https://discourse.nodered.org/t/showing-several-complex-values-realpart-i-imagin-part-in-a-cartesian-or-an-polar-coordinate-system/64429/7 "2022-06-28T12:20:49Z")
Hi Steven, Thanks for your answer.
I think my main problem is that I do not know the syntax how to bring a running variable into a function and at the end in a msg.
Reinhard
---
### Author:  [@Tetrastruct](https://discourse.nodered.org/u/Tetrastruct)
#### Post date: [28 June 2022 12:22 UTC](https://discourse.nodered.org/t/showing-several-complex-values-realpart-i-imagin-part-in-a-cartesian-or-an-polar-coordinate-system/64429/8 "2022-06-28T12:22:06Z")
Can you give me ahint what I have zo study to learn that or did you know an example ?
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [28 June 2022 12:32 UTC](https://discourse.nodered.org/t/showing-several-complex-values-realpart-i-imagin-part-in-a-cartesian-or-an-polar-coordinate-system/64429/9 "2022-06-28T12:32:27Z")
I recommend watching this playlist: [Node-RED Essentials](https://www.youtube.com/playlist?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6). The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.