# Trouble updating chart.js chart with msg.payload

**URL:** <https://discourse.nodered.org/t/trouble-updating-chart-js-chart-with-msg-payload/8910>\
**Category:** Dashboard\
**Created:** [13 March 2019 04:20 UTC](https://discourse.nodered.org/t/trouble-updating-chart-js-chart-with-msg-payload/8910 "2019-03-13T04:20:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)\
**Post date:** [13 March 2019 04:20 UTC](https://discourse.nodered.org/t/trouble-updating-chart-js-chart-with-msg-payload/8910/1 "2019-03-13T04:20:44Z")

</div>

Hey there,  
I have a template node displaying a chart.js chart and it looks fine. I have a couple buttons in the template node calling functions that present different data points on the chart and the chart refreshes fine.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/81b7670ff6290028ceb9651acdaf785107666eac.png)

I also have javascript to watch the payload and assign it to a variable within the template node, and I have a function that sends the payload data to a debug node so I know the scope.watch is working.

```auto
(function(scope) {
 scope.$watch('msg.payload', function(data) {
 update(data);
 });
})(scope);

function update(dta) {
 theScope9.send({payload:dta});
 var chartData3 = dta;
}

```

But I am still unable to dynamically update the chart with data in the payload. Any ideas? I must be missing something simple here..

Here is the flow:

[{"id":"a05bfcf4.f96d9","type":"inject","z":"89c71f4d.aee79","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":640,"wires":[["88536d7f.433cb"]]},{"id":"88536d7f.433cb","type":"function","z":"89c71f4d.aee79","name":"","func":"msg.payload = [2000, 3000, 4000, 5000, 4000, 3000, 2000]\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":640,"wires":[["c507efda.59ccf"]]},{"id":"c507efda.59ccf","type":"ui\_template","z":"89c71f4d.aee79","group":"8fee23fd.be992","name":"","order":0,"width":"7","height":"6","format":"\n\n\n .container {\n width: 100%;\n height: 100%;\n }\n\n\n\n\<button id="renderBtn1"\>\n Render\n\n  
\n\<button id="renderBtn2"\>\n Render\n\n  
\n\<button id="renderBtn3"\>\n Render\n\n  
\n\<div class="container"\>\n \<canvas id="myChart"\>\n\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":440,"y":640,"wires":[["65803452.43a09c"]]},{"id":"65803452.43a09c","type":"debug","z":"89c71f4d.aee79","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":610,"y":640,"wires":},{"id":"8fee23fd.be992","type":"ui\_group","z":"","name":"Macleans","tab":"30f5297.19ef7d6","disp":false,"width":"7","collapse":false},{"id":"30f5297.19ef7d6","type":"ui\_tab","z":"","name":"Me","icon":"Remote Control","order":1,"disabled":false,"hidden":false}]

---

<div class="post-metadata">

**Author:** ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)\
**Post date:** [13 March 2019 04:26 UTC](https://discourse.nodered.org/t/trouble-updating-chart-js-chart-with-msg-payload/8910/2 "2019-03-13T04:26:17Z")

</div>

Cancel that.

I hadn't declared the chartData3 variable.

Here is the updated flow for poor souls reference:

```auto
[{"id":"a05bfcf4.f96d9","type":"inject","z":"89c71f4d.aee79","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":640,"wires":[["88536d7f.433cb"]]},{"id":"88536d7f.433cb","type":"function","z":"89c71f4d.aee79","name":"","func":"msg.payload = [2000, 3000, 4000, 5000, 4000, 3000, 2000]\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":640,"wires":[["c507efda.59ccf"]]},{"id":"c507efda.59ccf","type":"ui_template","z":"89c71f4d.aee79","group":"8fee23fd.be992","name":"","order":0,"width":"7","height":"6","format":"<script>\nvar chartData1 = [20000, 14000, 12000, 15000, 18000, 19000, 22000];\nvar chartData2 = [10000, 8000, 9000, 7000, 4000, 3000, 6000];\nvar chartData3 = [];\nvar theScope9 = scope;\nvar chartData = null;\n\n// Watch the payload and update\n(function(scope) {\n scope.$watch('msg.payload', function(data) {\n update(data);\n });\n})(scope);\n\nfunction update(dta) {\n theScope9.send({payload:dta});\n chartData3 = dta;\n}\n\nfunction renderChart(data, labels) {\n var ctx = document.getElementById(\"myChart\").getContext('2d');\n var myChart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: labels,\n datasets: [{\n label: 'This week',\n data: data,\n }]\n },\n });\n}\n\n$(\"#renderBtn1\").click(\n function () {\n data = chartData1;\n labels = [\"sunday\", \"monday\", \"tuesday\", \"wednesday\", \"thursday\", \"friday\", \"saturday\"];\n renderChart(data, labels);\n }\n);\n\n$(\"#renderBtn2\").click(\n function () {\n data = chartData2;\n labels = [\"sunday\", \"monday\", \"tuesday\", \"wednesday\", \"thursday\", \"friday\", \"saturday\"];\n renderChart(data, labels);\n }\n);\n\n$(\"#renderBtn3\").click(\n function () {\n data = chartData3;\n labels = [\"sunday\", \"monday\", \"tuesday\", \"wednesday\", \"thursday\", \"friday\", \"saturday\"];\n renderChart(data, labels);\n }\n);\n\n</script>\n\n<style>\n .container {\n width: 100%;\n height: 100%;\n }\n</style>\n\n\n<button id=\"renderBtn1\">\n Render1\n</button>\n<br>\n<button id=\"renderBtn2\">\n Render2\n</button>\n<br>\n<button id=\"renderBtn3\">\n Render3\n</button>\n<br>\n<div class=\"container\">\n <canvas id=\"myChart\"></canvas>\n</div>\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":440,"y":640,"wires":[["65803452.43a09c"]]},{"id":"65803452.43a09c","type":"debug","z":"89c71f4d.aee79","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":610,"y":640,"wires":[]},{"id":"8fee23fd.be992","type":"ui_group","z":"","name":"Macleans","tab":"30f5297.19ef7d6","disp":false,"width":"7","collapse":false},{"id":"30f5297.19ef7d6","type":"ui_tab","z":"","name":"Me","icon":"Remote Control","order":1,"disabled":false,"hidden":false}]

```

---

<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:** [13 March 2019 09:52 UTC](https://discourse.nodered.org/t/trouble-updating-chart-js-chart-with-msg-payload/8910/3 "2019-03-13T09:52:45Z")

</div>

@jmacle Joel could you go read [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506) and then edit your post and fix it so it can be imported. Thanks 😊

---

<div class="post-metadata">

**Author:** ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)\
**Post date:** [13 March 2019 18:56 UTC](https://discourse.nodered.org/t/trouble-updating-chart-js-chart-with-msg-payload/8910/4 "2019-03-13T18:56:28Z")

</div>

@zenofmud I just checked it and it looks good now? It appears a helpful character corrected it for me. Tks for the tip! Tks @dceejay😉

---

<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:** [9 February 2022 20:42 UTC](https://discourse.nodered.org/t/trouble-updating-chart-js-chart-with-msg-payload/8910/6 "2022-02-09T20:42:17Z")

</div>