Highcharts error #13 unless I run under IE compatibility view?

Question

I am developing an asp applicaiton which uses WCF service (.svc not .asmx) to send JSON data to highcharts. It only seems to work if I use ie compatibility view. If I don't I get the message:

Microsoft JScript runtime error: Highcharts error #13: http://www.highcharts.com/errors/13

Error number 13 along with online searching suggests I don't have the proper renter to DIV, but it is present. Any ideas what I can to to make my application work in non-compatibility view?

Thanks!

As requested here is some code. I have two charts placed side by side one deals with "Low" turnover items the other with high. Here is the low item chart thus it renders to a named containerLow.

var lowchart = new Highcharts.Chart({
        chart: {
            renderTo: 'containerLow'
        },
        xAxis: {                
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            //ChartClicked(this.x, this.y, this, this.series.name, this.series.color, this.index);
                            ChartClicked(this, 'Low');                                
                        }
                    }
                }
            }
        },
        tooltip: {

            formatter: function () {
                var txt = "$= <b>" + this.point.x + "</b><br/>"
                            + "Wait = <b>" + this.point.y + "</b><br/>"
                            + "Other DB Info for future Bow Wave, etc. <b><br/>"
                            + "Avg Fill Rate = <b>" + this.point.config.averageFillRate + "</b><br/>"
                            + "Average On Hand = <b>" + this.point.config.averageOnHand + "</b><br/>"
                            + "Average Workload = <b>" + this.point.config.averageWorkload + "</b><br/>"
                return txt;
            }
        }
    }); //end chart

My web service get a JSON string with multiple series in it. On page load I call the web service (twice once for hight and low items) and loop through the series array to plot the multiple curves.

function pageLoad() {
    JSONGraphing.GetDataDB(getParameterByName("id"), 2, OnGetDataCompleteLow, OnError);
    JSONGraphing.GetDataDB(getParameterByName("id"), 1, OnGetDataCompleteHigh, OnError);
}

Here is an example of one of the call back functions for the low graph.

 function OnGetDataCompleteLow(result) {
    var webServiceData = eval("(" + result + ")");

    for (var i = 0; i < webServiceData.series.length; i++) {
        lowchart.addSeries({
            data: webServiceData.series[i].data
        });
    }

    lowchart.yAxis[0].setTitle({
        text: 'Wait time in Days'
    });

    lowchart.xAxis[0].setTitle({
        text: 'Investment in Dollars'
    });

    lowchart.setTitle({ text: 'Low Frequency Items' });

}

I am in a bit of a time crunch any and all help greatly appreciated.

Answer 1

To make sure that the container exists you have to run your code after it gets rendered, it can be done by the following ways.

document.ready(function() {
    // your code
});

or

<div id="container"> </div>
<script type="type="text/javascript"">
    // your code here
</script>

or

(function() {
    // your code here
})