Chartjs with Backbone

Question

I'm trying to run a Line Chart example of the documentation of ChartJS (http://www.chartjs.org/docs/#line-chart) using backbone but I can't figure why it not run, here is the code:

Backbone view:

var MyChartView = Backbone.View.extend({
    template: _.template($('#myChart-template').html()),
    render: function(){
        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            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: [65, 59, 80, 81, 56, 55, 40]
                }
            ]
        };
        var options = {

            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines : true,

            //String - Colour of the grid lines
            scaleGridLineColor : "rgba(0,0,0,.05)",

            //Number - Width of the grid lines
            scaleGridLineWidth : 1,

            //Boolean - Whether the line is curved between points
            bezierCurve : true,

            //Number - Tension of the bezier curve between points
            bezierCurveTension : 0.4,

            //Boolean - Whether to show a dot for each point
            pointDot : true,

            //Number - Radius of each point dot in pixels
            pointDotRadius : 4,

            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth : 1,

            //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
            pointHitDetectionRadius : 20,

            //Boolean - Whether to show a stroke for datasets
            datasetStroke : true,

            //Number - Pixel width of dataset stroke
            datasetStrokeWidth : 2,

            //Boolean - Whether to fill the dataset with a colour
            datasetFill : true,

            //String - A legend template
            legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

        };
        var ctx = document.getElementById("myChart").getContext("2d");
        var myLineChart = new Chart(ctx).Line(data, options);

        $(this.el).html(this.template());
}

});

Template:

<script id="myChart-template" type="text/template">
<div>
    <canvas id="myChart" width="400" height="400"></canvas>
</div>

I get the error message:

Uncaught TypeError: Cannot read property 'getContext' of null

Answer 1

Complementing to answers and comments of others, I get this solution:

var MyChartView = Backbone.View.extend({
    template: _.template($('#myChart-template').html()),
    render: function(){
        $(this.el).html(this.template());

        var data = ...
        var options = ...

        var ctx = $('#myChart', this,el)[0].getContext("2d");
        var myLineChart = new Chart(ctx).Line(data, options);
}

Hope this help you.