ブラウザにdrag&dropでグラフ描画

Javascript HTML5

ブラウザで簡単に音声波形みたいなものを描画したくて、HTML5のcavasとfile APIの勉強がてら作ってみました。

ソース
https://github.com/penkoba/drop_n_draw

テストページ
http://www.geocities.jp/phan_tom_0/drop_n_draw/drop_n_draw.html

というわけで簡単に紹介します。

特長：

  • ファイルをdrag&dropするだけでOK
  • データは単純なCSVでOK、色やラベルをコントロールする場合はJSONで
  • 複数のファイルを１画面に描画可、１ファイルに複数のデータも記述可

データの作り方：

  • 簡単な例 - csvでx,yを羅列
5,6.00,
10,6.01,
15,6.03,
20,6.06,
25,6.10,
30,6.15,
35,6.21,
40,6.28,
45,6.36,
50,6.45,
55,6.55,
60,6.64,
65,6.72,
70,6.79,
75,6.85,
80,6.90,
85,6.94,
90,6.97,
95,6.99,
100,7.00,

  • 複数のファイルを１つのキャンバスに描画

  • １ファイルに複数のデータ（１番目の要素が横軸）
1,7.36,7.16,7.22,
2,7.36,7.15,7.21,
3,7.35,7.11,7.17,
4,7.35,7.14,7.17,
5,7.35,7.18,7.16,
6,7.35,7.18,7.17,
7,7.37,7.17,7.17,
8,7.38,7.18,7.16,
9,7.38,7.17,7.16,
10,7.4,7.17,7.18,
11,7.4,7.19,7.18,
12,7.4,7.19,7.16,
13,7.4,7.18,7.14,
14,7.39,7.16,7.13,
15,7.4,7.16,7.13,
16,7.37,7.14,7.11,
17,7.34,7.11,7.12,
18,7.36,7.13,7.14,
19,7.37,7.15,7.14,
20,7.36,7.17,7.15,

  • ラベルと描画色を指定（JSON)
{
"label": ["x1","x2","x3"],
"color": ["#30b040","#ff9080","#00c0ff"],
"data":[
1,6.36,6.16,6.22,
2,6.36,6.15,6.21,
3,6.35,6.11,6.17,
4,6.35,6.14,6.17,
5,6.35,6.18,6.16,
6,6.35,6.18,6.17,
7,6.37,6.17,6.17,
8,6.38,6.18,6.16,
9,6.38,6.17,6.16,
10,6.4,6.17,6.18,
11,6.4,6.19,6.18,
12,6.4,6.19,6.16,
13,6.4,6.18,6.14,
14,6.39,6.16,6.13,
15,6.4,6.16,6.13,
16,6.37,6.14,6.11,
17,6.34,6.11,6.12,
18,6.36,6.13,6.14,
19,6.37,6.15,6.14,
20,6.36,6.17,6.15,
 :
]
}


ところで、drag&dropは置いとくにしてもグラフ描画みたいな誰でも考えるようなものは当然のごとく誰かが作っているものでして、
http://www.humblesoftware.com/flotr2/
このあたりは多機能で良さそうですね。
ひとまず自分である程度作って勉強フェーズとしては満足したので、今後はこういうライブラリを使って少し洗練したものを作ってみようかと思います。