Highchartsを使ってcsvデータを読み込んでグラフ化するサンプル（前編）

webコンテンツの中で、キレイなグラフが使えないかと色々と探してみて見つけたのがコレ。 キレイなグラフが簡単に作れるライブラリHighcharts。 とりあえずサンプルを元に試してみた。

今回のメモは、サンプルソースを少し改良して、csvデータを読み込んでグラフ化することにします。
1.　まずは、jQueryをインポート
-googleでホストされているコードを読み込むのでこのままコピペ

2.　ダウンロードしたファイルからjsフォルダをアップロード
3.　jQuery_csv.jsをアップロード（別記事で掲載予定）
4.　index.htmlに以下のコードを貼り付ける
2～19行目　：　csvデータを読み込んで配列mydataへjavascriptの配列として代入
・　htmlファイルと同じフォルダの「data.csv」を読み込む
・　csv()関数（jquery_csv.js）を使いデータを変換
・　mydataに代入

21行目から　：　グラフ作成用のパラメータ設定
・　23行目：　グラフの種類をラインチャートに設定してidがcontainerのDIVタグに挿入
・　27行目：　グラフのタイトル
・　30行目：　サブタイトル
・　33行目：　x軸のラベル（1つめが日本語なのは、日本語表示用のテスト
・　36行目：　y軸のラベル（表示を見れば目盛りが自動的に振られているっ！）
・　41行目：　マウスオーバー時のツールチップ
・　48行目：　凡例部分かな（？）

56行目から　ここから、グラフのデータ

series：[
 name:　ラベル名
 data：　データ部
]

なのですが、ここでcsvから読み込んだ配列を63行目のように設定してあげるといいみたい。

※45行目は改行しないで44行目に続けて入力

$(function () {
 var mydata=[];
 $.get('data.csv', function (data) {
  var csv = $.csv()(data);
  $(csv).each(function () {
   mydata.push( [parseFloat( this[0] ),
    parseFloat( this[1] ),
    parseFloat( this[2] ),
    parseFloat( this[3] ),
    parseFloat( this[4] ),
    parseFloat( this[5] ),
    parseFloat( this[6] ),
    parseFloat( this[7] ),
    parseFloat( this[8] ),
    parseFloat( this[9] ),
    parseFloat( this[10] ),
    parseFloat( this[11] )
    ] );
  })

  var chart;
  chart = new Highcharts.Chart({
   chart: {
    renderTo: 'container',
    type: 'line'
   },
   title: {
    text: 'Monthly Average Temperature'
   },
   subtitle: {
    text: 'Source: WorldClimate.com'
   },
   xAxis: {
    categories: ['1月', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   },
   yAxis: {
    title: {
     text: 'Temperature (°C)'
    }
   },
   tooltip: {
    enabled: false,
    formatter: function () {
     return '<b>' + this.series.name + '</b>
' + this.x + ': ' + this.y + '°C';
    }
   },
   plotOptions: {
    line: {
     dataLabels: {
      enabled: true
     },
     enableMouseTracking: false
    }
   },
   series: [{
    name: '東京',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, {
    name: '神戸',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   },{
    data: mydata[0],
    name:'sample'
   }]
  });
 });

});

5.　body部にスクリプトの読み込みとDIVタグを設置

<script src="./js/highcharts.js">
</script>
  <script src="./js/modules/exporting.js">
</script>
  <div id="container" style="height: 400px; margin: 0 auto; min-width: 400px;">
</div>

とりあえず完成 実は見よう見まねで作っているので、もっといい方法があるはずです。、わかる方教えてください（笑）