CSVから折れ線グラフを作成する

Chartを使ってCSVから折れ線グラフを作るサンプルです。

サーバーからCSVファイルをダウンロードして解析し、グラフを作成します。
Chartの基本的な使い方はこちらを参照

YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.4.0/build/charts/assets/charts.swf";

// データソース
// サーバーからCSVを読み込み解析する
var dataSource = new YAHOO.util.DataSource( "./data300.csv" ); // csvのURL
dataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;
dataSource.responseSchema = {
  // 行とカラムのデリミタを設定
  recordDelim: "\n", 
  fieldDelim:  ", ",
  // フィールドの設定
  // 文字列なので、parserを指定して整数にする。
  fields: [
    {key: "id", parser: YAHOO.util.DataSource.parseNumber},
    {key: "b",  parser: YAHOO.util.DataSource.parseNumber},
    {key: "a",  parser: YAHOO.util.DataSource.parseNumber},
    {key: "+4", parser: YAHOO.util.DataSource.parseNumber},
    {key: "+3", parser: YAHOO.util.DataSource.parseNumber},
    {key: "0",  parser: YAHOO.util.DataSource.parseNumber},
    {key: "-3", parser: YAHOO.util.DataSource.parseNumber},
    {key: "-4", parser: YAHOO.util.DataSource.parseNumber}
  ]
};

// y軸の最大値、最小値を調整
var axis = new YAHOO.widget.NumericAxis();
axis.minimum = 159.5;
axis.maximum = 161.5;

// チャートを作成。 
var chart = new YAHOO.widget.LineChart( "chart", dataSource, { 
   xField: "id", 
   yAxis: axis,
   series: [
        { displayName: "bid",  yField: "b",  style: { size: 0 } },// styleでマーカーを削除
        { displayName: "ask",  yField: "a",  style: { size: 0 } },
        { displayName: "+4σ", yField: "+4", style: { size: 0 } },
        { displayName: "+3σ", yField: "+3", style: { size: 0 } },
        { displayName: "0σ",  yField: "0",  style: { size: 0 } },
        { displayName: "-3σ", yField: "-3", style: { size: 0 } },
        { displayName: "-4σ", yField: "-4", style: { size: 0 } }
   ]
});

CSVはこんな感じ。

...
200, 160.4200, 160.4600, 160.4963, 160.4431, 160.2836, 160.1241, 160.0709, + ,  1, -1601800.0
201, 160.5200, 160.5600, 160.5540, 160.4886, 160.2921, 160.0957, 160.0302, + ,  1, -1601800.0
202, 160.4700, 160.5100, 160.6000, 160.5252, 160.3007, 160.0762, 160.0013, + ,  1, -1601800.0
203, 160.4100, 160.4400, 160.6205, 160.5422, 160.3072, 160.0722, 159.9939, + ,  1, -1601800.0
204, 160.4400, 160.4700, 160.6367, 160.5559, 160.3135, 160.0711, 159.9902, + ,  1, -1601800.0
205, 160.4600, 160.4800, 160.6587, 160.5739, 160.3196, 160.0653, 159.9805, + ,  1, -1601800.0
206, 160.4300, 160.4600, 160.6690, 160.5824, 160.3227, 160.0629, 159.9764, + ,  1, -1601800.0
...

実行結果はこちら。