ブログの各記事のページビューをGoogle Chart APIでグラフ表示させてみた
久々にアツイAPIが登場したの早速導入。
このブログでは毎日Apachのログを解析してページビューをデータベースに取り込んで溜めています。そこで、Google Chart APIを利用して、過去30日間の各記事のページビューをグラフ表示させてみました。
すべてのエントリーページの記事の終わりのほうにグラフを設置しています。
たとえば、「マフラーの巻き方をおさらいできる6サイト」のPVグラフはこんな感じ。
次のようなURLをプログラムで生成させています。
http://chart.apis.google.com/chart? chs=480x200 &cht=lc &chd=t:54.7,100,9.8,6.1,4.6,16.6,8,4.5,3.4,2.9,3.2,3.4,2.9,2.6,2.8,2.2,2.9,2.4,4,3.6,3.2,3.3,3.2,3,3.3,3.7,3.2,3.7,3.7,3.6 &chxt=x,y &chxl=0:|11/07|11/10|11/13|11/16|11/19|11/22|11/25|11/28|12/01|12/04 &chxr=1,0,24798 &chg=3,10,1,4 &chls=3,1,0 &chtt=Page+View+of+http://blog.fkoji.com/2007/11052207.html &chco=0000ff
以下、上記のパラメータについて解説。
chs: グラフのサイズ(幅x高さ) cht: グラフの種類。lcは折れ線グラフ。 chd: グラフのデータ。Text Encodingの場合は0から100までの値しか取れないので、正規化する必要がある。 chxt: ラベルを表示させたい軸 chxl: 軸のラベル。すべてを羅列する場合。 chxr: 軸のラベル。範囲指定する場合。 chg: 背景グリッド。x軸のグリッド間隔, y軸のグリッド間隔, 破線の長さ, 破線の間隔 chls: 折れ線のスタイル。太さ, 破線の長さ, 破線の間隔 chtt: グラフのタイトル chco: 折れ線の色
「mixiで芸能人を見つける6つの方法」の場合はこんな感じのグラフになっています。
ここでは正規化するときに必ず最大値で割り算しているのでY軸のMAX値が中途半端な数値になってしまっていますが、うまくキリのいい数値で正規化してあげればY軸のラベルもきれいにできるのかなと思います。
いやぁ、便利すぎる。
コメントを残す
著者について
こんばんわ。初めてのコメントなので何か緊張します。。＾＾；
各記事のページにGoogle Chart APIを利用して、過去30日間の各記事のページビューをグラフ表示させる方法ですが・・
記事に貼り付ける手順を教えていただけないでしょうか？？＾＾；
とても気にいりまして。。＾＾；
是非自分のブログにも表示させたいと思ってます。。＾＾；
>>レゲエ情報屋さま
はじめまして。コメントありがとうございます。
グラフは上の本文中にあるようなURLを生成して、
それを img タグの src 属性に指定してあげる必要があります。
グラフのURLに色々とパラメータをつけることで、
自由にグラフを生成することができます。
実際にパラメータを変えつつ色々試してみるといいかなと思います。
あと、ページビューのデータは自分で別途集めておく必要があります。
すいません・・・上記のパラメータを
見て自分用に設定したのですが・・・
F.Ko-Ji様のアクセス数（マフラーの巻き方をおさらいできる6サイトの記事のアクセスです）と同じグラフになってました。。＾＾；
ちなみにBlog URLはhttp://blog.livedoor.jp/reggae_news/です。
何が間違ってるのかわからないのですが・・・
指摘するところがあれば是非お願いします。。
>>レゲエ情報屋さま
chd というパラメータが「グラフの値」になるので、ここを自分のサイトのPVに変更する必要がありますよ。
http://code.google.com/apis/chart/#text
どうもありがとうございます。
http://code.google.com/apis/chart/#textを参考に、
自分のblog PV数を設定してblogで確認したのですが・・・
どの記事もグラフの線が斜め直線になってまして。。。
苦戦している状況です。。＾＾；
blogのPV数が大体600ぐらいです。。
設定したURLはソースでご確認くださいませ。。＾＾；
こんにちは。
「chd=t:600.0,1.0」とされていると思いますが、要するにこれだとカンマ区切りで2個しか値を設定していないので、その2点(600と1)を結ぶ直線になっているんです。(正確にはグラフの最大値は100なので、100と1を結ぶ直線になっている)
なので、たとえば chd=t:60,30,10,6 とすれば4点を結ぶ折れ線になります。
グラフはパラメータに指定した値通りの形を描きます。
お返事ありがとうございます。
chd=t:60,30,10,6で設定しました。
先程のコメントで追記を忘れておりましたが、
一つ一つ各記事ごとにURL入れるの面倒くさいので、
livedoor blogのデザイン設定にある「トップページ」と「個別記事ページ」で、
URLを設定したのですが・・・これで各記事ごとのアクセス数を
Googleのグラフが描いてくれるという認識であってますでしょうか・・？？
もしくは各記事ごとにURLを設定しても、
グラフの値（描き）は同じという事でしょうか？
↑ここが一番気になっておりまして。。。
chd=t:60,30,10,6 とやっても全部同じ値のグラフになるだけですよ。
Googleはページビューを知りません。そのため、各ページごとに個別にパラメータを設定してあげないといけません。
最初のコメントに「ページビューのデータは自分で別途集めておく必要があります」と書きました。そのデータを元に各記事ごとに別々のパラメータを生成させる必要があります。