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="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<style>
.chartWrapper {
position: relative;
}
.chartWrapper > canvas {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.chartAreaWrapper {
width: 100%;
overflow-x: scroll;
}
</style>
<div class="chartWrapper">
<div class="chartAreaWrapper">
<canvas id="myChart" height="300" width="4000"></canvas>
</div>
<canvas id="myChartAxis" height="300" width="0"></canvas>
</div>
<script>
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');
console.dir(scope);
scope.$watch('msg.payload', function(data) { // I have also seen this as scope.$watch('msg', function()
console.log('Position 2');
console.dir(data);
dataholder2 = data;
});
})(scope);
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);
}
});
</script>
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.
