Problem with X/Y graph with ui_graph

vlturner · 5 June 2021 00:32

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}]

tve · 5 June 2021 00:50

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

vlturner · 5 June 2021 00:54

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

zenofmud · 5 June 2021 07:37

what do you see in the debug output?
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:

github.com

node-red/node-red-dashboard/blob/master/Charts.md

# Node-RED-Dashboard Charts

## Live data

To display live data just wire up an input with a `msg.payload` that contains a number.


### Line charts

To display two or more lines on the same chart then each `msg` must also contain `topic`
property that identifies which data series it belongs to - for example:

    {topic:"temperature", payload:22}
    {topic:"humidity", payload:66}

Each series will be represented by a different colour.
Alternatively you can use the property `series` instead of `topic` if you prefer.

It is possible to create "gaps" in line charts by sending either a null or boolean false as the payload.

This file has been truncated. show original

vlturner · 5 June 2021 14:05

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

E1cid · 5 June 2021 14:33

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

zenofmud · 5 June 2021 20:57

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

Steve-Mcl · 6 June 2021 08:04

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}]

vlturner · 9 June 2021 20:38

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

system · 9 July 2021 20:39

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

Topic		Replies	Views
Retrieving JSON data to make a chart Dashboard	8	3457	23 February 2021
Problem show point-label with using line chart Dashboard chart	15	791	15 February 2022
Help on how to use date axes ui-chart Dashboard dashboard-2	2	143	16 May 2024
Chart showing weird graphs Developing Nodes	6	593	8 December 2020
Problem with the chart node when i refresh the dashboard Dashboard	2	174	10 August 2023

Problem with X/Y graph with ui_graph

Related topics