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?

Answer 1

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.