HighCharts.js is not rendering chart under IE8

Question

I am using HighCharts together with Python to dynamically create charts. All works fine, however I get cannot read property "0" of undefined exception under IE8. Unfortunetly my client want it to work under IE8 as well. So heres the code of the main function:

function generateChart(series) {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'company_chart',
        },
        xAxis: {
            type: "datetime",
        },
        yAxis: [{
            title: {
                text: "T1",
                },
            },{
            title: {
                text: "T2",
                },
            },
            opposite: true,
        }],
        plotOptions: {
            series: { shadow: false },
            column: { shadow: false, },
        },
        series: series
    });
);

Now my ajax request returns some data and I store it in the variable like this:

chart_data = [
    {
        type: "spline",
        color: '#ff0000',
        yAxis: 0,
        data: dataT1,
    },
    {
        type: "column",
        color: '#0000ff',
        yAxis: 1,
        data: dataT2,
    }
];

After that I call generateChart(chart_data);. The format of variables dataT1 and dataT2 is fine, since it works under every other browser. For example dataT1 may look like this:

dataT1 = [ [1325721600000,1.64],
           [1325635200000,1.64],
           [1325548800000,1.7],
           [1325462400000,1.7],];

But still the exception is thrown under IE8. Any ideas how to fix this?

Solution

Those dangling commas are causing errors in Internet Explorer. Get rid of them.

Here's an example:

    chart: {
        renderTo: 'company_chart', // <--- get rid of that comma
    },

Internet Explorer considers a comma at the end of an object literal like that to be an error. You should in fact be seeing the "Errors on page" warning, but the error is usually something that does not indicate this actual root cause.

edit — well apparently IE8 is not picky about that, though IE7 is.

edit again — However, IE8 interprets that last dangling comma in your data arrays as meaning that there should be an extra element! In other words:

 [1, 2, 3,].length

is 3 in Firefox/Chrome/Safari but it's 4 in Internet Explorer. When you try to access that element, the browser gives you undefined.

Comments

[freakish]

I thought about it too, but this seems to be fixed under IE8 and later, since quick debug shows that this code throws no exception and works fine. And even if it did, then I would get different exception, wouldn't I?

[Pointy]

Well it's definitely wrong for IE before version 8, and I'm suspicious about it working in IE8. I'll try it however.

[Pointy]

Well yes you're right, hallelujah for that. IE8 doesn't seem to mind. However, if I flip IE8 into IE7 mode, then it complains.

[freakish]

I don't care about IE7 and earlier. I only need to get it working under IE8. :) I can fix that, of course, but the main problem is still there.

[freakish]

Ah, wonderful! This is the problem. :) Thank you very much! I've changed that and it works fine! IE really is a pain in the a**. ;)