How can I embed an interactive highcharts javascript into my post?

My name is Josh and I work for a community college newspaper. I’ve just recently found Highcharts and have been attempting to embed a interactive graph into a post for our website, rather unsuccessfully. Actually, it’s been a complete failure.

I’ve read over multiple posts in this forum and others, and tried the solutions with no avail.

There’s no one I know who I can take this problem to and even though I feel like I’ve tried every suggested solution, Unfortunately, I’m rather illiterate when it comes to html and code. Any help would be GREATLY appreciated.

I am working with WordPress 3.5.1
I am running: Allow PHP in Posts and Pages Plugin & Interactive Javascript and CSS.

For the header option of the post I have:

<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js">    </script>
<script src="http://www.domain.com/wp-content/uploads/2013/03/highcharts1.js"    type="text/javascript"></script>

In some of the websites, I’ve seen mention of uploading the Highcharts library onto your wordpress server. But I’ve also seen mention of highcharts not being support anymore… ?

I’ve uploaded the highcharts.js file through the media library but I have a feeling that I am doing this incorrectly?

In the post itself I have placed:

[php]
$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'State Funding of DSPS Services',
            x: -20 //center
        },
        subtitle: {
            text: 'Source:MPR Associates Report',
            x: -20
        },
        xAxis: {
            categories: ['2003-04', '2004-05', '2005-06', '2006-07', '2007-08',
                '2008-09', '2009-10', '2010-11', '2011-2012', '2012-13']
        },
        yAxis: {
            title: {
                text: '$ Million'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y +' Million';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'College Total Funding',
            data: [77.8, 81.8, 86.2, 102.1, 109.3, 108.9, 64.9, 64.8, 64.6, 65.7]

        }]
    });
});

});
[/php]
<div id="container" style="width: 100%; height: 400px"></div>

The page comes up blank, as it has been for the past hundred attempts or so. I apologize if this is post in the wrong spot or undesired. Any advice or solutions are greatly appreciated.

Thank you, J