GoogleSpreadSheetに入力されているデータをHighChartでグラフ化してはてぶにはるテスト
別にGoogle Chartを使ってもいいんだけど、カスタマイズできないしかっこいいグラフ作れないからHighChartとGoogle SpreadsheetとGoogle App Engineでデータをグラフ化するやつを作ってみた。ついでにはてぶにもはれるようにしてみた。
仕様
グラフ自体は以下の環境で動いています。
- データの保管場所：Google Spreadsheet
- 描画部分：Highchart.js
- サーバ：Google App Engine
- はてぶにはるところ：Google Gadget使ってiframeで表示しています（なので、iframeがはれる場所だったらredmineとかにもはれます）
でGoogle App Engineの利用料金が上がらないようにキャッシュをしたり、データを保持したりしないようにしています（このブログで描画するくらいなら0円でいけますし、会社で使うのでもそこそこの人数までは０円かと）
Google Spreadsheetを使っているのでMYSQLとかDBの知識がない人でもKPIを描画できてブログやWIKIなどに自動で反映されるグラフが作れます
元のデータ
例えばこのブログの新規ユーザーとリピーターの推移とそれぞれのユーザー群における検索流入の割合などをGoogle SpreadSheetに以下の様に記載しておきます。
グラフの種類
折れ線グラフ
まずは普通に折れ線グラフでグラフを表示します。
棒グラフ(実数値)
積上げのグラフを作ることもできますし、必要があれば下のラベルをクリックするとグラフをけすこともできます。
エリアグラフ(割合)
合計値を100%にしてそれぞれの割合をみるグラフ
検索経由での流入率
元がGoogle SpreadSheetなので計算した結果もグラフに自動で反映することができます。
このグラフを使いたい人がいましたら
Google App Engineでパスワードなどを入れてアップロードするとすぐに使えるのでもしもソースが欲しい方がいたらさくっと公開しようかと
Google Appsを使っている場合は同一ドメインでログインしている人にしか見せないとかそういった設定もできます。
