# Create Circle Chart?

**URL:** <https://discourse.nodered.org/t/create-circle-chart/3102>\
**Category:** Dashboard\
**Created:** [13 September 2018 08:17 UTC](https://discourse.nodered.org/t/create-circle-chart/3102 "2018-09-13T08:17:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [13 September 2018 08:17 UTC](https://discourse.nodered.org/t/create-circle-chart/3102/1 "2018-09-13T08:17:46Z")

</div>

Hi Guys,

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b5a3eace313a9ac6132cfe86a957e547c414c229.png)

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [13 September 2018 09:33 UTC](https://discourse.nodered.org/t/create-circle-chart/3102/2 "2018-09-13T09:33:13Z")

</div>

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](https://discourse.nodered.org/t/has-anyone-created-a-scatter-bubble-plot/2583)

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [14 September 2018 07:22 UTC](https://discourse.nodered.org/t/create-circle-chart/3102/3 "2018-09-14T07:22:24Z")

</div>

Hi hotNipi,

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

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [14 September 2018 08:13 UTC](https://discourse.nodered.org/t/create-circle-chart/3102/4 "2018-09-14T08:13:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 September 2018 08:32 UTC](https://discourse.nodered.org/t/create-circle-chart/3102/5 "2018-09-14T08:32:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mrizkywiguna](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mrizkywiguna/32/32016_2.png) [@mrizkywiguna](https://discourse.nodered.org/u/mrizkywiguna)\
**Post date:** [14 September 2018 08:39 UTC](https://discourse.nodered.org/t/create-circle-chart/3102/6 "2018-09-14T08:39:18Z")

</div>

My apologize, Sir. Please check my edited post.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 September 2018 08:51 UTC](https://discourse.nodered.org/t/create-circle-chart/3102/7 "2018-09-14T08:51:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [14 September 2018 08:54 UTC](https://discourse.nodered.org/t/create-circle-chart/3102/8 "2018-09-14T08:54:43Z")

</div>

I was just looking at [http://www.chartjs.org/samples/latest/](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.