Trouble updating chart.js chart with msg.payload

Dashboard
1

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

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.

(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}]

2

Cancel that.

I hadn't declared the chartData3 variable.

Here is the updated flow for poor souls reference:

[{"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}]
1 Like
3

@jmacle Joel could you go read How to share code or flow json and then edit your post and fix it so it can be imported. Thanks :blush:

4

@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 :wink:

1 Like