Pathtraq APIを使ったアクセス数推移をGoogle Chart APIで表示する方法

こんにちは　okyuu.comエンジニアのzegenvsです。

本日　Pathtraq の APIを使った　アクセス数推移が見れるようになりました

Pathtraqとは
サイボウズ・ラボが運営する話題のウェブサイトをランキング化するサイトです

マウントアンマウント | パソコン豆知識

okyuu.comでは

直接投稿されたノウハウと　
Web上にある記事に関してブックマークしたノウハウ、ニュース
質問

の主に3種類の記事タイプがあります。
　今回は2番目のWeb上の記事に関して　Pathtraq上でのアクセス推移をグラフにする
機能をリリースしました

例)
http://okyuu.com/ja/news/2031/external_reputation

マウントアンマウント | パソコン豆知識
で取得した　ページチャート(1ヶ月分)を
http://code.google.com/intl/ja/apis/chart/
を使用し　折れ線グラフ化しています。

グラフ化までの簡単な流れをソース文中で説明させていただきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<script type="text/javascript">
//<![CDATA[
//まずは該当URLに対して　ページチャートAPIをたたいてjsonデータを取得します
var script = document.createElement('script');
script.setAttribute('src', 
'http://api.pathtraq.com/page_chart?'+
'api=json&scale=1m&callback=com_okyuu_pathtraq_page_chart&' + 
'url=http%3A%2F%2Fwww.gizmodo.jp%2F2008%2F07%2Fpost_4009.html');
document.body.appendChild(script);

function com_okyuu_pathtraq_page_chart(data){
   if(!data || !data.plots){
       return;
   }
   //受け取ったプロットデータ
   var plots = data.plots;
   //データが適当に表示されるようにグラフの最大/最小メモリを計算する
   //グラフのy軸メモリの最大値を[プロットの最大値]*1.1 + 1
   //グラフのy軸メモリの最小値を[プロットの最小値]*0.9 (1よりも小さい場合は0)
   var max = (Math.max.apply(null,plots) * 1.1) + 1;
   var min = (Math.min.apply(null,plots) * 0.9) < 1.0 ? 0 : Math.min.apply(null,plots) * 0.9;
   
   //プロットを最小値からの差分に変換します
   for( var i = 0 ; i < plots.length ; i ++){
       plots[i] -= Math.round(min);
   }
   
   //さらにグラフの高さを100pxとしプロットの単位あたり何pxかを計算します
   var GCHART_HEIGHT = 100;
   var GCHART_WIDTH  = 600;

   gchart_unit_value = (GCHART_HEIGHT / (max - min) );
   for( var i = 0 ; i < plots.length ; i ++){
     plots[i] *= Math.round(gchart_unit_value);
   }
   
   //折れ線グラフにマーカーもつけます
   var mark  = new Array();
   for( var i = 0 ; i < plots.length ; i ++){
      mark.push("x,09b6c1,0,"+i+",5")
   }

   //次はx軸に表示させる日付を計算します
   var dates = new Array();

   var current_month = 0;
   for( var i = 0 ; i < plots.length ; i ++){
     //プロットの最初の日付はAPIから取得できます
     var current_date = new Date(data.start);
     //そこから1日づつ追加していきます
     current_date.setDate(current_date.getDate() + i);
     if(current_month != current_date.getMonth()){
       //プロットの途中で月またぎがあった場合
       //に月も表示するようにします
       current_month = current_date.getMonth();
         dates.push((current_date.getMonth()+1) + "/" + current_date.getDate());
     }else{
       //それ以外は日付のみ
       dates.push(current_date.getDate());
     }
   }

   //最後にGoogle Chart APIにデータを渡して表示しておわりです
   var image_tag = document.createElement('img');
   image_tag.src = "http://chart.apis.google.com/chart?chs="
   +GCHART_WIDTH
   +"x"
   +GCHART_HEIGHT
   +"&chd=t:"
   +plots.join(",")
   +"&chco=09b6c1&cht=lc&chxt=x,y&chxl=0:|"
   +dates.join('|')
   +"|1:|"
   +Math.round(min)
   +"|"
   +Math.round(max)
   +"&chm="
   +mark.join("|");
   document.body.appendChild(image_tag)
}
//]]>
</script>
</body>
</html>

これによって　該当記事がいつ　盛り上がったのかが　なんとなくわかるようになりました！
Pathtraq APIって楽しいですね!