jQuery - Highcharts line graph

by pythondave

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://highcharts.com/js/testing-exporting.js"></script>
<div id="resizer">
    <div id="inner-resizer">
        <div id="container"></div>
    </div>
</div>

CSS

#resizer { border: 1px solid silver; }
#inner-resizer { padding: 20px; }
#container { height: 300px; }

JavaScript

var container = $('#container')[0];

$('#resizer').resizable({
    resize: function() {
        chart.setSize(
            this.offsetWidth - 40, 
            this.offsetHeight - 20,
            false
        );
    }
});

var chart = new Highcharts.Chart({
    title: {text: 'House Competition' },
    subtitle: {text: 'House points over time (2011/12)' },
    credits: { enabled: false },
    exporting: { enableImages:true },
    colors: ['#FFA500', 'purple', 'red'],
    chart: {
        renderTo: container,
        spacingTop: 3, spacingRight: 3, spacingBottom: 3, spacingLeft: 3 },
    yAxis: { title: { text:'Points' } },
    xAxis: { categories: ['T1W1','T1W2','T1W3','T1W4','T1W5','T1W6','T1W7','T2W1','T2W2','T2W3','T2W4','T2W5']},
    series: [
        { name:'Orange', data:[62,119,211,250,346,438,475,497,541,543,580,663] },
        { name:'Purple', data:[40,73,166,185,188,287,376,426,488,577,596,637] },
        { name:'Red', data:[95,114,206,288,369,386,437,496,522,536,607,700] }]
});