Chartjs with basic grid

I'm trying to run the ChartJS documentation chart example ( http://www.chartjs.org/docs/#line-chart ) using a trunk, but I can't figure out why it won't start, here's the code:

Mac:

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 am getting the error:

Uncaught TypeError: Unable to read property getContext of null

+3


source to share


2 answers


In addition to the 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 it helps you.

+4


source


Since it document.getElementById("myChart")

can't find canvas/myChart

it like in the script tag.

Try it,



var ctx = $($('#myChart-template').html()).children('#myChart').get(0).getContext("2d");

      

Hope this solves the problem. :)

0


source







All Articles