Template Chart is not working in Dashboard-Chartjs

Dashboard
1

Hello,

I have been trying to display a chart in the dashboard, I used the template node in Function palette to create the chart, and points to template node in dashboard palette.
I am following this link, https://medium.com/javascript-in-plain-english/exploring-chart-js-e3ba70b07aa4

Code, In Function Template node-

<canvas id="myChart222" width=600 height =300></canvas>
<script>
var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');
var linecolors = ['#009900','#889900']

var ctx = document.getElementById('myChart222').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels:["part1", "part2"],
        datasets: [{
                label: 'This week',
                data: [10, 20],
                }]
            };
});
</script>

But, it shows no graph in the dashboard, I do not know what is not correct,
Is this the var ctx is not correct?
Help me solve this issue, thanks

2

Hi Raj,

A couple of things

  1. i believe you have to load the chart.js library in order for it to work
  2. you had an extra ; at the end of your data object property
  3. added the extra piece of code that can hadle the injection of messages

Ui-Template

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

<canvas id="myChart222" width=600 height=300></canvas>
<script>
var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');
var linecolors = ['#009900','#889900']

var ctx = document.getElementById('myChart222').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels:["part1", "part2"],
        datasets: [{
                label: 'This week',
                data: [10, 20]
                }]
            }
});
</script>


<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      console.log(msg.payload);
    }
  });
})(scope);
</script>
3

No you don't, you don't need the

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
4

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