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?

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?

• javascript
• internet-explorer
• internet-explorer-8
• plot
• highcharts

• Actually I'm using HighStock (but here I use only HighCharts) and the exception is thrown in highstock.js script. It seems that it is trying to read chart_data[0].data[0] and it throws the exception. I can't say for sure, because I used minified version. The strange thing is that when I debug it chart_data[0].data is null but chart_data[1].data is not. But all asigments are fine (they work under other browsers). – freakish Commented Jan 9, 2012 at 15:54
• See my answer update. The problem is with the dangling commas in your data array definitions. – Pointy Commented Jan 9, 2012 at 15:55

1 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.