Google Chart Tools - 動的なグラフの変更 | プログラマーズ雑記帳

Google Chart Tools - 動的なグラフの変更

Google Chart Tools では基本的にページのロード時にグラフの作成を行います。今回は一度作成したグラフを動的に変更する方法についてです。

再描画(ブラウザーのリサイズへの対応)

Google Chart Tools では、 100%, 80% といったページサイズに合わせたグラフの作成が可能です。
しかし、ブラウザーのサイズを変更した場合には、それに追従して再描画するところまでは行いません。

動的なグラフの変更の手始めとして、このブラウザーへのリサイズに合わせて再描画できるグラフを作成します。

ブラウザーのサイズを変更すると <body> で onresize イベントが発生します。
ここでグラフの再描画を行います。

<html>
  <head>
    <title> リサイズするグラフのサンプル </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});
      var resizable_chart;
      var resizable_options;
      var resizable_data;
      google.setOnLoadCallback(
          function () {
              resizable_data = google.visualization.arrayToDataTable([
                  [    '', '売上高', '営業利益', '経常利益'],
                  ['2004',     1000,        400,        380],
                  ['2005',     1170,        460,        400],
                  ['2006',      660,       1120,        900],
                  ['2007',     1030,        540,        480],
                  ['2008',     1350,        750,        800],
                  ['2009',     1205,       1010,        805],
                  ['2010',      880,        585,        500],
                  ['2011',     1450,       1300,       1005],
                  ['2012',     1105,        770,        650],
              ]);
      
              resizable_options = {
                  title: '会社業績'
              };
      
              resizable_chart = new google.visualization.LineChart(document.getElementById('gct_resizable_chart'));
              resizable_chart.draw(resizable_data, resizable_options);
          }
      );

    </script>
  </head>
  <body onresize="resizable_chart.draw(resizable_data, resizable_options);">
    <div id='gct_resizable_chart' style="width=100%; height=200pt"></div>
  </body>
</html>

ここでポイントはデータ、グラフ、オプションの変数をグラフの作成関数の外で宣言しているところです。これらの変数を使って onresize 時にグラフを描画しています。

オプションの変更(表のページ分割量の変更)

以前の記事で表のページ分割方法について説明しました。

Google Chart Tools - 表とデータの扱い # ページ分割 | プログラマーズ雑記帳

この際、 1 ページの項目数は固定でした。項目数を変更できた方がユーザーは使いやすいでしょう。
グラフのオプションの変更のサンプルとして、このページ分割量を変更できるテーブルを作成します。

Google Code Playground # Table Paging

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

  google.load('visualization', '1', {packages: ['table']});
  
  // 関数外で宣言
  var visualization;
  var paging_data;
  var paging_options = {'showRowNumber': true};
  
  function create_paging_table () {
      var dataAsJson =
          {cols:[
              {id:'A',label:'名前',type:'string'},
              {id:'B',label:'身長',type:'number'},
              {id:'C',label:'出席',type:'boolean'},
              {id:'D',label:'時刻',type:'timeofday'}],
           rows:[
               {c:[{v:'Dave'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:[12,25,0,0],f:'12:25:00'}]},
               {c:[{v:'Peter'},{v:185.0,f:'185'},{v:false,f:'FALSE'},{v:[13,15,0,0],f:'13:15:00'}]},
               {c:[{v:'John'},{v:145.0,f:'145'},{v:true,f:'TRUE'},{v:[15,45,0,0],f:'15:45:00'}]},
               {c:[{v:'Moshes'},{v:198.0,f:'198'},{v:true,f:'TRUE'},{v:[16,32,0,0],f:'16:32:00'}]},
               {c:[{v:'Karen'},{v:169.0,f:'169'},{v:true,f:'TRUE'},{v:[19,50,0,0],f:'19:50:00'}]},
               {c:[{v:'Phil'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:[18,10,0,0],f:'18:10:00'}]},
               {c:[{v:'Gori'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:[13,15,0,0],f:'13:15:00'}]},
               {c:[{v:'Bill'},{v:155.0,f:'155'},{v:false,f:'FALSE'},{v:[7,40,48,0],f:'7:40:48'}]},
               {c:[{v:'Valery'},{v:199.0,f:'199'},{v:true,f:'TRUE'},{v:[6,0,0,0],f:'6:00:00'}]},
               {c:[{v:'Joey'},{v:187.0,f:'187'},{v:true,f:'TRUE'},{v:[5,2,24,0],f:'5:02:24'}]},
               {c:[{v:'Karen'},{v:190.0,f:'190'},{v:true,f:'TRUE'},{v:[6,14,24,0],f:'6:14:24'}]},
               {c:[{v:'Jin'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:[5,45,36,0],f:'5:45:36'}]},
               {c:[{v:'Gili'},{v:178.0,f:'178'},{v:true,f:'TRUE'},{v:[6,43,12,0],f:'6:43:12'}]},
               {c:[{v:'Harry'},{v:172.0,f:'172'},{v:false,f:'FALSE'},{v:[6,14,24,0],f:'6:14:24'}]},
               {c:[{v:'Handerson'},{v:175.0,f:'175'},{v:true,f:'TRUE'},{v:[6,57,36,0],f:'6:57:36'}]},
               {c:[{v:'Vornoy'},{v:170.0,f:'170'},{v:true,f:'TRUE'},{v:[13,12,0,0],f:'13:12:00'}]}]};
      paging_data = new google.visualization.DataTable(dataAsJson);
  
      paging_options['page'] = 'enable';
      paging_options['pageSize'] = 5;
  
      paging_table = new google.visualization.Table(document.getElementById('gct_paging_table'));
      draw_paging_table();
  }
  
  
  // テーブルの描画
  function draw_paging_table() {
      paging_table.draw(paging_data, paging_options);
  }
  
  google.setOnLoadCallback(create_paging_table);
  
  // ページ分割時の項目数を設定
  function setNumberOfPages(value) {
      if (value) {
          paging_options['pageSize'] = parseInt(value, 10);
          paging_options['page'] = 'enable';
      } else {
          paging_options['pageSize'] = null;
          paging_options['page'] = null;  
      }
      draw_paging_table();
  }

