非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

   

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

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

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

広告

まずは完成形から

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

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

 

まずは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はそれでうまく貼り付けできるみたいですね。


ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - HTML/JavaScript