Chart.jsでブラウザ上に画面が表示されない

参考サイト
を参考に、javascriptにチャレンジしています。

しかし、画面上に何も映らないため、グラフが映るようにしたいです。

charts.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>JavaScript Sample</title>
6<!--ライブラリ読み込み -->
7<script src="Chart.js/Chart.min.js"></script>
8
9<!--描画箇所 -->
10<canvas id="lineChartCanvas" height="450" width="600"></canvas>
11
12<!--凡例箇所 -->
13<ul id="chart_legend"></ul>
14</head>
15<body>
16<!-- 本文 -->
17
18
19
20</body>
21</html>
22

charts.js

Javascript
1var lineChartData = {
2  //x軸の情報
3  labels : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
4  //各グラフの情報。複数渡すことができる。
5  datasets : [
6    {
7      //rgba(220, 220, 220, 1)は、rgbと透過度。
8
9      //線の色。ポイントの色を省略すると線の色と同じになる。
10      strokeColor : "rgba(220, 220, 220, 1)",
11      //線の下側の色
12      fillColor : "rgba(220, 220, 220, 0.5)",
13      //ポイントの色
14      pointColor : "rgba(220, 220, 220, 1)",
15      //ポイントの枠の色
16      pointStrokeColor : "rgba(220, 220, 220, 1)",
17      //実際のデータ
18      data : [1, 59, 90, 81, 56, 55, 40, 30, 10, 40, 48, 58],
19      //凡例名
20      'label'=>'data1'
21    },
22    {
23      fillColor : "rgba(151, 187, 205, 0.5)",
24      strokeColor : "rgba(151, 187, 205, 1)",
25      pointColor : "rgba(151, 187, 205, 1)",
26      pointStrokeColor : "#fff",
27      data : [28, 48, 40, 19, 96, 27, 100, 33, 63, 31, 64, 51],
28      'label'=>'data2'
29    }
30  ]
31}
32
33var option = {
34  //縦軸の目盛りの上書き許可。これ設定しないとscale関連の設定が有効にならないので注意。
35  scaleOverride : true,
36
37  //以下設定で、縦軸のレンジは、最小値0から5区切りで35(0+5*7)までになる。
38  //縦軸の区切りの数
39  scaleSteps : 7,
40  //縦軸の目盛り区切りの間隔
41  scaleStepWidth : 5,
42  //縦軸の目盛りの最小値
43  scaleStartValue : 0,
44
45  //アニメーション設定
46  animation : false,
47
48  //Y軸の表記（単位など）
49  scaleLabel : "<%=value%>A",
50
51  //ツールチップ表示設定
52  showTooltips: false,
53
54  //ドットの表示設定
55  pointDot : false,
56
57  //線を曲線にするかどうか。falseで折れ線になる。
58  bezierCurve : false
59
60  //凡例
61  legendTemplate : "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>"
62}
63
64//jQueryオブジェクト[0]とすれば、getContext("2D")できる。
65var ctx = $('#lineChartCanvas')[0].getContext("2d");
66//グラフ描画
67var char = new Chart(ctx).Line(lineChartData,option);
68//凡例のhtmlを取得して設定
69$('#chart_legend').html(chart.generateLegend());
70