Payload in dashboard template script section

First: Forgive me that this is yet another question about getting a msg.payload into the dashboard template node. I have found all the others, I have read the official documentation (that was very unclear and kind of apologetic) and even when reading all of them, I dont get how this works. All the other problems that apparently were solved don't seem to translate into my situation and I haven't found an idiot proof guide on how this works. I will though, write an idiot proof guide (that should help all cases) at the end of this if someone helps me get this to work - and me to understand.

I am using the dashboard template node to draw a chartjs line chart. The data is provided by msg.payload as an array[100] and it has to be called in the <script> section of the node. To make things more difficult, I cannot call node.warn in the dashboard template node to home in on the problem.

I know that for doing this, you have to call the scope.$watch function. BUT I have seen a wide variety of ways that this is done - with no explanation on why and how.
I believe the closest I came to solving this is:

<script type="text/javascript" src=""></script>
.chartWrapper {
            position: relative;

        .chartWrapper > canvas {
            position: absolute;
            left: 0;
            top: 0;
            pointer-events: none;

        .chartAreaWrapper {
            width: 100%;
            overflow-x: scroll;

<div class="chartWrapper">
        <div class="chartAreaWrapper">
            <canvas id="myChart" height="300" width="4000"></canvas>
        <canvas id="myChartAxis" height="300" width="0"></canvas>

        var ctx = document.getElementById("myChart").getContext("2d");
        // these two manual dataholders do work
        var dataholder = [65, 59, 80, 81, 56, 55, 40, 55, 9, 24, 72, 38, 2, 120, 29];
        var labelholder = ["January", "February", "March", "April", "May", "June", "July", 55, 9, 24, 72, 38, 2, 120, 29 ];
        //these two dataholders for imported data, don't work
        var dataholder2 = [];
        var labelholder2 = [];
 //this is the function I am supposed to call. It is supposed to listen for msg.payload. This should then be stored in dataholder2       
(function(scope) {
        console.log('Position 1');
        scope.$watch('msg.payload', function(data) { // I have also seen this as scope.$watch('msg', function() 
            console.log('Position 2');
            dataholder2 = data;

        var data = {
          labels : labelholder, //can be switched from labelholder to labelholder2 for testing
          datasets: [{
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: dataholder2 //can be switched from dataholder to dataholder2 for testing

        new Chart(ctx).Line(data, {
          onAnimationComplete: function() {
            var sourceCanvas = this.chart.ctx.canvas;
            var copyWidth = this.scale.xScalePaddingLeft - 5;
            // the +5 is so that the bottommost y axis label is not clipped off
            // we could factor this in using measureText if we wanted to be generic
            var copyHeight = this.scale.endPoint + 5;
            var targetCtx = document.getElementById("myChartAxis").getContext("2d");
            targetCtx.canvas.width = copyWidth;
            targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);


So basically: it works when using dataholder. It goes blank when using dataholder2.
If somebody could point me out how to call and store msg.payload correctly, I would deeply appreciate it.

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