I read a lot of forum post about this topic like
I am trying to get an array of data to my primitive line chart expecting a data like this
[1, 2, 3, 4, 5]
I don't have any problem unless I try to use real data on my chart
I am getting this number from an api as a realtime number then I combine them with join node to make an array of 5 numbers, I can get the combined payload with
{{msg.combine}}
then I try to write contents of msg.combine to var combinegelen
but I stuck on this stage
can someone point me to the right direction about this situation,
thanks alot.
here is my template node code
<script>
const chartOptions = {
maintainAspectRatio: false,
legend: {
display: false,
},
tooltips: {
enabled: false,
},
elements: {
point: {
radius: 0
},
},
scales: {
xAxes: [{
gridLines: false,
scaleLabel: false,
ticks: {
display: false
}
}],
yAxes: [{
gridLines: false,
scaleLabel: false,
ticks: {
display: false,
suggestedMin: 0,
suggestedMax: 10
}
}]
}
};
//
var gelendata = [0, 5, 5, 5, 10],
var ctx = document.getElementById('chart1').getContext('2d');
var chart = new Chart(ctx, {
type: "line",
data: {
labels: [1, 2, 1, 3, 5],
datasets: [
{
backgroundColor: "rgba(101, 116, 205, 0.1)",
borderColor: "rgba(101, 116, 205, 0.8)",
borderWidth: 2,
data: gelendata,
},
],
},
options: chartOptions
});
</script>
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg) {
var gelendata = msg.combine;
}
});
})(scope);
</script>
<style>
.charticin {
height:75px;
}
</style>
<div class="charticin"><canvas id="chart1" height="75"></canvas></div>
here is my flow its actually bigger than this,
[{"id":"695a22bd.c6139c","type":"change","z":"acf5ea1.ce3e618","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"follower","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":580,"wires":[["5e91cf8d.baed5","263c0f92.34a488"]]},{"id":"5e91cf8d.baed5","type":"join","z":"acf5ea1.ce3e618","name":"","mode":"custom","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"5","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"num","reduceFixup":"","x":630,"y":580,"wires":[["2ccd05fc.fc7352","f7c9be4d.058a6"]]},{"id":"577fbc58.57302c","type":"inject","z":"acf5ea1.ce3e618","name":"65790","props":[{"p":"follower","v":"65790","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":150,"y":520,"wires":[["695a22bd.c6139c"]]},{"id":"b368e966.ca3be8","type":"inject","z":"acf5ea1.ce3e618","name":"66800","props":[{"p":"follower","v":"66800","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":150,"y":580,"wires":[["695a22bd.c6139c"]]},{"id":"917274ca.cd2da8","type":"inject","z":"acf5ea1.ce3e618","name":"66300","props":[{"p":"follower","v":"66300","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":150,"y":640,"wires":[["695a22bd.c6139c"]]},{"id":"2ccd05fc.fc7352","type":"debug","z":"acf5ea1.ce3e618","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":810,"y":740,"wires":[]},{"id":"263c0f92.34a488","type":"debug","z":"acf5ea1.ce3e618","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":590,"y":740,"wires":[]},{"id":"f7c9be4d.058a6","type":"change","z":"acf5ea1.ce3e618","name":"","rules":[{"t":"set","p":"combine","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":830,"y":580,"wires":[["1a0cd243.9c87fe"]]},{"id":"1a0cd243.9c87fe","type":"ui_template","z":"acf5ea1.ce3e618","group":"8f918d7.5af32f","name":"test template","order":1,"width":3,"height":4,"format":"<style>\n.chartss {\n position: relative;\n top:-100px;\n left: 0;\n bottom: 0;\n width: 100%;\n text-align: center;\n}\n</style>\n\n<script>\n const chartOptions = {\n maintainAspectRatio: false,\n legend: {\n display: false,\n },\n tooltips: {\n enabled: false,\n },\n elements: {\n point: {\n radius: 0\n },\n },\n scales: {\n xAxes: [{\n gridLines: false,\n scaleLabel: false,\n ticks: {\n display: false\n }\n }],\n yAxes: [{\n gridLines: false,\n scaleLabel: false,\n ticks: {\n display: false,\n suggestedMin: 0,\n suggestedMax: 10\n }\n }]\n }\n};\n//\nvar ctx = document.getElementById('chart1').getContext('2d');\nvar chart = new Chart(ctx, {\n type: \"line\",\n data: {\n labels: [1, 2, 1, 3, 5],\n datasets: [\n {\n backgroundColor: \"rgba(101, 116, 205, 0.1)\",\n borderColor: \"rgba(101, 116, 205, 0.8)\",\n borderWidth: 2,\n data: [0, 5, 5, 5, 10],\n },\n ],\n },\n options: chartOptions\n});\n\n \n</script>\n \n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n var gelendata = msg.combine;\n }\n });\n})(scope);\n</script> \n<style>\n.charticin {\nheight:75px;\n\n}\n.testcontainer {\nheight:300px;\n\n}\n</style>\n <div class=\"charticin\"><canvas id=\"chart1\" height=\"75\"></canvas></div>\n\n <div class=\"testcontainer\">\n {{msg.combine}}\n \n <p class=\"takip\"><b>{{msg.follower}}</b></p>\n </div>\n ","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":1070,"y":580,"wires":[[]]},{"id":"8f918d7.5af32f","type":"ui_group","name":"all","tab":"c1dcfb03.ffed9","order":5,"disp":false,"width":13,"collapse":false},{"id":"c1dcfb03.ffed9","type":"ui_tab","name":"dash","icon":"dashboard","order":1}]
