# Template node and chartjs data problem

**URL:** https://discourse.nodered.org/t/template-node-and-chartjs-data-problem/42772
**Category:** Dashboard
**Created:** [17 March 2021 13:53 UTC](https://discourse.nodered.org/t/template-node-and-chartjs-data-problem/42772 "2021-03-17T13:53:59Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![umtksa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/umtksa/32/38322_2.png) [@umtksa](https://discourse.nodered.org/u/umtksa)
#### Post date: [17 March 2021 13:53 UTC](https://discourse.nodered.org/t/template-node-and-chartjs-data-problem/42772/1 "2021-03-17T13:53:59Z")

</div>

I read a lot of forum post about this topic [like](https://discourse.nodered.org/t/template-chart-is-not-working-in-dashboard-chartjs/36368)  
I am trying to get an array of data to my primitive line chart expecting a data like this

```auto
[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

```auto
{{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

```auto
<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,

```auto
[{"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}]

```

---

<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: [16 April 2021 13:54 UTC](https://discourse.nodered.org/t/template-node-and-chartjs-data-problem/42772/2 "2021-04-16T13:54:02Z")

</div>

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