highchartsの使い方

環境
・NetBeans
・chrome
・Laravel

仕事でHighchartsを使用することになったのですが正しく表示されなくて困っています。
サンプルなどをそのままコピペしてブラウザに接続しているのですが、グラフの箇所だけ真っ黒になってしまい、表示されませんでした。
ソースは下記のようになっています。

index.blade.php
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4        <title>test</title>
5       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
6       <script type="text/javascript" src="js/highcharts.js">
7        var dataX = ['小1', '小2', '小3', '小4', '小5', '小6', '中1', '中2', '中3', '高1', '高2', '高3'];
8var dataArr = [{
9    name: '男子',
10    data: [116.6, 122.4, 128.2, 133.6, 139.0, 145.0, 152.3, 159.5, 165.0, 168.3, 169.9, 170.7]
11}, {
12    name: '女子',
13    data: [115.6, 121.6, 127.3, 133.6, 140.1, 146.8, 151.8, 154.8, 156.5, 157.0, 157.6, 158.0]
14}];
15var colors = ['#3498DB', '#E74C3C'];
16 
17$(function () {
18    $('#sample').highcharts({
19        chart: {
20            type: 'bar' // 棒グラフの使用
21        },
22        colors: colors,
23        title: {
24            text: 'グラフタイトル' // グラフのタイトル指定
25        },
26        xAxis: {
27            categories: dataX // X軸の項目指定
28        },
29        tooltip: {
30            valueSuffix: 'cm' // 棒グラフにオンマウスした時の値の単位指定
31        },
32        legend: { // 各棒グラフの説明エリア追加
33            layout: 'vertical',
34            align: 'right',
35            verticalAlign: 'top',
36            borderWidth: 2
37        },
38        series: dataArr // 棒グラフのデータ指定
39    });
40});
41</script>
42    </head>
43    <body>
44        <h1>test</h1>
45        <div id="sample"></div>
46    </body>
47</html>