アクセスチャートを作ろう！ Pathtraq ページチャート API と Google Chart API の合わせ技！
昨日
はてブにアクセスチャートというエントリを書いて、 Pathtraq のページチャート API と Google Chart API の組み合わせが結構便利だったので、そのノウハウを書いておきたいと思います。（後の自分のためにも）
こんな感じのチャートが簡単に書けちゃいます！
Pathraq のページチャート API とは
特定の期間内での時系列のアクセス数の一覧を返す API です。
マウント アンマウント | パソコン豆知識
とあるように、「この 1 時間は何アクセスがあって、その前の 1 時間は何アクセスあったよ」という要な情報を返してくれます。
この API を使うと
「今から 24 時間前までのアクセスの推移を知りたい！」
「このページっていつ頃から注目され始めたのかなあ？」
というような情報を得ることができます。
Google Chart API とは
Google Chart API を使用すると、チャートを動的に生成することができます。
http://code.google.com/intl/ja/apis/chart/
とあるように、様々なデータを多様なチャート（グラフ）に変換してくれる API です。
Pathtraq ページチャート API と相性が良さそうですね！
ステップ・バイ・ステップでアクセスチャートを作ってみよう！
順を追って見て行きましょう。
1. ページチャート API を目視で確認してみる
まずは、ページチャート API とはどういうものなのか、目で確認してみましょう。
以下の URL をクリックしてみてください。
http://api.pathtraq.com/page_chart?url=http://www.hatena.ne.jp/
そうすると、以下のような JSON 形式（JavaScript のオブジェクトに近い形式）のデータが見えますね！
これは、 http://www.hatena.ne.jp/ への最近 24 時間のアクセス数を 1 時間ごとに集計した結果を表したデータになっています。
ページチャート API は以下にアクセスすると、このような JSON を返してくれる API なんですね！
http://api.pathtraq.com/page_chart?url=知りたいページの URL
簡単ですね！
2. 次は JSONP 形式にしてみましょう！
JSONP 形式にすると HTML ファイル内の script 要素（タグ）から呼び出すことができるようになります。
さっきの URL に &callback=pagechartCallback というパラメータを追加してみましょう！
http://api.pathtraq.com/page_chart?url=http://www.hatena.ne.jp/&callback=pagechartCallback
そうすると、以下のように JavaScript の関数を呼び出している形に変わりましたね！
つまり、以下のように callback を指定してやると JavaScript の関数を呼び出してくれるんですね！
http://api.pathtraq.com/page_chart?url=知りたいページの URL&callback=API から呼び出して欲しい JavaScript の関数名
簡単ですね！
3. 次は、このチャートを実際に JavaScript から呼び出してみましょう
以下のような HTML ファイルを用意してあげます。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>ページチャート API の使い方</title></head><body> <script type="text/javascript"> /* この関数が API から呼び出される */ function pagechartCallback(chartInfo) { alert(chartInfo.plots); } </script> <script src="http://api.pathtraq.com/page_chart?url=http://www.hatena.ne.jp/&callback=pagechartCallback" type="text/javascript"></script> </body></html>
では、さっそく実行してみましょう。
クリック！
以下のように、データが表示されましたか？
このように API の URL を script 要素の src 属性に与えてやるだけで Pathtraq API を使えるのが分かりました。
4. Google Chart API でグラフを書いてみよう！
さっきの pagechartCallback 関数を少し書き換えてみましょう！
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>ページチャート API の使い方</title></head><body> <script type="text/javascript"> function pagechartCallback(chartInfo) { // img 要素を作る var elm = document.createElement('img'); // Google Chart API 用の URL を生成する。 elm.src = 'http://chart.apis.google.com/chart?cht=lc&chs=400x200&chd=t:' + chartInfo.plots.join(','); // img 要素を body 要素の一番下に挿入する document.body.appendChild(elm); } </script> <script src="http://api.pathtraq.com/page_chart?url=http://www.hatena.ne.jp/&callback=pagechartCallback" type="text/javascript"></script> </body></html>
早速見てみましょう！
クリック！
pagechartCallback 関数に入ってきたデータの plots プロパティをカンマ区切りの文字列にした値を Google Chart API に与えただけでそれなりのグラフが出来てしまいました！
5. グラフを縦いっぱいに表示する
次は JavaScript の Math.max 関数を使って、グラフを縦軸の上限下限を決めましょう！
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>ページチャート API の使い方</title></head><body> <script type="text/javascript"> function pagechartCallback(chartInfo) { // img 要素を作る var elm = document.createElement('img'); // 配列内の一番大きな値を求める var max = Math.max.apply(null, chartInfo.plots); // Google Chart API 用の URL を生成する。 elm.src = 'http://chart.apis.google.com/chart?cht=lc' + // サイズを指定します。 '&chs=400x200' + // データをカンマ区切りで指定します '&chd=t:' + chartInfo.plots.join(',') + // データの最小値最大値（グラフの上辺値と下辺値）を指定します。 '&chds=0,' + max; // img 要素を body 要素の一番下に挿入する document.body.appendChild(elm); } </script> <script src="http://api.pathtraq.com/page_chart?url=http://www.hatena.ne.jp/&callback=pagechartCallback" type="text/javascript"></script> </body></html>
早速実行してみましょう！
クリック！
以下のような感じになりましたね！
いい感じのグラフになってきました！
6. 軸を追加してみよう！
軸の追加は、 chxt=x,y としてやります。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>ページチャート API の使い方</title></head><body> <script type="text/javascript"> function pagechartCallback(chartInfo) { // img 要素を作る var elm = document.createElement('img'); // 配列内の一番大きな値を求める var max = Math.max.apply(null, chartInfo.plots); // Google Chart API 用の URL を生成する。 elm.src = 'http://chart.apis.google.com/chart?cht=lc' + // サイズを指定します。 '&chs=400x200' + // データをカンマ区切りで指定します '&chd=t:' + chartInfo.plots.join(',') + // データの最小値最大値（グラフの上辺値と下辺値）を指定します。 '&chds=0,' + max + // X 軸 Y 軸を追加 '&chxt=x,y' + ''; // img 要素を body 要素の一番下に挿入する document.body.appendChild(elm); } </script> <script src="http://api.pathtraq.com/page_chart?url=http://www.hatena.ne.jp/&callback=pagechartCallback" type="text/javascript"></script> </body></html>
ではさっそくクリック！
以下のような感じになります。
この時点では、軸のラベルは 0 - 100 という適当な値になっています。
7. Y 軸のラベルをちゃんと指定する
軸のラベルは、 chxr, chxl, chxp を使ってやります。詳しくは、ソース中のコメントを参照してください。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>ページチャート API の使い方</title></head><body> <script type="text/javascript"> function pagechartCallback(chartInfo) { // img 要素を作る var elm = document.createElement('img'); // 配列内の一番大きな値を求める var max = Math.max.apply(null, chartInfo.plots); // Y 軸の値を 5 刻みにする var yposes = []; var ynames = []; for (var i = 0; i < max; i += 5) { yposes.push(i); ynames.push(i + ' hits'); } // Google Chart API 用の URL を生成する。 elm.src = 'http://chart.apis.google.com/chart?cht=lc' + // サイズを指定します。 '&chs=400x200' + // データをカンマ区切りで指定します '&chd=t:' + chartInfo.plots.join(',') + // データの最小値最大値（グラフの上辺値と下辺値）を指定します。 '&chds=0,' + max + // X 軸 Y 軸を追加 '&chxt=x,y' + // Y 軸の範囲 0 〜 max '&chxr=1,0,' + max + // Y 軸のラベルの位置 '&chxp=1,' + yposes.join(',') + // Y 軸のラベルの名前 '&chxl=1:|' + ynames.join('|') + ''; // img 要素を body 要素の一番下に挿入する document.body.appendChild(elm); } </script> <script src="http://api.pathtraq.com/page_chart?url=http://www.hatena.ne.jp/&callback=pagechartCallback" type="text/javascript"></script> </body></html>
ではさっそくクリック！
以下のような感じになります。
いい感じになってきました
8. 最後に X 軸を追加する
さきほど追加した chxr, chxl, chxp に X 軸のデータも追加してやります。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>ページチャート API の使い方</title></head><body> <script type="text/javascript"> function pagechartCallback(chartInfo) { // img 要素を作る var elm = document.createElement('img'); // 配列内の一番大きな値を求める var max = Math.max.apply(null, chartInfo.plots); // Y 軸の値を 5 刻みにする var yposes = []; var ynames = []; for (var i = 0; i < max; i += 5) { yposes.push(i); ynames.push(i + ' hits'); } // X 軸の準備 var xposes = []; var xnames = []; // ページチャート API から // チャートの期間の最初と最後の時間を数値で取得する var start = new Date(chartInfo.start).getTime(); var end = new Date(start + // 3600000 は 1 時間のミリ秒数 chartInfo.step * (chartInfo.plots.length - 1) * 3600000).getTime(); // タイムゾーンのオフセット（日本時間と世界標準時の差） // 600000 は 1 分のミリ秒数 var tzoffset = new Date().getTimezoneOffset() * 60000; // 4 時間刻みにする var localStart = start - tzoffset; var step = 4 * 3600000; for (var t = localStart + step - (localStart % step || step) + tzoffset; t < end; t += step) { var d = new Date(t); xposes.push(t); xnames.push(d.getHours() + ':00'); } // Google Chart API 用の URL を生成する。 elm.src = 'http://chart.apis.google.com/chart?cht=lc' + // サイズを指定します。 '&chs=400x200' + // データをカンマ区切りで指定します '&chd=t:' + chartInfo.plots.join(',') + // データの最小値最大値（グラフの上辺値と下辺値）を指定します。 '&chds=0,' + max + // X 軸 Y 軸を追加 '&chxt=x,y' + // 軸の範囲 '&chxr=' + // X 軸 '0,' + start + ',' + end + '|' + // Y 軸 '1,' + 0 + ',' + max + // 軸のラベルの位置 '&chxp=' + // X 軸 '0,' + xposes.join(',') + '|' + // Y 軸 '1,' + yposes.join(',') + // 軸のラベルの名前 '&chxl=' + // X 軸 '0:|' + xnames.join('|') + '|' + // Y 軸 '1:|' + ynames.join('|') + ''; // img 要素を body 要素の一番下に挿入する document.body.appendChild(elm); } </script> <script src="http://api.pathtraq.com/page_chart?url=http://www.hatena.ne.jp/&callback=pagechartCallback" type="text/javascript"></script> </body></html>
さっそくクリック！
おおおおおお。出来ました！
まとめ
ね？簡単でしょ？
