Has anyone created a scatter/bubble plot?


I'm looking to plot some data - a bunch of points both positive and negative, and want to visualize them. I'm looking to create a scatter plot but haven't been able to find an example.

Before I go off and try to build a flow or node to create one, I just thought I'd ask. Thanks.

Reporting and Graph
Create Circle Chart?



I don't know exactly what @zenofmud is looking for but that is not what I would call a scatter chart. A scatter chart should accept a set of x,y pairs and plot the points. I don't think the flow will allow you to have multiple points with the same x value (ie vertically above each other) for example.


That's true, that flow won't let you have two exact same x values, but they only have to be not exactly the same to be ok. :slight_smile:

1 Like

Correct @Colin, but I don't think there is any other way in node-red. I think Grafana has the possibility to do a real scatter plot.


I guess I’ll take a deeper look at chart.js which I think can do it, but not till tomorrow, the grandkids have invaded and moved in three houses up the street

1 Like

I decided I could use a bubble chart and it turns out that all you need to do is use a ui_template with the correct info. Here is what it looks like with hard coded data pioints and the 'one node' flow is attached. Note the size of the points could be changed vwey easily.

[{"id":"46a8dffe.2dda18","type":"ui_template","z":"6445adf7.f2fb24","group":"6169c1d9.e98618","name":"Bubble","order":0,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>\n\t<div style=\"width:600px;\">\n\t\t<canvas id=\"bubble-chart\" width=\"300\" height=\"300\"></canvas>\n\t</div>\n\n<script>\nnew Chart(document.getElementById(\"bubble-chart\"), {\n    type: 'bubble',\n    data: {\n      labels: \"label\",\n      datasets: [\n        {\n          label: \"Bases\",\n          backgroundColor: \"rgba(255, 216, 0, 1.0)\",\n          borderColor: \"#000\",\n          data: [\n          \t{ x: -85, y: 79, r: 10 },\n          \t{ x: 385, y: -279, r: 10 },\n          \t{x: 207, y: -461, r: 10 },\n          \t{x: 262, y: -548, r: 10 },\n          \t{x: 388, y: -1320, r: 10 },\n          \t{x: 415, y: 185, r: 10 },\n          \t{x: 584, y: -1100, r: 10 }\n          ]\n        }, {\n          label: [\"POI\"], \n          backgroundColor: \"rgba(72, 255, 70,1.0)\",\n          borderColor: \"#000\",\n          data: [\n          \t{x: 106, y: -381, r: 10 },\n          \t{x: 174, y: -119, r: 10 },\n          \t{x: 185, y: -780, r: 10 },\n          \t{x: 244, y: -1113, r: 10 },\n          \t{x: 261, y: -1319, r: 10 },\n          \t{x: 296, y: -100, r: 10 }\n\t\t  ]\n        }\n      ]\n    },\n    options: {\n        legend: {\n            display: true,\n            labels: {\n                fontColor: 'rgb(255, 99, 132)'\n            }\n        },\n      title: {\n        display: true,\n        text: 'Locations of Bases'\n      }, scales: {\n        yAxes: [{ \n          scaleLabel: {\n            display: true,\n            labelString: \"yAxes\"\n          }\n        }],\n        xAxes: [{ \n          scaleLabel: {\n            display: true,\n            labelString: \"xAxes\"\n          }\n        }]\n      }\n    }\n});\n\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":340,"y":320,"wires":[[]]},{"id":"6169c1d9.e98618","type":"ui_group","z":"","name":"Chart","tab":"421ff38.a99248c","disp":true,"width":"12","collapse":false},{"id":"421ff38.a99248c","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

Very nice ! Def worth adding to flows.nodered.org


@dceejay - I can do that, but I was wondering if I should explore adding it to ui_charts as a possible PR...


well you could do - but some things to think about... most of the widgets expect just a number in the payload - so that angular filters can be applied to them - so how would you handle the (in this case) x co-ordinate ? (assuming y is in payload)... and then also maybe the radius... To me it would seem odd not to pass in a single object, so that needs some thought.


Hmmm, you make some very good points there...I think this calls for a nice little writeup for flows.nodered.org :grin:


just added an example you can find at https://flows.nodered.org/flow/d1b9f2c606e536ce4a3960abcd887754

@dceejay - I figured out how to add an image to a entry on flows.nodered.org!!! (google is my friend :grin:)