# Problem with X/Y graph with ui\_graph

**URL:** <https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713>\
**Category:** Dashboard\
**Created:** [5 June 2021 00:32 UTC](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713 "2021-06-05T00:32:58Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![vlturner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vlturner/32/15211_2.png) [@vlturner](https://discourse.nodered.org/u/vlturner)\
**Post date:** [5 June 2021 00:32 UTC](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713/1 "2021-06-05T00:32:58Z")

</div>

I seem to be doing something wrong with the X/Y coordinates to get them into the graph. Any suggestions?

```auto
[{"id":"2510564a.26004a","type":"inject","z":"52d0e4d.d0a231c","name":"Start","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":370,"y":740,"wires":[["4161f0a1.b6727"]]},{"id":"4da1a4a6.7fc65c","type":"debug","z":"52d0e4d.d0a231c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1550,"y":860,"wires":[]},{"id":"4161f0a1.b6727","type":"trigger","z":"52d0e4d.d0a231c","name":"","op1":"1","op2":"1","op1type":"str","op2type":"str","duration":"-1000","extend":false,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":580,"y":760,"wires":[["914c48b9.2716f"]]},{"id":"3507a9b8.f8a74e","type":"inject","z":"52d0e4d.d0a231c","name":"Reset","props":[{"p":"reset","v":"true","vt":"bool"},{"p":"complete","v":"true","vt":"bool"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":370,"y":800,"wires":[["4161f0a1.b6727"]]},{"id":"914c48b9.2716f","type":"random","z":"52d0e4d.d0a231c","name":"","low":1,"high":"100","inte":"true","property":"payload","x":600,"y":820,"wires":[["ce828d02.fb58e8","b1e0cb48.42bc88","bd24a6f1.104708"]]},{"id":"ce828d02.fb58e8","type":"calculator","z":"52d0e4d.d0a231c","name":"","inputMsgField":"payload","outputMsgField":"payload","operation":"mod","constant":"44","round":false,"decimals":0,"x":800,"y":820,"wires":[["d2fd113d.5ded98"]]},{"id":"b1e0cb48.42bc88","type":"calculator","z":"52d0e4d.d0a231c","name":"","inputMsgField":"payload","outputMsgField":"payload","operation":"trunc","constant":"","round":false,"decimals":0,"x":830,"y":780,"wires":[[]]},{"id":"e70b851d.f93ce","type":"merge","z":"52d0e4d.d0a231c","name":"","timeout":"","x":1210,"y":860,"wires":[["28ddef10.88f438"]]},{"id":"d2fd113d.5ded98","type":"change","z":"52d0e4d.d0a231c","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"x","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1010,"y":820,"wires":[["e70b851d.f93ce"]]},{"id":"bd24a6f1.104708","type":"calculator","z":"52d0e4d.d0a231c","name":"","inputMsgField":"payload","outputMsgField":"payload","operation":"div","constant":"6.2857","round":true,"decimals":0,"x":850,"y":860,"wires":[["8aab7144.b3c0a8"]]},{"id":"8aab7144.b3c0a8","type":"change","z":"52d0e4d.d0a231c","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"y","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1010,"y":860,"wires":[["e70b851d.f93ce"]]},{"id":"2224575e.8f4f38","type":"ui_chart","z":"52d0e4d.d0a231c","name":"","group":"50f7e41a.bb856c","order":0,"width":0,"height":0,"label":"Sort","chartType":"radar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":1550,"y":900,"wires":[[]]},{"id":"28ddef10.88f438","type":"change","z":"52d0e4d.d0a231c","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"Integer","tot":"str"},{"t":"move","p":"payload.0.x","pt":"msg","to":"X","tot":"msg"},{"t":"move","p":"payload.1.y","pt":"msg","to":"Y","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1360,"y":860,"wires":[["4da1a4a6.7fc65c","2224575e.8f4f38"]]},{"id":"50f7e41a.bb856c","type":"ui_group","name":"Default","tab":"cc24507b.92dd2","order":1,"disp":true,"width":"22","collapse":false},{"id":"cc24507b.92dd2","type":"ui_tab","name":"Sort","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [5 June 2021 00:50 UTC](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713/2 "2021-06-05T00:50:48Z")

</div>

What are you observing? What did you expect to see?

---

<div class="post-metadata">

**Author:** ![vlturner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vlturner/32/15211_2.png) [@vlturner](https://discourse.nodered.org/u/vlturner)\
**Post date:** [5 June 2021 00:54 UTC](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713/3 "2021-06-05T00:54:29Z")

</div>

Trying to get a white dot at the X/Y coordinate.

---

<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:** [5 June 2021 07:37 UTC](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713/4 "2021-06-05T07:37:03Z")

</div>

1. what do you see in the debug output?
2. where does the `ui-chart` node say the data should be?

here is a link to that contains examples of diferent charts so you can see the formats that are available:

> <https://github.com/node-red/node-red-dashboard/blob/master/Charts.md>

---

<div class="post-metadata">

**Author:** ![vlturner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vlturner/32/15211_2.png) [@vlturner](https://discourse.nodered.org/u/vlturner)\
**Post date:** [5 June 2021 14:05 UTC](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713/5 "2021-06-05T14:05:10Z")

</div>

I want to send it a message with just the x/y coordinate to turn on a white dot. I don't care about time. If I had my choice I just want to turn on a pixel at a time. I want it 44 pixels wide and a screen high. I especially don't want a connecting line between them.

6/5/2021, 7:08:32 AM[node: 4da1a4a6.7fc65c](http://192.168.0.10:1880/#)  
Integer : msg : Object  
object  
payload: array[2]  
\_msgid: "fb6c6908.bf8228"  
topic: "Integer"  
X: 11  
Y: 9

I want to turn on a dot for integer at column 11 row 9 which represents 99

I just want to visualize this data because its a form of linear sort. the random numbers will go into the array in sorted order. If you read back the array you know if the number was part of the array set as true or false. This is just simple for now but you can sort X=0 to infinity as to a set of row and column values. The rows are a function and I will have to chunk up the array as the column count may grow, but the array is sorted, and the primes are only in a fixed set of columns. When I get to the largest primes we know, I can turn it on to predict the unknown primes beyond within the boundary of a manageable chunk of array that I don,t have to store the number. But it works for all numbers and sorts them. I don't want to spiral them just watch them show up in an X/Y graph.

Its based on this Theorem.

> **[Dirichlet's theorem on arithmetic progressions](https://en.wikipedia.org/wiki/Dirichlet's_theorem_on_arithmetic_progressions)**
>
> In number theory, Dirichlet's theorem, also called the Dirichlet prime number theorem, states that for any two positive coprime integers a and d, there are infinitely many primes of the form a + nd, where n is also a positive integer. In other words, there are infinitely many primes that are congruent to a modulo d. The numbers of the form a + nd form an arithmetic progression
> and Dirichlet's theorem states that this sequence contains infinitely many prime numbers. The theorem, named after Peter...

[https://duckduckgo.com/?t=ffab&q=prime+number+spiral+on+youtube&iax=videos&ia=videos&iai=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DEK32jo7i5LQ](https://duckduckgo.com/?t=ffab&q=prime+number+spiral+on+youtube&iax=videos&ia=videos&iai=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DEK32jo7i5LQ)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [5 June 2021 14:33 UTC](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713/6 "2021-06-05T14:33:59Z")

</div>

> [@vlturner](#):
>
> If I had my choice I just want to turn on a pixel at a time. I want it 44 pixels wide and a screen high. I especially don't want a connecting line between them.

You would be better of using the JS canvas, you could draw individual pixels.  
here is some reading

> <https://stackoverflow.com/questions/4899799/whats-the-best-way-to-set-a-single-pixel-in-an-html5-canvas>

> **[Benchmark: Setting Canvas Pixel - MeasureThat.net](https://www.measurethat.net/Benchmarks/Show/1664/1)**
>
> JavaScript microbenchmarks, JavaScript performance playground. Measure performance accross different browsers.

---

<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:** [5 June 2021 20:57 UTC](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713/7 "2021-06-05T20:57:13Z")

</div>

Here is a link to a flow I posted an doing scatter plots which may help  
[https://flows.nodered.org/flow/d1b9f2c606e536ce4a3960abcd887754](https://flows.nodered.org/flow/d1b9f2c606e536ce4a3960abcd887754)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 June 2021 08:04 UTC](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713/8 "2021-06-06T08:04:06Z")

</div>

Here is a scatter demo using chart.js...

![4CJBilIHJz](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/3/0302cb7bf2ffdc7089a9609f33eff6ff0cafee38.gif)

```auto
[{"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":false,"x":1030,"y":1980,"wires":[["b69c5129af8f7ec1"]]},{"id":"b69c5129af8f7ec1","type":"ui_template","z":"553814a2.1248ec","group":"dce9e7a2.d20c78","name":"scatter","order":8,"width":"9","height":"14","format":"<script>\n (function(scope) {\n const chartData = {\n datasets: [{\n label: 'Scatter Dataset',\n data: [],\n backgroundColor: 'rgb(255, 99, 132)'\n }],\n };\n\n const config = {\n type: 'scatter',\n data: chartData,\n options: {\n maintainAspectRatio: false,\n scales: {\n x: {\n type: 'linear',\n position: 'bottom'\n }\n }\n }\n };\n\n var myChart = new Chart(\n document.getElementById('myChart'),\n config\n );\n\n scope.$watch('msg', function(msg) {\n if (msg) {\n \n if(msg.topic == \"add\") {\n myChart.data.datasets[0].data.push(msg.payload);\n myChart.update();\n } \n if(msg.topic == \"set\") {\n myChart.data.datasets[0].data = [...msg.payload];\n myChart.update();\n }\n }\n });\n })(scope);\n</script>\n\n<div class=\"chart-container\" style=\"position: relative; height:100%; width:100%\">\n <canvas id=\"myChart\"></canvas>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1210,"y":1980,"wires":[[]]},{"id":"c06bb8a0c16fab29","type":"ui_template","z":"553814a2.1248ec","group":"dce9e7a2.d20c78","name":"head script","order":9,"width":0,"height":0,"format":"<!-- <script type=\"text/javascript\" src=\"https://canvasjs.com/assets/script/canvasjs.min.js\"></script> -->\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":1230,"y":1940,"wires":[[]]},{"id":"295977d8a88c0c92","type":"ui_button","z":"553814a2.1248ec","name":"","group":"dce9e7a2.d20c78","order":11,"width":"3","height":"1","passthru":false,"label":"add","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"add","topicType":"str","x":990,"y":1940,"wires":[["acbdb34e9e6d9720"]]},{"id":"e29654d556555bba","type":"ui_button","z":"553814a2.1248ec","name":"","group":"dce9e7a2.d20c78","order":12,"width":"3","height":"1","passthru":false,"label":"clear","tooltip":"","color":"","bgcolor":"","icon":"","payload":"[]","payloadType":"json","topic":"set","topicType":"str","x":990,"y":2020,"wires":[["b69c5129af8f7ec1"]]},{"id":"35c0629717713a22","type":"ui_button","z":"553814a2.1248ec","name":"","group":"dce9e7a2.d20c78","order":10,"width":"3","height":"1","passthru":false,"label":"set data","tooltip":"","color":"","bgcolor":"","icon":"","payload":"[{\"x\":10,\"y\":11},{\"x\":11,\"y\":12},{\"x\":13,\"y\":12},{\"x\":15,\"y\":12},{\"x\":18,\"y\":16},{\"x\":20,\"y\":22},{\"x\":20,\"y\":22},{\"x\":21,\"y\":22},{\"x\":24,\"y\":22},{\"x\":26,\"y\":25},{\"x\":28,\"y\":30},{\"x\":30,\"y\":40},{\"x\":30,\"y\":30},{\"x\":30,\"y\":40},{\"x\":31,\"y\":40},{\"x\":31,\"y\":51},{\"x\":31,\"y\":42},{\"x\":34,\"y\":30},{\"x\":37,\"y\":30},{\"x\":40,\"y\":82},{\"x\":40,\"y\":80},{\"x\":40,\"y\":90},{\"x\":42,\"y\":83},{\"x\":44,\"y\":93},{\"x\":45,\"y\":63},{\"x\":45,\"y\":99},{\"x\":46,\"y\":42},{\"x\":48,\"y\":82}]","payloadType":"json","topic":"set","topicType":"str","x":1000,"y":1900,"wires":[["b69c5129af8f7ec1"]]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"9","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![vlturner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vlturner/32/15211_2.png) [@vlturner](https://discourse.nodered.org/u/vlturner)\
**Post date:** [9 June 2021 20:38 UTC](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713/9 "2021-06-09T20:38:22Z")

</div>

It's awesome... Thanks Steve...Its placing random numbers into a sorted structure on the fly to 10K.

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

The concept works..place random numbers into a sorted structure. And for those of you into primes, some columns are only the primes. I am going to clean it up and color code the dots with the right modulus for the primes. I now need to figure out how to build out a large number counter outside of scientific notation to feed this mechanism to generate the list above whats known. Then work only those for the prime proof...

---

<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 July 2021 20:39 UTC](https://discourse.nodered.org/t/problem-with-x-y-graph-with-ui-graph/46713/10 "2021-07-09T20:39:17Z")

</div>

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