Chartjs won't render chart with Requirejs

Question

I am trying to render a chart using Chartjs and Requirejs, but it fails to render or provide error messages. I know that I am probably tired and missing something obvious, but I can't seem to figure it out.

The line in my HTML to hold the canvas for the chart is as follows:

 <canvas id="canvas" height="450" width="600"></canvas>

My Requirejs file is as follows. It is here that I suspect the issue:

require.config({
paths: {
    jquery: "jquery-2.1.1.min",
    bootstrap: "bootstrap.min",
    chartjs: "Chart.min"
},
shim: {
    bootstrap: {
        deps: ['jquery'],
        exports: 'Bootstrap'
    },
}
});

requirejs(['bootstrap'], function (Bootstrap) {
return {};
});


require(['chartjs'], function (Chart) {
// Use Chart.js as normal here.
var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
var lineChartData = {
    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: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
        }
    ]

}

window.onload = function () {
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}
// Chart.noConflict restores the Chart global variable to it's previous owner
// The function returns what was previously Chart, allowing you to reassign.
var chartjs = Chart.noConflict();

});

If you are using Chart.js through bower, the version is outdated and *DOES NOT* support RequireJS. The latest version from GitHub does, so get that one. — Nikos Paraskevopoulos, Oct 18 '14 at 10:10
I pulled the one from GitHub (which is awesome by the way! Great work on this tool). It must be how I am trying to call it/load it because it doesn't show as called. Per Louis, I will try the jquery ready or requires domready — Kode, Oct 18 '14 at 14:12
If anyone using chart.js with angularjs using requirejs then please look over the, http://stackoverflow.com/questions/31288001/how-to-use-chart-js-with-angular-chart-using-requirejs — VBMali, Jul 13 '15 at 04:52

score 1 · Accepted Answer · answered Oct 18 '14 at 11:14

What you describe is consistent with the event handler you give to window.onload not being fired at all.

By the time RequireJS starts executing the code in your require(['chartjs'] call, the load event has most likely already happened. What you could do is use something like jQuery's ready or RequireJS' domReady.

By the way, this code is bizarre:

requirejs(['bootstrap'], function (Bootstrap) {
return {};
});

If you are just loading bootstrap, you could reduce it to requirejs(['bootstrap']). But note that all loads are asynchronous so the only thing this does is tell RequireJS to load Bootstrap, which will happen at some indeterminate point in the future.

Thankd for the clarity. I will try ready or domready and post what happens. — Kode, Oct 18 '14 at 14:13
If anyone using chart.js with angularjs using requirejs then please look over the, http://stackoverflow.com/questions/31288001/how-to-use-chart-js-with-angular-chart-using-requirejs — VBMali, Jul 13 '15 at 04:51

Chartjs won't render chart with Requirejs

1 Answers1