Google Chartsとは

Google様が提供しているWEB上のグラフ作成API？ツール？です。

JavaScriptでデータとパラメタを与えるだけでSVGを使った

きれいなグラフをブラウザ上の描画できます。

グラフの例を見るとよくわかります

 

Google Chartsの優れているところは

• カスタマイズ性が高い
• 画像でなくHTMLキャンバスで描画する
  • イベントのバインドやアニメーション動作ができる
• よくも悪くもGoogle様製。

 

簡単な使いかた

まずGoogle様APIを利用する為、スクリプトファイルの読み込みを

HTML上に記載します。

bodyタグの中でも大丈夫です。

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

 

つぎに使うAPIの定義です。

上で読み込んだスクリプトはchartsだけでなく、他のAPIも読み込むことができますが

今回はchartsだけを利用するので以下のようになります。

  <script>
    google.load('visualization', '1.0', {'packages':['corechart', 'gauge', 'timeline']});
  </script>

google.loadの第１引数がAPIの種類、第２引数がバージョン、第３引数にオプションをつけます。

chartsの場合、オプションのpackageの部分に使うchartsの種類を指定します。

corechartを読めば基本のグラフは出ると思いますが、

gaugeやtimelineといったcorechartに含まれないものを使う場合、

追加が必要になります。

 

描画にはgoogle.visualization.DataTableを作成し、

chartに渡す必要があります。

 

DataTableの作成方法はいくつかありますが、

以下３パターンの書き方をサンプルとして記載します。

 

コードにてDataTableを作成するパターン

      var data = new google.visualization.DataTable();
      data.addColumn("string", "Label");
      data.addColumn("number", "Value");
      
      data.addRows([
        ["小便タンク", {v:80, f:"80%"}],
        ["小便タンク2", {v:70, f:"70%"}]
      ]);

カラムを定義し、Rowをつめていく形式です。

addRows/addRowあたりのメソッドを利用します。

コードとしてはわかりやすいですね。

 

JSONからDataTableを作成するパターン

      var json = {
        cols: [
          {label: "Label", type:"string"},
          {label: "Value", type:"number"},
        ],
        rows: [
          {c:[{v:'しょんべんタンク'},{v:80,f:'80%'}]}
        ]
      };
      var data = new google.visualization.DataTable(json);

JSONからも作成することができます。

ただしJSON文字列が複雑な為、作成には骨が折れることでしょう。

この方法だとロードが早いとのことなので、大量データ向けでしょうか。

 

配列から作成するパターン

      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['小便タンク', 80]
      ]);

配列で作成するパターンです。

この形式はシンプルですが、カラムの型が変えられないなど

制限もありますので注意してください。

 

DataTableができたら描画です。

オプションパラメータとともに以下のような感じで記載すれば

ＯＫでしょう。

      var options = {
        width: 400,
        height: 120,
        redFrom: 90, redTo: 100,
        yellowFrom:75, yellowTo: 90,
        minorTicks: 5
      };
      
      var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
      chart.draw(data, options);

chat.drawで渡しているdataが上で作成したdataTableになります。

今回の例ではGaugeグラフを使っていますが、

別のグラフを利用する際はgoogle.visualization.Xxxxxのように書き換えてください。

 

 

ハマりどころ

上記の内容で動作するはず！なのですが、いくつかハマったのでメモします。

 

google.loadしたら真っ白画面になった

試した環境がajaxでhtmlをガジェットのように読み込み、

divにはめ込むという呼び方をしていました。

ajax読みこみ先のhtmlでgoogle.loadしたら画面が真っ白。

見てみるとheadタグだけになっており、bodyタグが全くなくなっていました。

 

stackOverFlowあたりから調べたところ、

google.loadはdocument.writeを使ってて先に呼び出さないと云々…

 

ということで呼び出し元htmlにscriptの読み込みとgoogle.load処理を書き

（使うチャートやAPIは仕方ないので先に定義しちゃう）

動かしたところ問題なく動きました。

 

動かないグラフがある

上の方でも書きましたが、google.loadする時に

グラフによっては利用するpackageを定義する必要があります。

google.load('visualization', '1.0', {'packages':['corechart', 'gauge', 'timeline']});

 

タイミングによってエラーになる

読み込みタイミングによってエラーが出る場合、

google.loadが完了する前に描画しようとしてしまっているかもです。

公式サイトにあるように

google.setOnLoadCallback(ファンクション;

のようにsetOnLoadCallbackのコールバックに描画処理を入れましょう。

google.loadが完了してからsetOnLoadCallbackが呼び出されます。

 

 jQueryで描画対象のDIVを指定するとContainer is not defined

jQueryオブジェクトが配列返しが基本になっているのが引っかかる。

描画対象のDIVは単一しか受け取れない模様。

jQueryで描画対象のDIVを検索して渡したいのなら

var chart = new google.visualization.Gauge($("body").find('.gauge_div')[0]);
      chart.draw(gaugeData, options);

１行目最後の[0]がポイントです。

配列でなく、インデックス指定した単一の要素を渡す必要があるようです。