# Need to help edit funtion UI Template send payload to gauge

**URL:** https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034
**Category:** Dashboard
**Created:** [26 August 2020 09:37 UTC](https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034 "2020-08-26T09:37:52Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![chawana](https://avatars.discourse-cdn.com/v4/letter/c/ecccb3/32.png) [@chawana](https://discourse.nodered.org/u/chawana)
#### Post date: [26 August 2020 09:37 UTC](https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034/1 "2020-08-26T09:37:52Z")

</div>

[  
{  
"id": "4e028e5a.e8527",  
"type": "ui\_template",  
"z": "fb8fbe0d.771ea",  
"group": "48190cbf.587d84",  
"name": "",  
"order": 4,  
"width": 0,  
"height": 0,  
"format": "\n\<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)"\>\n\<head runat="server"\>\n\<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/\>\nMedidor Temperatura, Humedad\n\<script src="[https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js](https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js)"\>\n\n\n\<script type="text/javascript"\nsrc="[https://www.gstatic.com/charts/loader.js](https://www.gstatic.com/charts/loader.js)"\>\n\n\<script type="text/javascript"\>\n google.charts.load('current', {\n packages: ['gauge']\n}).then(function () {\n var dataHumid = google.visualization.arrayToDataTable([\n ['Label', 'Value'],\n ['Humid', 0]\n ]);\n\n var dataTemp = google.visualization.arrayToDataTable([\n ['Label', 'Value'],\n ['Temp', 0]\n ]);\n\n var optionsHumid = {\n width: 170, height: 170,\n redFrom: 0, redTo: 33,\n yellowFrom: 33, yellowTo: 66,\n greenFrom: 66, greenTo: 100,\n majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'],\n minorTicks: 10\n };\n\n var formatHumid = new google.visualization.NumberFormat({\n suffix: '%',\n fractionDigits: 1\n });\n formatHumid.format(dataHumid, 1);\n\n var optionsTemp = {\n width: 170, height: 170,\n redFrom: 30, redTo: 45,\n yellowFrom: 24, yellowTo: 30,\n greenFrom: 12, greenTo: 24,\n majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'],\n minorTicks: 10\n };\n\n var formatTemp = new google.visualization.NumberFormat({\n suffix: 'h',\n fractionDigits: 1\n });\n formatTemp.format(dataTemp, 1);\n\n var chartHumid = new google.visualization.Gauge(document.getElementById("chart\_Humid"));\n var chartTemp = new google.visualization.Gauge(document.getElementById("chart\_Temp"));\n\n chartHumid.draw(dataHumid, optionsHumid);\n chartTemp.draw(dataTemp, optionsTemp);\n\n setInterval(function() {\n /\*\n var JSON=.ajax({\n url:\"sensores.php\",\n dataType: 'json',\n async: false}).responseText;\n var Respuesta=jQuery.parseJSON(JSON);\n dataHumid.setValue(0, 1, Respuesta[0].humidity);\n \*/\n dataHumid.setValue(0, 1, 74.9);\n formatHumid.format(dataHumid, 1);\n chartHumid.draw(dataHumid, optionsHumid);\n }, 1300);\n\n setInterval(function() {\n /\*\n var JSON=.ajax({\n url:"sensores.php",\n dataType: 'json',\n async: false}).responseText;\n var Respuesta=jQuery.parseJSON(JSON);\n dataTemp.setValue(0, 1, Respuesta[0].temperature);\n \*/\n dataTemp.setValue(0, 1, 27.5);\n formatTemp.format(dataTemp, 1);\n chartTemp.draw(dataTemp, optionsTemp);\n }, 1300);\n});",  
"storeOutMessages": true,  
"fwdInMessages": true,  
"resendOnRefresh": true,  
"templateScope": "local",  
"x": 490,  
"y": 220,  
"wires": [  
  
]  
},  
{  
"id": "48190cbf.587d84",  
"type": "ui\_group",  
"z": "",  
"name": "Default",  
"tab": "711389cf.7d4e18",  
"order": 1,  
"disp": true,  
"width": "25",  
"collapse": false  
},  
{  
"id": "711389cf.7d4e18",  
"type": "ui\_tab",  
"z": "",  
"name": "Home1",  
"icon": "dashboard",  
"disabled": false,  
"hidden": false  
}  
]

---

<div class="post-metadata">

### Author: ![chawana](https://avatars.discourse-cdn.com/v4/letter/c/ecccb3/32.png) [@chawana](https://discourse.nodered.org/u/chawana)
#### Post date: [26 August 2020 09:40 UTC](https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034/2 "2020-08-26T09:40:19Z")

</div>

i'am brginer for use NR, please help me for modify node tempate whene sending data showing in gauge Thanks....

---

<div class="post-metadata">

### Author: ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)
#### Post date: [26 August 2020 09:45 UTC](https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034/3 "2020-08-26T09:45:33Z")

</div>

Hi,

Nobody can load your flow.  
Can you please place the code between " ``` "?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4a86d002b817d2d51c9b5d53b3a2f784e1c1a3f4.png)

Thx.

---

<div class="post-metadata">

### Author: ![chawana](https://avatars.discourse-cdn.com/v4/letter/c/ecccb3/32.png) [@chawana](https://discourse.nodered.org/u/chawana)
#### Post date: [26 August 2020 09:47 UTC](https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034/4 "2020-08-26T09:47:15Z")

</div>

```auto
[{"id":"4e028e5a.e8527","type":"ui_template","z":"fb8fbe0d.771ea","group":"48190cbf.587d84","name":"","order":4,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\n<head runat=\"server\">\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>\n<title>Medidor Temperatura, Humedad</title>\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js\">\n</script>\n\n<script type=\"text/javascript\"\nsrc=\"https://www.gstatic.com/charts/loader.js\"></script>\n\n<script type=\"text/javascript\">\n google.charts.load('current', {\n packages: ['gauge']\n}).then(function () {\n var dataHumid = google.visualization.arrayToDataTable([\n ['Label', 'Value'],\n ['Humid', 0]\n ]);\n\n var dataTemp = google.visualization.arrayToDataTable([\n ['Label', 'Value'],\n ['Temp', 0]\n ]);\n\n var optionsHumid = {\n width: 170, height: 170,\n redFrom: 0, redTo: 33,\n yellowFrom: 33, yellowTo: 66,\n greenFrom: 66, greenTo: 100,\n majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'],\n minorTicks: 10\n };\n\n var formatHumid = new google.visualization.NumberFormat({\n suffix: '%',\n fractionDigits: 1\n });\n formatHumid.format(dataHumid, 1);\n\n var optionsTemp = {\n width: 170, height: 170,\n redFrom: 30, redTo: 45,\n yellowFrom: 24, yellowTo: 30,\n greenFrom: 12, greenTo: 24,\n majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'],\n minorTicks: 10\n };\n\n var formatTemp = new google.visualization.NumberFormat({\n suffix: 'h',\n fractionDigits: 1\n });\n formatTemp.format(dataTemp, 1);\n\n var chartHumid = new google.visualization.Gauge(document.getElementById(\"chart_Humid\"));\n var chartTemp = new google.visualization.Gauge(document.getElementById(\"chart_Temp\"));\n\n chartHumid.draw(dataHumid, optionsHumid);\n chartTemp.draw(dataTemp, optionsTemp);\n\n setInterval(function() {\n /*\n var JSON=$.ajax({\n url:\"sensores.php\",\n dataType: 'json',\n async: false}).responseText;\n var Respuesta=jQuery.parseJSON(JSON);\n dataHumid.setValue(0, 1, Respuesta[0].humidity);\n */\n dataHumid.setValue(0, 1, 74.9);\n formatHumid.format(dataHumid, 1);\n chartHumid.draw(dataHumid, optionsHumid);\n }, 1300);\n\n setInterval(function() {\n /*\n var JSON=$.ajax({\n url:\"sensores.php\",\n dataType: 'json',\n async: false}).responseText;\n var Respuesta=jQuery.parseJSON(JSON);\n dataTemp.setValue(0, 1, Respuesta[0].temperature);\n */\n dataTemp.setValue(0, 1, 27.5);\n formatTemp.format(dataTemp, 1);\n chartTemp.draw(dataTemp, optionsTemp);\n }, 1300);\n});\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":220,"wires":[[]]},{"id":"48190cbf.587d84","type":"ui_group","z":"","name":"Default","tab":"711389cf.7d4e18","order":1,"disp":true,"width":"25","collapse":false},{"id":"711389cf.7d4e18","type":"ui_tab","z":"","name":"Home1","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![chawana](https://avatars.discourse-cdn.com/v4/letter/c/ecccb3/32.png) [@chawana](https://discourse.nodered.org/u/chawana)
#### Post date: [26 August 2020 09:54 UTC](https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034/5 "2020-08-26T09:54:05Z")

</div>

@ArneR So thanks...

---

<div class="post-metadata">

### Author: ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)
#### Post date: [26 August 2020 09:56 UTC](https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034/6 "2020-08-26T09:56:45Z")

</div>

I suspect this is not your full flow?  
Can you share the full flow?

---

<div class="post-metadata">

### Author: ![chawana](https://avatars.discourse-cdn.com/v4/letter/c/ecccb3/32.png) [@chawana](https://discourse.nodered.org/u/chawana)
#### Post date: [26 August 2020 09:59 UTC](https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034/7 "2020-08-26T09:59:33Z")

</div>

[flows (3).json](https://discourse.nodered.org/uploads/short-url/lJ5cH3qDr08qrVcPeIGDg3Lb6Xd.json) (3.1 KB)

---

<div class="post-metadata">

### Author: ![chawana](https://avatars.discourse-cdn.com/v4/letter/c/ecccb3/32.png) [@chawana](https://discourse.nodered.org/u/chawana)
#### Post date: [26 August 2020 10:01 UTC](https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034/8 "2020-08-26T10:01:59Z")

</div>

@ArneR this is as flows(3) is full flow and just send data from msg.payload to guage value

Thanks in avd

---

<div class="post-metadata">

### Author: ![ArneR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arner/32/95658_2.png) [@ArneR](https://discourse.nodered.org/u/ArneR)
#### Post date: [26 August 2020 10:34 UTC](https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034/9 "2020-08-26T10:34:02Z")

</div>

Someone else will have to help, I'm afraid.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [25 September 2020 10:34 UTC](https://discourse.nodered.org/t/need-to-help-edit-funtion-ui-template-send-payload-to-gauge/32034/10 "2020-09-25T10:34:04Z")

</div>

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