Google Chart APIを使えない場合に。Canvasタグで互換グラフを描く「Yokul」
YokulはCanvasタグを使ってGoogle Chart API互換のグラフを描くJavaScriptライブラリ。
YokulはJavaScript/HTML5製のオープンソース・ソフトウェア。Webサービスで工数がかかりやすいのがグラフの表示だ。システムから得られるデータを使って動的に変化させるため作るのが大変だ。そんな中、よく使われるのがGoogle Chart APIだ。
サンプル
Google Chart APIを使えば画像ベースのグラフが簡単に作成することができる。しかし場合によっては外部にデータを渡すために利用できないかもしれない。そんな時に使えるのがYokulだ。
YokulはGoogle Chart API互換のグラフライブラリだ。さらに面白いのがサーバサイドの仕組みを用いないことだ。つまりCanvasタグを使ってJavaScriptだけでグラフを描くのだ。使い方も簡単で、これまではimageタグのsrcに指定した内容を、data-srcに指定するだけだ。
こんな複雑なグラフも
後はYokulのJavaScriptがdata-srcの内容を読み込んでGoogle Chart APIそっくりのグラフを描き出す。今の所は棒グラフにのみ対応し、今後円グラフなどに広がっていく。Canvasで描くだけにJavaScriptからのダイナミックな操作にも対応しており、使い勝手の良さそうなライブラリだ。
MOONGIFTはこう見る
Google Chart APIではサイズの制限があるが、Yokulではそのような制限がない。またデータを徐々に変化させていくことでアニメーションをするといったことも考えられる。またGoogle Chart APIの場合はネットワーク接続が必須だが、Yokulの場合はオフラインでも利用できる。
Canvasであるためのレガシーなブラウザでは対応できないこともあるだろう。特定のブラウザだけに対応するか、スマートフォン向けなどで使うのが良さそうだ。JavaScript製のグラフライブラリとして見ても興味深い、面白いソフトウェアだ。