</script>
<form action=""
      style="margin-top: 10px; margin-bottom: 5px; padding: 5px; border: 1px solid gray; background-color: buttonface;">
  <span style="font-size:10pt;">表示する行数:</span>
  <select style="font-size:10pt;" onchange="setNumberOfPages(this.value)">
    <option value="">すべて表示</option>
    <option value="3">3</option>
    <option selected="selected" value="5">5</option>
    <option value="7">7</option>
    <option value="10">10</option>
  </select>
</form>
<div id="gct_paging_table"  style="width:400px; height:220px;"></div>

リサイズ時の方法と同様に必要な変数をグラフ作成関数外で宣言し、メニューの変更イベントで、オプションを変更して再描画しています。

データの変更(インタラクティブな計器図)

データテーブルは作成後も setValue() などのメソッドで値を変更することができます。

DataTable::setValue(行番号, 列番号, 新しい値)
// 行番号には列情報の行は含みません

データを変更して再描画を行うことによって、動的にグラフを変更することが可能です。

サンプルとして動的に値を変更できる計器図の例を挙げます。

Google Code Playground # Gauge Interaction

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

  google.load('visualization', '1', {packages: ['gauge']});
  
  var dynamicGauge;
  var dynamicGaugeData;
  var dynamicGaugeOptions;

  // グラフの作成関数
  function drawDynamicGauge() {
      dynamicGaugeData = google.visualization.arrayToDataTable([
          ['Speed'],
          [70]
      ]);
      
      dynamicGauge = new google.visualization.Gauge(document.getElementById('gct_dynamic_gauge'));
      dynamicGaugeOptions = {
          max: 160,
          greenFrom: 40,
          greenTo: 60,
          yellowFrom: 60,
          yellowTo: 100,
          redFrom: 100,
          redTo: 160,
          minorTicks: 8
      };
      dynamicGauge.draw(dynamicGaugeData, dynamicGaugeOptions);
  }

  // データを変更する関数
  function changeSpeed(dir) {
      var diff = dir * 25;
      var newvalue = dynamicGaugeData.getValue(0, 0) + diff;
      if (newvalue < 0)
          newvalue = 0;
      // データの値を変更
      dynamicGaugeData.setValue(0, 0, newvalue);
      dynamicGauge.draw(dynamicGaugeData, dynamicGaugeOptions);
  }
  
  google.setOnLoadCallback(drawDynamicGauge);

</script>
<div id="gct_dynamic_gauge" style="width: 160px; height: 160px;"></div>
<input type="button" value="Down" onclick="changeSpeed(-1)" />
<input type="button" value="Up" onclick="changeSpeed(1)" />