Google Chart Tools を使ってWordPressにグラフを描画してみた

Webページ上にグラフを描画する場合は、Google Chart Toolsが便利です。ライブラリなどをダウンロードすることなく、スクリプトを指定するだけで使えます。見た目はいかにもGoogleらしさがありますが、とても便利なので押さえておくと良いでしょう。

Google Chart Toolsは、なんとWordPressにも貼り付けられます。Webページなので当たり前と言えば当たり前なのですが、WordPressはスクリプトを伴う場合は制限がかかったりするので、うまく行かないケースがあったりします。

でも、Google Chart Toolsはうまく行きました。今回はそれを紹介。

[ad#top-1]

まずは完成形から

こんな感じにブログに埋め込んでみました。

グラフ上にマウスをかざすと凡例や数値が現れます。↓こんなふうに。（下図はキャプチャ画像です）

 

まずはGoogle Chart Toolsの基本形

WordPressに貼り付ける前に、通常のWebページ上でGoogle Chart Toolsを利用する方法を紹介します。下の例は円グラフです。

 

まずは、以下でGoogle Chart ToolsのAPIを読み込みます。

<script src="http://www.google.com/jsapi"></script>
　　

 

以降は自分でコーディングしていくわけですが、最初の初期設定として以下の一文を書きます。おまじない程度に考え、必ず最初に書きましょう。

google.load("visualization", "1", {packages:["corechart"]});
 

 

次にGoogle Chart Toolsロード時のコールバック関数を設定します。ここではdrawChartという関数がコールされるようになっています。

google.setOnLoadCallback(drawChart);
 

 

以降は13行目以降の、function drawChart() 関数内でグラフを描画します。

 

WordPressへの貼り方

WordPressへの貼り方は至って簡単で、まず自分で書いたJavaScript部分を別ファイルに保存します。ファイル名はgct.jsとしておきます。

 

このファイルを自分のサーバーにアップロードしておきます。

 

で、WordPressへの埋め込み方ですが、HTMLエディタにして以下のタグを埋め込めばOKです。

<div id="chart"></div>

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://***/gct.js"></script>
　

 

上記のようにすると、以下のようなチャートが現れます。

WordPressではスクリプトを埋め込むことに制約があります。JavaScriptのソースコードをそのまま記述することはできませんが、外部ファイルとして外出しすればうまくいく場合があります。Google Chart Toolsはそれでうまく貼り付けできるみたいですね。

[ad#ad-1]

 - HTML/JavaScript