Is there a way to set a fixed x-axis range on a DB2 scatter plot? The y-range can be set, but the x axis can only be limited to a number of points, or a number of hours. Thanks!
Is this so you have the whole chart shown before other points come in, as in your previous topic?
If so you can send some x axis values with null y values and msg "action": "replace" at chart start up, which will give the full expanded chart.
e.g.
[{"id":"63ebf8fcb91b4797","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"action","v":"replace","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[{\"x\":10,\"y\":null},{\"x\":0,\"y\":null}]","payloadType":"json","x":70,"y":200,"wires":[["663387f21acaf99e"]]},{"id":"663387f21acaf99e","type":"ui-chart","z":"d1395164b4eec73e","group":"ff7cbf009b7b3034","name":"","label":"chart","order":5,"chartType":"scatter","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"x","xAxisPropertyType":"property","xAxisType":"linear","xAxisFormat":"","xAxisFormatType":"auto","yAxisLabel":"","yAxisProperty":"y","ymin":"0","ymax":"10","action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":false,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","x":270,"y":200,"wires":[[]]},{"id":"ff7cbf009b7b3034","type":"ui-group","name":"Form","page":"3bceecc44f91d26b","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"3bceecc44f91d26b","type":"ui-page","name":"Custom Form Submission","ui":"1805777f90e92057","path":"/form-submission","icon":"home","layout":"grid","theme":"35ee7753b5b3599b","order":1,"className":"","visible":true,"disabled":false},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"35ee7753b5b3599b","type":"ui-theme","name":"Theme Name","colors":{"surface":"#16234b","primary":"#1d44b9","bgPage":"#ecf2f8","groupBg":"#ffffff","groupOutline":"#cccccc"}}]
That is exactly my intent. Though it also bugs my OCD that I can set the x-axis just like the y-axis! Trying this code now - and thank you again for the education on NR tricks!
That works better than butter! Thank you!
Oops - one more detail. I am plotting multiple series, with the legend set by the topic. In the code snippet above, the topic is blank, but still produces a colored block in the legend. How do I stop that behavior?
Just add one of the series names to the topic, or what ever property you use for series, as the values are null they will not show in the chart.
Here is example of multi series scatter chart that sets up range on start up, and saves plotted values in one context var with multiple series. Add new series to topics in change node and series is added to payload.
[{"id":"06aa8d189488c774","type":"inject","z":"d1395164b4eec73e","name":"Scatter Data","props":[{"p":"payload"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\t \"x\":$round($random()*10),\t \"y\":$round($random()*10),\t \"series\":$round($random())=0 ? \"one\" :\"two\"\t}","payloadType":"jsonata","x":300,"y":40,"wires":[["408317ef705fd26b"]]},{"id":"408317ef705fd26b","type":"switch","z":"d1395164b4eec73e","name":"","property":"data[msg.payload.x][msg.payload.y][msg.payload.series]","propertyType":"flow","rules":[{"t":"true"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":490,"y":40,"wires":[[],["ce869c6ba494efdf"]]},{"id":"ce869c6ba494efdf","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"data[msg.payload.x][msg.payload.y][msg.payload.series]","pt":"flow","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":800,"y":40,"wires":[["ad0ba1038400de45"]]},{"id":"ad0ba1038400de45","type":"ui-chart","z":"d1395164b4eec73e","group":"983c30c1cfb7e72b","name":"Chart: Scatter","label":"Scatter Plot Example","order":1,"chartType":"scatter","category":"series","categoryType":"property","xAxisLabel":"x","xAxisProperty":"x","xAxisPropertyType":"property","xAxisType":"linear","xAxisFormat":"","xAxisFormatType":"auto","yAxisLabel":"y","yAxisProperty":"y","ymin":"0","ymax":"10","action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","x":720,"y":100,"wires":[["9c16fb91bc19cbc1"]]},{"id":"26cdf9bae76d6224","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"data","pt":"flow","to":"[]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":120,"wires":[["ad0ba1038400de45"]]},{"id":"9c16fb91bc19cbc1","type":"debug","z":"d1395164b4eec73e","name":"debug 2565","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":910,"y":80,"wires":[]},{"id":"63ebf8fcb91b4797","type":"inject","z":"d1395164b4eec73e","name":"clear / reset","props":[{"p":"payload"},{"p":"action","v":"replace","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"x\":0,\"y\":null,\"series\":\"one\"},{\"x\":10,\"y\":null,\"series\":\"one\"},{\"x\":0,\"y\":null,\"series\":\"two\"},{\"x\":10,\"y\":null,\"series\":\"two\"}]","payloadType":"json","x":310,"y":140,"wires":[["26cdf9bae76d6224"]]},{"id":"983c30c1cfb7e72b","type":"ui-group","name":"Chart Examples","page":"d0621b8f20aee671","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Charts","ui":"1805777f90e92057","path":"/charts","icon":"home","layout":"notebook","theme":"5075a7d8e4947586","order":3,"className":"","visible":"true","disabled":"false"},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
Or you could even identify multiple series plotted on same coordinates
[{"id":"06aa8d189488c774","type":"inject","z":"d1395164b4eec73e","name":"Scatter Data","props":[{"p":"payload"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\t \"x\":$round($random()*10),\t \"y\":$round($random()*10),\t \"series\":$round($random())=0 ? \"one\" :\"two\"\t}","payloadType":"jsonata","x":180,"y":60,"wires":[["408317ef705fd26b"]]},{"id":"408317ef705fd26b","type":"switch","z":"d1395164b4eec73e","name":"","property":"data[msg.payload.x][msg.payload.y][msg.payload.series]","propertyType":"flow","rules":[{"t":"true"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":330,"y":60,"wires":[[],["ce869c6ba494efdf"]]},{"id":"ce869c6ba494efdf","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"data[msg.payload.x][msg.payload.y][msg.payload.series]","pt":"flow","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":60,"wires":[["ad0ba1038400de45","b59e90a7dbd583a7"]]},{"id":"dc4d95f5a6135ce5","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"payload.series","pt":"msg","to":"multiple","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":120,"wires":[["ce869c6ba494efdf"]]},{"id":"ad0ba1038400de45","type":"ui-chart","z":"d1395164b4eec73e","group":"983c30c1cfb7e72b","name":"Chart: Scatter","label":"Scatter Plot Example","order":1,"chartType":"scatter","category":"series","categoryType":"property","xAxisLabel":"x","xAxisProperty":"x","xAxisPropertyType":"property","xAxisType":"linear","xAxisFormat":"","xAxisFormatType":"auto","yAxisLabel":"y","yAxisProperty":"y","ymin":"0","ymax":"10","action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#ff0000","#0000ff","#00ff00","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","x":920,"y":120,"wires":[["9c16fb91bc19cbc1"]]},{"id":"b59e90a7dbd583a7","type":"switch","z":"d1395164b4eec73e","name":"","property":"data[msg.payload.x][msg.payload.y].multiple","propertyType":"flow","rules":[{"t":"istype","v":"undefined","vt":"undefined"}],"checkall":"false","repair":false,"outputs":1,"x":170,"y":120,"wires":[["1dda4698260c7e80"]]},{"id":"1dda4698260c7e80","type":"switch","z":"d1395164b4eec73e","name":"","property":"$count($flowContext(\"data[\" & $$.payload.x & \"][\" & $$.payload.y & \"]\").*)","propertyType":"jsonata","rules":[{"t":"gt","v":"1","vt":"num"}],"checkall":"false","repair":false,"outputs":1,"x":290,"y":120,"wires":[["dc4d95f5a6135ce5"]]},{"id":"26cdf9bae76d6224","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"data","pt":"flow","to":"[]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":240,"wires":[["ad0ba1038400de45"]]},{"id":"9c16fb91bc19cbc1","type":"debug","z":"d1395164b4eec73e","name":"debug 2565","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1110,"y":120,"wires":[]},{"id":"63ebf8fcb91b4797","type":"inject","z":"d1395164b4eec73e","name":"clear / reset","props":[{"p":"payload"},{"p":"action","v":"replace","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"x\":0,\"y\":null,\"series\":\"multiple\"},{\"x\":10,\"y\":null,\"series\":\"multiple\"}]","payloadType":"json","x":230,"y":240,"wires":[["26cdf9bae76d6224"]]},{"id":"983c30c1cfb7e72b","type":"ui-group","name":"Chart Examples","page":"d0621b8f20aee671","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Charts","ui":"1805777f90e92057","path":"/charts","icon":"home","layout":"notebook","theme":"5075a7d8e4947586","order":3,"className":"","visible":"true","disabled":"false"},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
Hi E1cid, this is very helpful - I really like the trick you did for counting the spots with multiples.
However, when you press the clear button, the red multiple legend immediately appears, even though there are no points, multiple or otherwise, yet showing. It appears because it is associated with the null data in the clear command. How do I stop the behavior of showing a legend for data that isn't present?
[
{
"x": 0,
"y": null,
"series": "multiple"
},
{
"x": 10,
"y": null,
"series": "multiple"
}
]
The issue is the multiple series colour has to be the first in the legend as this will overlay any other series dot. Not sure how this can hidden without it not being the first colour. There maybe some css trick here that may hide it but I am not near a pc at the moment to check the developer console of the browser.
Maybe other might have an idea.
if you know all the series coming in you could send them all at reset and show all the series in the legend, rather than just multiple. Or don't show a legend at all.
Hi E1cid, I appreciate your thoughts. In some ways, the problem is simpler. If I use your trick to force the x-axis range on a plot that happens to have multiple series, then the undefined or null legend is forced for the points with a null value. Maybe I can add the null value points to one of my arrays?
Arrays? I have no knowledge of these arrays, you have given no examples of them or your incoming data, and how you add it to the chart. I would say probably.
But if you want to show the multiple points plotted, maybe not, as this has to be the first colour.
Ah - yes. I think of a series of points, whether they are coming in real time or all in advance as an array (or even a matrix, like the flow data here). In either event, your suggestion lead me to the trick to solve this!
The solution is to add a "series" or "topic" label to the x and y null value that matches the label of one of your data sets. It still appears in the legend, but now it has the same label as one of your data streams, even if it doesn't plot any points.
This is a nice trick, and I thank you for showing me how to find it!
I want to add a plea to the excellent DB2 developers: please add explicit x-axis limit control to the node. After plotting a time series, the most fundamental plot any graphing software can do it a scatter plot, in which you can control both of the axes.
You should open a request on the nodes github page. There it will not be overlooked. Issues · FlowFuse/node-red-dashboard · GitHub
You are of course correct! I have gotten off of my lazy butt and submitted a feature request!
Thanks E1cid - I have seen many of your posts here, and have learned a ton from you!
Sincerely,
sanderson
1 Like
Thanks for opening the Feature Request too!
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
