canvasjs render is not a function

Question

I'm trying to create a chart using CanvasJS but I'm getting the following error:

Uncaught TypeError: b[a].render is not a function
    w.render    @   canvasjs.min.js:84
    Aa.Chart.render @   canvasjs.min.js:412
    window.onload   @   statistics:107

The code is the example code found on their website:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
        title:{
            text: "Number of Students in Each Room"
        },
        axisX:{
            title: "Rooms"
        },
        axisY:{
            title: "percentage"
        },
        data: [
        {
            type: "stackedColumn100",
            legendText: "Boys",
            showInLegend: "true",
            indexLabel: "#percent %",
            indexLabelPlacement: "inside",
            indexLabelFontColor: "white",
            dataPoints: [
                {  y: 40, label: "Cafeteria"},
                {  y: 10, label: "Lounge" },
                {  y: 72, label: "Games Room" },
                {  y: 30, label: "Lecture Hall" },
                {  y: 21, label: "Library"}
            ]
        },
        {
            type: "stackedColumn100",
            legendText: "Girls",
            showInLegend: "true",
            indexLabel: "#percent %",
            indexLabelPlacement: "inside",
            indexLabelFontColor: "white",
            dataPoints: [
                {  y: 20, label: "Cafeteria"},
                {  y: 14, label: "Lounge" },
                {  y: 40, label: "Games Room" },
                {  y: 43, label: "Lecture Hall" },
                {  y: 17, label: "Library"}
            ]
        }
        ]
    });
    chart.render();
    }
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

I've tried the same code on my machine and it's working fine, but when I upload it to my server, then I'm getting the previously mentioned error.

Does anyone has any idea what is wrong here?

Thanks!

score 1 · Accepted Answer · edited May 23 '17 at 12:14

The issue is a bug in Canvas.js - they are using "for...in" to iterate over an array, but if any other Javascript has extended the Array prototype they mistakenly assume the array is non-empty and you get the error (see Why is using "for...in" with array iteration a bad idea? for a discussion about this type of problem).

See my bug report: http://canvasjs.com/forums/topic/canvas-js-javascript-bug/ and fiddle reproducing this: http://jsfiddle.net/QwZuf/298/

If you're willing to use the non-minified code temporarily, you can patch this yourself by using "canvasjs.js" and locating the following (line 2406 in 1.7.0 GA):

for (index in plotAreaElements) {
  plotAreaElements[index].render();
}

Wrap it in a simple length test and you should be fine until an official patch is available:

if (plotAreaElements.length > 0) {
    for (index in plotAreaElements) {
        plotAreaElements[index].render();
    }
}

Edit: per the comment below, this bug has now been officially patched.

This has been fixed in 1.7.5 and will not be in 1.8.0GA. Please refer [this](http://canvasjs.com/forums/topic/canvas-js-javascript-bug/#post-9488). — Naveen V, Oct 19 '15 at 11:49

canvasjs render is not a function

1 Answers1

Linked