# Can some one help me get msg.payload to data

**URL:** <https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783>\
**Category:** Dashboard\
**Created:** [29 June 2021 10:05 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783 "2021-06-29T10:05:25Z")\
**Posts on this page:** 12\
**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:** [29 June 2021 10:05 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/1 "2021-06-29T10:05:25Z")

</div>

Can some one help me get msg.payload to data dataTemp to function(scope) many Thanks...  
i am beginner for node red ui code  
Code:

```auto
[{"id":"66cb4ef1.3afa9","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"72261d28.63ecb4","type":"function","z":"66cb4ef1.3afa9","name":"randomData_0..100","func":"msg.payload = Math.round(Math.random()*100);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":320,"y":180,"wires":[["7e6cded5.84a1f"]]},{"id":"7e6cded5.84a1f","type":"ui_template","z":"66cb4ef1.3afa9","group":"48190cbf.587d84","name":"","order":4,"width":"14","height":"6","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 var ddt = 0;\n var ddt1 = 1;\n var ddt2 = 44;\n \n \n chartHumid.draw(dataHumid, optionsHumid);\n chartTemp.draw(dataTemp, optionsTemp);\n \n\n \n\n \n \n(function() {\n var count = 0\n function testit(msg,scope) {\n count = count+1;\n console.log(\"In testit \" + msg.payload + \" count = \" + count);\n scope.send({payload: \"from testit \" + msg.payload + \" count = \" + count});\n \n }\n var _data;\n (function(scope) {\n var _this = this;\n scope.$watch('msg.payload', function(data) {\n _this._data = dataTemp;\n });\n })(scope);\n \n \n \n\n});\n\n\nsetInterval(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\n})();\n</script>\n</head>\n<body>\n <p>{{msg.payload}}</p>\n <div class=\"gauge\" id=\"chart_Humid\"></div>\n <div class=\"gauge\" id=\"chart_Temp\"></div>\n</body>\n</html>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":600,"y":180,"wires":[[]]},{"id":"1f6219.ab303de7","type":"inject","z":"66cb4ef1.3afa9","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":110,"y":180,"wires":[["72261d28.63ecb4"]]},{"id":"505efa6c.0e9bd4","type":"ui_template","z":"66cb4ef1.3afa9","d":true,"group":"48190cbf.587d84","name":"","order":4,"width":"14","height":"6","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 var ddt = 0;\n var ddt1 = 1;\n var ddt2 = 44;\n \n \n chartHumid.draw(dataHumid, optionsHumid);\n chartTemp.draw(dataTemp, optionsTemp);\n \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, 33);\n formatHumid.format(dataHumid, 1);\n chartHumid.draw(dataHumid, optionsHumid);\n \n \n \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(function() {\n var count = 0\n function testit(msg,scope) {\n count = count+1;\n console.log(\"In testit \" + msg.payload + \" count = \" + count);\n scope.send({payload: \"from testit \" + msg.payload + \" count = \" + count});\n \n }\n \n (function(scope) {\n scope.send({payload: \"preload\"}); // this gets sent when the view is opened in the browser\n scope.$watch('msg', function(msg) {\n if (msg) {\n testit(msg, scope);\n \n }\n });\n })(scope); \n\n});\n\n\n})();\n</script>\n</head>\n<body>\n <p>{{msg.payload}}</p>\n <div class=\"gauge\" id=\"chart_Humid\"></div>\n <div class=\"gauge\" id=\"chart_Temp\"></div>\n</body>\n</html>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":780,"y":80,"wires":[[]]},{"id":"48190cbf.587d84","type":"ui_group","name":"Default","tab":"711389cf.7d4e18","order":1,"disp":true,"width":"25","collapse":false},{"id":"711389cf.7d4e18","type":"ui_tab","name":"Home1","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [29 June 2021 10:37 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/2 "2021-06-29T10:37:39Z")

</div>

Way above my skill set.

But I think near the top of the code in the node you need to get the `msg.payload` and make it _visible_ for use later on.

eg:  
`var myVale = msg.payload`

Then when you want to access the incoming _value_ use `myValue` in the formula.

Hope that helps.  
But that code is WAY above me.

---

<div class="post-metadata">

**Author:** ![craigcurtin](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)\
**Post date:** [30 June 2021 00:03 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/3 "2021-06-30T00:03:19Z")

</div>

Can you explain what you are trying to achieve ?

Firstly you set a boolean in the Inject node to true - but then do not seem to do anything with it

You then generate a random number in function node - and overwrite the boolean you first set

What are you trying to achieve ?

Craig

---

<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:** [30 June 2021 06:54 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/4 "2021-06-30T06:54:50Z")

</div>

I attemping send msg.payload to gauge data with real time also data set is try reandom send to gauge

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 June 2021 07:32 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/5 "2021-06-30T07:32:28Z")

</div>

Number of issues...

```auto
        scope.$watch('msg.payload', function(data) {
            _this._data = dataTemp;
        })

