Google Chart APIで動的にグラフ生成

WordPress内のデータをGoogle Chart APIで動的にグラフ作成。

ふと急にGoogle Chart APIを使ってみたくなり、WordPress内のデータを使って動的にGoogle Chart APIでグラフを出力するテストをしてみた。

とりあえず、カテゴリごとの記事の割合をグラフにしてみる…こういう目的ならタグクラウドで十分な気もするけど、将来的に応用できそうなので、メモということで。

※先に言ってしまうと、Google Chart APIはまだ日本語対応が十分でなく、ひらがなとカタカナしか表示できません…しかもフォントも微妙。カテゴリースラッグにアルファベット入れてあれば下のコード内のnameの代わりにslagに差し替えて即使えます。
 
Google Chart API
※漢字が文字化け…こちらの開発メンバーによるコメントでは「取り組んでるけど、簡単じゃないよ」とのことです。。。

ということで日本語はまだ使えないですが、以下解説。

■やっていること:
Google Chart APIは、imgタグのsrcにパラメータ付きのURLを埋め込んでやるだけで簡単にグラフ画像を取得できます(ユーザー登録など不要)。なので、そのURLのパラメータをつくってあげます。カテゴリごとの記事数を取得して、記事の総数に対するパーセンテージを割り出し、APIの書式に従って出力します。

■ソース:
ver.2.3以上(2.5で確認)
<?php
global $wpdb;

//記事の総数を取得のため
$allposts = new WP_Query("showposts=-1");

$sql = "SELECT * FROM " .$wpdb->terms ." t ";
$sql.= " LEFT JOIN ".$wpdb->term_taxonomy ." tt ON t.term_id = tt.term_id ";
$sql.= " WHERE tt.taxonomy != 'link_category' ";
$sql.= " GROUP BY t.term_id ";
$sql.= " ORDER BY tt.count DESC ";
$mycat = $wpdb->get_results($sql);

//カテゴリごとの記事数のパーセンテージを記事総数から割り出してカンマ区切りで並べる。
//同時に、対応するカテゴリ名を「|」区切りで並べる。
//カウントが0のカテゴリは拾わない。

for($i = 0; $i < count($mycat); $i++){
if ( $mycat[$i]->count != 0 ){
if ($i != 0 ){
$count = $count .",";
$cat_list = $cat_list ."%7C";
}
//post_countで記事総数を取得
$count = $count .round($mycat[$i]->count / $allposts->post_count *100 );
$cat_list = $cat_list .$mycat[$i]->name;
}
}

$url ="<img src='http://chart.apis.google.com/chart?";
$url.="cht=p";
$url.="&chtt=Google%20Chart%20TEST";
$url.="&chs=450x190";
$url.="&chd=t:" . $count; // ←カテゴリごとのパーセンテージを挿入
$url.="&chco=0000ff";
$url.="&chl=" .$cat_list; // ←それぞれのカテゴリ名をラベルとして挿入
$url.="' alt='Google Chart TEST' />";

echo $url;

?>


■ver2.2以前(ME2.2.3で動作確認)※テーブル構造が違うため
<?php
global $wpdb;

//記事の総数を取得のため
$allposts = new WP_Query("showposts=-1");

$sql = "SELECT * FROM " .$wpdb->categories;
$sql.= " ORDER BY category_count DESC ";
$mycat = $wpdb->get_results($sql);

//カテゴリごとの記事数のパーセンテージを記事総数から割り出してカンマ区切りで並べる。
//同時に、対応するカテゴリ名を「|」区切りで並べる。
//カウントが0のカテゴリは拾わない。

for($i = 0; $i < count($mycat); $i++){
if ($mycat[$i]->category_count != 0){
if ($i != 0 ){
$count = $count .",";
$cat_list = $cat_list ."%7C";
}
//post_countで記事総数を取得
$count = $count .round($mycat[$i]->category_count / $allposts->post_count *100 );
$cat_list = $cat_list .$mycat[$i]->cat_name;
}
}

$url ="<img src='http://chart.apis.google.com/chart?";
$url.="cht=p";
$url.="&chtt=Google%20Chart%20TEST";
$url.="&chs=450x190";
$url.="&chd=t:" . $count; // ←カテゴリごとのパーセンテージを挿入
$url.="&chco=0000ff";
$url.="&chl=" .$cat_list; // ←それぞれのカテゴリ名をラベルとして挿入
$url.="' alt='Google Chart TEST' />";

echo $url;

?>


以上

■結果:
出力した結果は先の図…文字化けしています。カテゴリごとの記事のパーセンテージが円グラフになり、それぞれに対応するカテゴリ名がラベルとして出力されます。グラフの形や色などパラメータについてはこちらのDeveloper's guideにいろいろ解説されています。

カスタムフィールドに設定した値を集計してあげれば、いろいろ応用できそうですね。ページごとのアクセス数の推移などもプラグインを併用すれば比較的簡単にグラフ化できそうです。そしてログインしたクライアントにのみ表示する、など。

参考記事)
Google Hacks: Pacman graph with Google Charts Matt Cutts: Gadgets, Google, and SEO (2008/4/24)
WEB API - Google Code Chart キター 404 Blog Not Found (2007/12/7)

↑ PageTop

この記事へのコメント
コメントを書く
name

mail

url

comment

認証コード: *


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。