Highcharts gauges not working in IE8

Question

I am using Highcharts gauges. Work perfectly in Chrome/Firefox/Safari -however the gauge needle does not appear in IE. This is echoed out in PHP. The "//Add some life" section of the code is all set to 0 so that the needle doesn't move.

echo "<div id='gauges'><h2>Points Achievements
</h2><div id='junior' class='gauge'>
<script type='text/javascript'>
$(function () {

$('#junior').highcharts({

    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false,
        backgroundColor:'rgba(255, 255, 255, 0.1)'
    },

    credits: {
  enabled: false
  },

    title: {
        text: 'Junior Club Award'
    },

    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: "; if($junior_sum >= 25){ echo "'#B1FCBC'";}else{ echo "'#DDD'"; } echo",
            borderWidth: 0,
            outerRadius: '101%',
            innerRadius: "; if($junior_sum >= 25){ echo "'1%'";}else{ echo "'100%'"; } echo "
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 25,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: 'You have...'
        },
        plotBands: [{
            from: 0,
            to: " . $junior_sum .",
            color: '#009FF5' // dark blue
        },{

            from: " . $junior_sum . " ,
            to: 25,
            color: '#92CFF0' // light blue

        },

                   ]        
        },

    series: [{
        name: 'Points Earned',
        data: [" . $junior_sum . "],
        tooltip: {
            valueSuffix: ''
        }
    }]

}, 
// Add some life
function (chart) {
    if (!chart.renderer.forExport) {
        setInterval(function () {
            var point = chart.series[0].points[0],
                newVal,
                inc = 0;

            newVal = point.y + inc;
            if (newVal < 0 || newVal > 200) {
                newVal = point.y - inc;
            }

            point.update(newVal);

        }, 3000);
    }
});
});";

echo "</script></div>";

Answer 1

On your plotBands section of code you have a dangling comma:

plotBands: [{
                from: 0,
                to: " . $junior_sum .",
                color: '#009FF5' // dark blue
            }, {

                from: " . $junior_sum . ",
                to: 25,
                color: '#92CFF0' // light blue

            }, //here is your dangling comma

            ]

IE does not take kindly to those. Since do not list your actual js with data the if statements do not parse but I would check there also for invalid syntax. If possible put up a jsFiddle of what the js looks like for the chart once it has been parsed by PHP.