Which differences in javascript object creation syntax have I not understood? IE8 vs Chrome

Question

I am working with Highcharts, to display data graphically. I've chosen this library specifically because of its compatibility with both IE8 and a newer version of Google Chrome, as it renders the charts in VML or SVG, depending on supportability.

HighCharts can be created by defining a properties-object, which is passed as a parameter. This is working like a charm in Chrome, but I'm having trouble in IE8 (is there an echo in here?)

I suspect that the error is different syntax support for the two browsers, when defining an object in javascript. The two questions below are the closest thing I have come to finding any info, but they didn't address my actual problem.

What are the most likely causes of Javascript errors in IE8?

IE8 errors when defining a Javascript object?

My code for defining the properties object is stated below. My error is always in the first line of this snippet. However, I cannot find any errors in that line, so I think it has to be somewhere else, and only refer to it's "root". entry is an object with a few parameters, to populate the chart with titles and similar:

    var chartOptions = {
        chart: {
            renderTo: "piecontainer"+index,
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: entry.title + '<br/><br/>' + entry.path + '<br/><br/>Total: ' + Object.keys(entry.testMap).length,
            align: 'center',
            verticalAlign: 'middle',
            y: 50
        },
        tooltip: {
            pointFormat: '{series.name}: <b> {point.y} ({point.percentage:.1f}%)</b>'
        },     

        legend: {
            width: 415,
            enabled: true,
            useHTML: true,
            labelFormatter: function() {
                return '<span>' + this.name + ': ' + this.y + '<t/></span>';
            }, 
            itemDistance: 20
        },

        credits: {
            enabled: false
        },

        plotOptions: {
            pie: {
                size: '100%',
                animation: false,
                 dataLabels: {
                        enabled: false                              
                    },
                    showInLegend: true,
                startAngle: -90,
                endAngle: 90,
                center: ['50%', '75%']
            }
        },
        series: [{
            type: 'pie',
            name: 'Test Cases',
            innerSize: '50%',
            data: [
                ['Passed',  1],
                ['Not Completed', 1],
                ['Failed', 1],
                ['No Run', 1],
                ['N/A', 1], 
                ['Blocked', 1],
                ['Incorrect Database Value', 1]
            ]
        }]
    };

EDIT: As I can tell by this post: Strange behavior Highcharts pie chart in document mode IE8 , the main structure of my object notation is correct. There has to be a single line or two in the middle, that are causing the problems.

Answer 1

Object.keys is not supported in IE8. It is an ES5 specification, which is only supported from IE9 and above. You'll need a different way of getting at that information.

See here ...