I'm doing a proof of concept for some dashboards we are going to be displaying on monitors around the office. I'm trying to get the Highcharts example into a visualforce page to show what it is capable of but the page won't display anything and I don't know why. It's such a simple page but I'm not a javascript developer and I'm pulling my hair out.

<apex:page sidebar="false" showHeader="false"  >
<apex:includeScript value="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" />
<apex:includeScript value="http://code.highcharts.com/highcharts.js" />
<apex:includeScript value="http://code.highcharts.com/modules/exporting.js" />
    
    <script type="text/javascript">
    $(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});
</script>

  <div id="container"  style="height: 400px;" > </div>
 
</apex:page>