3

I am having issues using the em0ney:chartjs package, which is a meteor package to display graphic charts. I cant seem to be able to get any graphs to display inside the cavnvas/template. Can someone kindly help me.

Following is the code in my template:

<template name="detail">
    {{>chartCanvas2 id='chartCanvasId' width="300" height="400" }}
</template>

...and below my chartCanvas2 template:

<template name="chartCanvas2">
   <div id="graphs">
      Displaying from "chartCanvas2" template!
      {{myGraphix}}
   </div>   
</template>

and below my helper file:

Template.chartCanvas2.helpers({

'myGraphix' : function () {     
var chartCanvasId = new Chart(ctx, {
        type: 'bar',
        data:{
            labels: ["One", "Two", "Three" ],
         datasets: [{ 
                        label:"# of Votes",
                         data: [12, 34, 50],
          backgroundColor: [
            'rgba(255, 99, 132, 0.1)',
            'rgba(75, 299, 12, 0.1)',
            'rgba(25, 199, 32, 0.1)'
            ],           

         borderColor:[
            'rgba(52, 209, 12, 1)',
            'rgba(52, 209, 12, 1)',
            'rgba(52, 209, 12, 1)'
             ],

         borderWidth: 1
             }],

    },

    options: {
        scales: {
            yAxes:[{
                ticks: {
                    beginAtZero:true                    
                }   

                }]          
        }       
    }
});     
 return chartCanvasId;

},

});

Displaying from "chartCanvas2" template! Only displays in the canvas where the graph is suposted to display.

The error message in the console: Exception in template helper: ReferenceError: ctx is not defined

How do I fix this?

SirBT
  • 1,580
  • 5
  • 22
  • 51
  • Where is ctx defined? I see you using it on line 4 of your helper file, but no initialization. – Garmekain Apr 27 '17 at 20:01
  • It's never indicated in the package doc where to or how to define ctx... was hopping for someone who has prior experience using this package. – SirBT Apr 27 '17 at 20:02
  • 3
    It well may be the **context** of the canvas. Try putting `var ctx = document.getElementById("yourCanvasId").getContext("2d")` before usage. – Garmekain Apr 27 '17 at 20:04
  • @Garmekain followed your advise and tried: var ctx = getElementById("chartCanvasId).getContext("2d"); am getting error message: TypeError: cannot read property 'getContext' of null – SirBT Apr 27 '17 at 20:35
  • make sure you enter `document.` before `getElementById`. – Garmekain Apr 27 '17 at 21:41
  • @Garmekain sorry although I omitted it in the comment to you, I actually did in code and still get the same error message – SirBT Apr 28 '17 at 09:11
  • `TypeError: cannot read property 'getContext' of null` means that `document.getElementById("chartCanvasId")` is null, so `chartCanvasId` was not found in `document`. Maybe make another thread for this problem. – Garmekain Apr 28 '17 at 19:03

0 Answers0