```

1. `scope.$watch('msg.payload', function(data)` - this should be `scope.$watch('msg', function(data)` (see the template node built in help
2. Where does `dataTemp` come from? Your function signature is set to return `data`!

```auto
 google.charts.load('current', {
    packages: ['gauge']
  }).then(function () {

```

1. You never close the bracket of the `then` callback - the closing `}` is missing

* * *

Actually, I give up. Too many bits of code out of place.

Question: Why not use the built in chart?

Question: If you want help with google charts, where did you pull that example code from (I will attempt to fix it up from a working example)

---

<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:** [30 June 2021 08:05 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/6 "2021-06-30T08:05:02Z")

</div>

Hi Steve

Thanks for you help me

```auto
[{"id":"66cb4ef1.3afa9","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"72261d28.63ecb4","type":"function","z":"66cb4ef1.3afa9","name":"randomData_0..100","func":"msg.payload = Math.round(Math.random()*100);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":320,"y":180,"wires":[["7e6cded5.84a1f"]]},{"id":"7e6cded5.84a1f","type":"ui_template","z":"66cb4ef1.3afa9","group":"48190cbf.587d84","name":"","order":4,"width":"14","height":"6","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 var ddt = 0;\n var ddt1 = 1;\n var ddt2 = 44;\n \n \n chartHumid.draw(dataHumid, optionsHumid);\n chartTemp.draw(dataTemp, optionsTemp);\n \n\n \n\n \n \n(function() {\n var count = 0\n function testit(msg,scope) {\n count = count+1;\n console.log(\"In testit \" + msg.payload + \" count = \" + count);\n scope.send({payload: \"from testit \" + msg.payload + \" count = \" + count});\n \n }\n var _data;\n (function(scope) {\n var _this = this;\n scope.$watch('msg.payload', function(data) {\n _this._data = dataTemp;\n });\n })(scope);\n \n \n \n\n});\n\n\nsetInterval(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\n})();\n</script>\n</head>\n<body>\n <p>{{msg.payload}}</p>\n <div class=\"gauge\" id=\"chart_Humid\"></div>\n <div class=\"gauge\" id=\"chart_Temp\"></div>\n</body>\n</html>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":600,"y":180,"wires":[[]]},{"id":"1f6219.ab303de7","type":"inject","z":"66cb4ef1.3afa9","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":110,"y":180,"wires":[["72261d28.63ecb4"]]},{"id":"505efa6c.0e9bd4","type":"ui_template","z":"66cb4ef1.3afa9","d":true,"group":"48190cbf.587d84","name":"","order":4,"width":"14","height":"6","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 var ddt = 0;\n var ddt1 = 1;\n var ddt2 = 44;\n \n \n chartHumid.draw(dataHumid, optionsHumid);\n chartTemp.draw(dataTemp, optionsTemp);\n \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, 33);\n formatHumid.format(dataHumid, 1);\n chartHumid.draw(dataHumid, optionsHumid);\n \n \n \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(function() {\n var count = 0\n function testit(msg,scope) {\n count = count+1;\n console.log(\"In testit \" + msg.payload + \" count = \" + count);\n scope.send({payload: \"from testit \" + msg.payload + \" count = \" + count});\n \n }\n \n (function(scope) {\n scope.send({payload: \"preload\"}); // this gets sent when the view is opened in the browser\n scope.$watch('msg', function(msg) {\n if (msg) {\n testit(msg, scope);\n \n }\n });\n })(scope); \n\n});\n\n\n})();\n</script>\n</head>\n<body>\n <p>{{msg.payload}}</p>\n <div class=\"gauge\" id=\"chart_Humid\"></div>\n <div class=\"gauge\" id=\"chart_Temp\"></div>\n</body>\n</html>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":780,"y":80,"wires":[[]]},{"id":"48190cbf.587d84","type":"ui_group","name":"Default","tab":"711389cf.7d4e18","order":1,"disp":true,"width":"25","collapse":false},{"id":"711389cf.7d4e18","type":"ui_tab","name":"Home1","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 June 2021 08:07 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/7 "2021-06-30T08:07:17Z")

</div>

The flow you have posted is the same as last time - still lots of errors!

I will help if you answer the questions...

> [@Steve-Mcl](#):
>
> Question: Why not use the built in chart?
> 
> Question: If you want help with google charts, where did you pull that example code from (I will attempt to fix it up from a working example)

---

<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:** [30 June 2021 08:15 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/8 "2021-06-30T08:15:40Z")

</div>

Question: Why not use the built in chart? The chart in dashboard is working for me, i am beginner java script in ui node. i will try with you recooment and consult you?

---

<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:** [30 June 2021 09:43 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/9 "2021-06-30T09:43:51Z")

</div>

as link

> **[Visualization: Gauge  |  Charts  |  Google Developers](https://developers.google.com/chart/interactive/docs/gallery/gauge)**

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 June 2021 10:52 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/10 "2021-06-30T10:52:21Z")

</div>

Here, this will get you going...

![DMGmVupL1v](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/4/a4af82e8a1c0587de288450952f1a9bd2046b67b.gif)

```auto
[{"id":"600544fec28e6bf4","type":"ui_template","z":"f993f14ce98bb2ad","group":"48190cbf.587d84","name":"gauges","order":4,"width":"8","height":"11","format":"\n\n<div id=\"humid_chart\"></div>\n<div id=\"temp_chart\"></div>\n\n<script type=\"text/javascript\">\n(function(scope) {\n\n var _scope = scope;\n\n var humid_chart;\n var humid_data;\n var humid_formatter;\n var humid_options = {\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 temp_chart;\n var temp_data;\n var temp_formatter;\n var temp_options = {\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 \n _scope.$watch('msg', function(msg) {\n if(msg && msg.topic && typeof msg.payload == \"number\") {\n if(msg.topic == \"humid\") {\n if(humid_chart) {\n humid_data.setValue(0, 1, msg.payload);\n humid_formatter.format(humid_data, 1);\n humid_chart.draw(humid_data, humid_options);\n }\n }\n if(msg.topic == \"temp\") {\n if(temp_chart) {\n temp_data.setValue(0, 1, msg.payload);\n temp_formatter.format(temp_data, 1);\n temp_chart.draw(temp_data, humid_options);\n }\n }\n }\n });\n\n\n\n google.charts.load('current', {'packages':['gauge']});\n google.charts.setOnLoadCallback(initCharts);\n\n function initCharts(){\n initHumid();\n initTemp();\n }\n\n function initHumid() {\n humid_data = google.visualization.arrayToDataTable([\n ['Label', 'Value'],\n ['Humid', 0],\n ]);\n humid_formatter = new google.visualization.NumberFormat({\n suffix: '%',\n fractionDigits: 1\n });\n humid_chart = new google.visualization.Gauge(document.getElementById('humid_chart'));\n }\n\n function initTemp() {\n temp_data = google.visualization.arrayToDataTable([\n ['Label', 'Value'],\n ['Temp', 0],\n ]);\n\n\n temp_formatter = new google.visualization.NumberFormat({\n suffix: 'H',\n fractionDigits: 1\n });\n temp_chart = new google.visualization.Gauge(document.getElementById('temp_chart'));\n }\n \n\n})(scope);\n\n</script> ","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":360,"y":220,"wires":[[]]},{"id":"db2ebb0bf6ea1b1b","type":"inject","z":"f993f14ce98bb2ad","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":110,"y":180,"wires":[["217fc1249c6f5e1f"]]},{"id":"217fc1249c6f5e1f","type":"function","z":"f993f14ce98bb2ad","name":"randomData_0..100","func":"var msg1 = {};\nmsg1.topic = \"humid\";\nmsg1.payload = Math.round(Math.random()*100);\n\nvar msg2 = {};\nmsg2.topic = \"temp\";\nmsg2.payload = Math.round(Math.random()*100);\n\nreturn [[msg1, msg2]];","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":330,"y":160,"wires":[["600544fec28e6bf4"]]},{"id":"bc6084bef1b6920e","type":"ui_button","z":"f993f14ce98bb2ad","name":"","group":"48190cbf.587d84","order":1,"width":"3","height":"1","passthru":false,"label":"random values","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":120,"y":140,"wires":[["217fc1249c6f5e1f"]]},{"id":"9b505bb01ec73ec2","type":"ui_template","z":"f993f14ce98bb2ad","group":"dce9e7a2.d20c78","name":"head script","order":8,"width":0,"height":0,"format":"<script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":350,"y":100,"wires":[[]]},{"id":"48190cbf.587d84","type":"ui_group","name":"Default","tab":"711389cf.7d4e18","order":1,"disp":true,"width":"25","collapse":false},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"9","collapse":false},{"id":"711389cf.7d4e18","type":"ui_tab","name":"Home1","icon":"dashboard","disabled":false,"hidden":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","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:** [1 July 2021 01:09 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/11 "2021-07-01T01:09:24Z")

</div>

Thank you so much Steve for you help me

---

<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:** [31 July 2021 01:09 UTC](https://discourse.nodered.org/t/can-some-one-help-me-get-msg-payload-to-data/47783/12 "2021-07-31T01:09:48Z")

</div>

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