Web業務システムの定番。HTML5×Canvasを使ったグラフライブラリ
HTML5で追加された新機能の一つにCanvasがあります。よく知られた使い方としてはブラウザゲームの描画がありますが、業務系システムとは縁遠い気がしてしまいます。そこで業務システムならではの活かし方としてチャート（グラフ）を紹介したいと思います。
Canvasタグを使ってグラフを描画するということは、Webブラウザだけで完結するということです。従ってサーバ側の準備は不要で、かつ負荷もありません。HTML5で業務システムを構築する上でCanvasを使ったグラフ描画は欠かせない存在と言えるでしょう。
Epoch
Epochはリアルタイムチャートに対応しています。描画できるグラフは、エリア・ヒートマップ・曲線、円グラフ、棒グラフ、散布図となっています。
Aristochart
Aristochartは折れ線グラフ専門のライブラリで、Canvasタグにグラフを描画します。負の値や0点を任意の場所に表示する、大量のデータを描画することができます。
Aristochart – Sophisticated Javascript charts.
Chart.js
曲線のグラフ、棒グラフ、レーダーチャート、円グラフ（パイまたはドーナッツ）、エリア円グラフに対応しています。
Chart.js | Open source HTML5 Charts for your website
envision – demos
Envision.jsは折れ線グラフに対応しています。Googleファイナンスのように一部だけをマウスでドラッグして拡大させると言った操作ができるようになっています。
flotr2
flotr2は実に多種多様なグラフが描けるようです。折れ線、某、積み上げ（縦横）、円グラフ、レーダーチャート、範囲、ローソク、曲線、タイムシリーズ、ガントチャートなどです。それらのグラフを組み合わせて使うこともできます。
Yokul
YokulはGoogle Image Charts API互換のJavaScriptライブラリです。同じ指定でCanvasタグを使ってローカルだけでグラフを描画します。今のところ棒グラフのみ対応しているようです。
Yokul – Google Charts Reimplemented in a Local JS Canvas – Matt Greer
Smoothie Charts: A JavaScript Charting Library for Streaming Data
ストリーミングで入ってくるデータをリアルタイム描画するのに特化したグラフライブラリです。CPUやネットワークの状況をチェックしたりするのに使えそうです。
Smoothie Charts: A JavaScript Charting Library for Streaming Data
Protovis
Protovisは折れ線、積み上げ、円グラフなどに対応しています。なお開発は終了しており、現在はD3.js開発に移っているとのことです。D3.jsはグラフだけに留まらないデータビジュアル化ライブラリと言えます。
nextreports/nextcharts
NextChartsは棒グラフ、円グラフ、エリアグラフ、円グラフなどに対応しています。表示する際にアニメーションするのが特徴です。
rendro/easy-pie-chart
easy pie chartは名前の通りシンプルな円グラフです。インジケータになっていて、アニメーションしながら一つの数字を表示します。
いかがでしたか。Canvasタグを使うことで高度なグラフを描画できるのが分かっていただけたかと思います。若干の難点としてはCanvasタグを使う場合、動作が重たくなってしまう場合があるということでしょうか。
なおhifiveではグラフ描画ライブラリを開発中です。
IE8などのHTML5非対応ブラウザでも利用できるライブラリもありますので、業務システム上でグラフを描画する際に役立ててください！
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
hifive開発者ブログ 
コメントは受け付けていません。