Problem with X/Y graph with ui_graph

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

[{"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}]

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

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

  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:

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 AMnode: 4da1a4a6.7fc65c
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.

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

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

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

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":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}]
1 Like

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

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

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