Create Circle Chart?

Dashboard
1

Hi Guys,

I want to make Ampere chart data in 24 hours in circle view, like bellow picture:

image
image.png1920×1080 286 KB

I've done in Excel, is it possible to do that in Node-red?

  • i can't upload the excel file, here some information. But if anyone want it, i can sent it any time by email.

A1 | B1 | C1 | D1 | E1 | F1
Time | Ampere | Minutes |Degree | X | Y |
01/02/2017 00:00:00 | 0 | 0 | = C1/1440 * 360 | =B1 * SIN(RADIANS(D1)) | = B1*COS(RADIANS(D1)) |

info range :
A1 = 01/02/2017 00:00:00 - 02/02/2017 00:00:00
B1 = realtime value
C1 = 0 - 1440

Regards,
wiguna

2

Should be possible. I think they call this kind of charts the Radar chart.
There is topic about bubble chart, I think it is good place to start.
https://discourse.nodered.org/t/has-anyone-created-a-scatter-bubble-plot/2583

3

Hi hotNipi,

Thanks for your advise. I'll try to follow it.

4

Hello hotNipi

I'm stack in input data for X and Y axis, can you explain me how to add X and Y data in Chart?

[{"id":"ac1dfd0a.462f2","type":"inject","z":"fbe75c54.e3c0e","name":"current","topic":"current","payload":"4","payloadType":"str","repeat":"1","crontab":"","once":true,"onceDelay":0.1,"x":150.23815754481723,"y":652.8571946280342,"wires":[["412a7d29.22d734"]]},{"id":"51a0dd12.c924a4","type":"inject","z":"fbe75c54.e3c0e","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":160.0000877380371,"y":721.4286403656006,"wires":[["2696255a.47126a"]]},{"id":"2696255a.47126a","type":"moment","z":"fbe75c54.e3c0e","name":"","topic":"degree","input":"payload","inputType":"msg","inTz":"Etc/ETC/GMT","adjAmount":"7","adjType":"hours","adjDir":"add","format":"mm","locale":"ID","output":"payload","outputType":"msg","outTz":"Etc/UTC","x":210.23820114135742,"y":790.0001034736633,"wires":[["5f863a44.451874"]]},{"id":"5f863a44.451874","type":"function","z":"fbe75c54.e3c0e","name":"convert to degree","func":"msg.topic=\"degree\";\nmsg.payload=msg.payload/1440*360;\nreturn msg;","outputs":1,"noerr":0,"x":390.2382164001465,"y":734.2858009338379,"wires":[["2c38151b.7856ba","27737d53.1674c2"]]},{"id":"412a7d29.22d734","type":"function","z":"fbe75c54.e3c0e","name":"current","func":"msg.topic=\"current\";\nmsg.payload=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":407.1429328918457,"y":654.2858438491821,"wires":[["2c38151b.7856ba","27737d53.1674c2"]]},{"id":"2c38151b.7856ba","type":"function","z":"fbe75c54.e3c0e","name":"X","func":"context.data = context.data || {};\n\nswitch (msg.topic) {\n case \"current\":\n context.data.current = msg.payload;\n msg = null;\n break;\n case \"degree\":\n context.data.degree = msg.payload;\n msg = null;\n break;\n \n default:\n msg = null;\n \tbreak;\n\n}\n\nif(context.data.current != null && context.data.degree != null ) {\n\tmsg2 = {};\n\tmsg2.topic=\"x\";\n msg2.payload = context.data.current * Math.sin((Math.PI / 180 * context.data.degree));\n \n context.data=null;\n\treturn msg2;\n} ","outputs":1,"noerr":0,"x":630.0000686645508,"y":652.8572463989258,"wires":[["e11cf94c.523578"]]},{"id":"27737d53.1674c2","type":"function","z":"fbe75c54.e3c0e","name":"Y","func":"context.data = context.data || {};\n\nswitch (msg.topic) {\n case \"current\":\n context.data.current = msg.payload;\n msg = null;\n break;\n case \"degree\":\n context.data.degree = msg.payload;\n msg = null;\n break;\n \n default:\n msg = null;\n \tbreak;\n\n}\n\nif(context.data.current != null && context.data.degree != null ) {\n\tmsg2 = {};\n\tmsg2.topic=\"y\";\n msg2.payload = context.data.current * Math.cos((context.data.degree * Math.PI / 180));\n \n context.data=null;\n\treturn msg2;\n} ","outputs":1,"noerr":0,"x":634.2858238220215,"y":814.2858562469482,"wires":[["e11cf94c.523578"]]},{"id":"e11cf94c.523578","type":"ui_template","z":"fbe75c54.e3c0e","group":"fc2a66fe.300888","name":"Bubble Chart (static)","order":2,"width":"5","height":"5","format":"<canvas id=\"bubble-static\" width=\"1\" height=\"1\" style=\"border:1px solid #000000;\"></canvas>\n\n<script>\nnew Chart(document.getElementById(\"bubble-static\"), {\n type: 'bubble',\n data: {\n labels: \"label\",\n datasets: [\n {\n //label: [\"Current\"], \n //backgroundColor: \"rgba(72, 255, 70,1.0)\",\n //borderColor: \"#000\",\n data: [\n \t{x: \"X\", y: \"Y\", r:5 }\n\t\t ]\n }\n ]\n },\n options: {\n legend: {\n display: false, //true,\n labels: {\n fontColor: 'rgb(255, 99, 132)'\n }\n },\n title: {\n display: true,\n text: 'Ampere Chart Digital'\n }, scales: {\n yAxes: [{ \n scaleLabel: {\n display: false, //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":1021.4289169311523,"y":727.1430683135986,"wires":[[]]},{"id":"fc2a66fe.300888","type":"ui_group","z":"","name":"demo 1","tab":"2608e91.8178916","order":4,"disp":false,"width":"5","collapse":false},{"id":"2608e91.8178916","type":"ui_tab","z":"","name":"Well-1","icon":"dashboard"}]

5

Your flow can not be imported. Please edit your post and add three backtic's before and after the flow.

6

My apologize, Sir. Please check my edited post.

7

Your ui_template node is not complete, there is no logic in it, the </canvas> tag is missing.

In the bubble chart examples, look at Demo 2: dynamic to see how to dynamically build data for the chart.

8

I was just looking at http://www.chartjs.org/samples/latest/ and I don't think a radar chart is going to fit your expectations. You might want to look at the available charts before you go further.

Although, you might be able to change some of the options to get rid of the background graph and fill color, so the Radar chart may work for you after all.

Note: you will need to study the chartjs site to determine what/how to use the various options.