スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Prev.    Category    Next 

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 時にグラフを描画しています。

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

以前の記事で表のページ分割方法について説明しました。
この際、 1 ページの項目数は固定でした。 項目数を変更できた方がユーザーは使いやすいでしょう。
グラフのオプションの変更のサンプルとして、このページ分割量を変更できるテーブルを作成します。
表示する行数:
<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(行番号, 列番号, 新しい値)
// 行番号には列情報の行は含みません
データを変更して再描画を行うことによって、 動的にグラフを変更することが可能です。

サンプルとして動的に値を変更できる計器図の例を挙げます。
<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)" />
関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
15位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
2位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

09月 | 2017年10月 | 11月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。