2008/03/05
tracの集計処理結果をGoogle Chart APIでグラフ化するブックマークレット
tracでは、SQLを書くだけで集計処理が簡単にできます(参考 http://dev.ariel-networks.com/column/tech/tracreport-tips/view)。
例えば、次のような集計結果があるとします。カラムの意味は企業秘密なので書けません。
この第3カラムの値の変化をグラフ化するために、Google Chart APIを使ってみました。
CSV形式で表示して、データ部分を選択します。
次のブックマークレットを実行します。言うまでもありませんが、ブックマークレットと言ってもブックマークする必要はありません。単にブラウザにURLとして解釈させれば良いだけです。URL欄にでもペーストしてください。getSelection()を使っているので、IEでは動きません。
javascript:(function() {location='http://chart.apis.google.com/chart?chs=800x200&cht=lc&chd=t:' + getSelection().toString().replace(/[^,]*,[^,]*,([^, ]*)/g, '$1,').replace(/(.*) $/, '$1').replace(/(.*),$/, '$1');})()
文字列をsplitして配列にする方が楽なのですが、変数使ったら負けな気がしたので、文字列操作だけでがんばってみました。しかし、時間軸の新しい方がグラフの左側になって見辛いので、結局、配列を使って次のように書き直しました。試合に負けて勝負に勝った、ようなものでしょうか。
javascript:(function() {var a = getSelection().toString().split(' ').reverse(); var a2 = [];for (var i = 0; i < a.length; i++) { if (a[i]) {a2.push(a[i].split(',')[2]);} }; location = 'http://chart.apis.google.com/chart?chs=800x200&cht=lc&chd=t:' + a2.join(',');})()
グラフは次のようになりました。
一番気にいらない部分は、getSelection()でデータを取得しているので、わざわざ必要な部分を選択しなければいけない部分です。
- Category(s)
- カテゴリなし
- The URL to Trackback this entry is:
- http://dev.ariel-networks.com/Members/inoue/trac-to-google-chart/tbping