F.Ko-Jiの「一秒後は未来」

ブログの各記事のページビューを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軸のラベルもきれいにできるのかなと思います。

いやぁ、便利すぎる。

  1. レゲエ情報屋 より:

    こんばんわ。初めてのコメントなので何か緊張します。。^^;

    各記事のページにGoogle Chart APIを利用して、過去30日間の各記事のページビューをグラフ表示させる方法ですが・・
    記事に貼り付ける手順を教えていただけないでしょうか??^^;
    とても気にいりまして。。^^;
    是非自分のブログにも表示させたいと思ってます。。^^;

  2. F.Ko-Ji より:

    >>レゲエ情報屋さま
    はじめまして。コメントありがとうございます。

    グラフは上の本文中にあるようなURLを生成して、
    それを img タグの src 属性に指定してあげる必要があります。

    グラフのURLに色々とパラメータをつけることで、
    自由にグラフを生成することができます。
    実際にパラメータを変えつつ色々試してみるといいかなと思います。

    あと、ページビューのデータは自分で別途集めておく必要があります。

  3. すいません・・・上記のパラメータを
    見て自分用に設定したのですが・・・
    F.Ko-Ji様のアクセス数(マフラーの巻き方をおさらいできる6サイトの記事のアクセスです)と同じグラフになってました。。^^;

    ちなみにBlog URLはhttp://blog.livedoor.jp/reggae_news/です。

    何が間違ってるのかわからないのですが・・・
    指摘するところがあれば是非お願いします。。

  4. F.Ko-Ji より:

    >>レゲエ情報屋さま

    chd というパラメータが「グラフの値」になるので、ここを自分のサイトのPVに変更する必要がありますよ。

    http://code.google.com/apis/chart/#text

  5. どうもありがとうございます。
    http://code.google.com/apis/chart/#textを参考に、
    自分のblog PV数を設定してblogで確認したのですが・・・
    どの記事もグラフの線が斜め直線になってまして。。。
    苦戦している状況です。。^^;

    blogのPV数が大体600ぐらいです。。
    設定したURLはソースでご確認くださいませ。。^^;

  6. F.Ko-Ji より:

    こんにちは。

    「chd=t:600.0,1.0」とされていると思いますが、要するにこれだとカンマ区切りで2個しか値を設定していないので、その2点(600と1)を結ぶ直線になっているんです。(正確にはグラフの最大値は100なので、100と1を結ぶ直線になっている)

    なので、たとえば chd=t:60,30,10,6 とすれば4点を結ぶ折れ線になります。

    グラフはパラメータに指定した値通りの形を描きます。

  7. お返事ありがとうございます。
    chd=t:60,30,10,6で設定しました。
    先程のコメントで追記を忘れておりましたが、
    一つ一つ各記事ごとにURL入れるの面倒くさいので、
    livedoor blogのデザイン設定にある「トップページ」と「個別記事ページ」で、
    URLを設定したのですが・・・これで各記事ごとのアクセス数を
    Googleのグラフが描いてくれるという認識であってますでしょうか・・??

    もしくは各記事ごとにURLを設定しても、
    グラフの値(描き)は同じという事でしょうか?
    ↑ここが一番気になっておりまして。。。

  8. F.Ko-Ji より:

    chd=t:60,30,10,6 とやっても全部同じ値のグラフになるだけですよ。

    Googleはページビューを知りません。そのため、各ページごとに個別にパラメータを設定してあげないといけません。

    最初のコメントに「ページビューのデータは自分で別途集めておく必要があります」と書きました。そのデータを元に各記事ごとに別々のパラメータを生成させる必要があります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など