プログラマーズ雑記帳

スポンサー広告

スポンサーサイト

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加  
Prev.    Category    Next 
JavaScript  »  Google Chart Tools

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

Tag Javascript 使い方 ライブラリー グラフ 表

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 

trackback

新規トラックバック


この記事にトラックバックする(FC2ブログユーザー)

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

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

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

02月 | 2019年03月 | 04月
日 月 火 水 木 金 土
- - - - - 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 - - - - - -


最新記事
カテゴリー
┗SNS (7)
はてな新着記事
はてな人気記事
シリーズもの
このブログをリンクに追加する
タグ

使い方 Emacs Redmine インストール ガイド JavaScript 開発記 Ruby C++ Rails 用語集プラグイン プラグイン C# altjs ライブラリー Redmine入門 VS Redmineインフォメーション ツール グラフ FC2ブログ ブログ TestLinkLink クイズ コンパイル 言語比較 国際化 テキスト UML 書き方 Dart 正規表現 ブラウザ SNS 設定 JVM言語 Node.js C++11-14 Qt Word バージョン管理システム K2Editor web制作 チケット Wiki Javascript 表 Excel 関数型 秀丸 ex-html-mode.el ライブラリ比較 Clojure 関数型プログラミング 英語 インターフェース .NET TypeScript node.js コードハイライト gem routes ブログカスタマイズ eshell Bookmarklet HTML5 GUI比較 TestLink コンピューター Windows lisp 置換 Boost CSS3 grep Subversion 難読化 Google ジェネリック 文字コード lodash コマンドライン 日本語 汎化 比較 エスケープ 検索 ライセンス ガントチャート PlantUML トラッカー Markdown html Notes GUI python Graphviz Doxygen 歴史 css 配置図 CoffeeScript パッケージ図 オブジェクト図 単語境界 

ブロとも一覧

nabezoco

A級プログラマーへの道
ブロとも申請フォーム

この人とブロともになる

最新コメント
最新トラックバック
FC2投票
無料アクセス解析
FC2投票
無料アクセス解析
プロフィール

yohshiy

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

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

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。

Powered by FC2 Blog

FC2Ad

Copyright © プログラマーズ雑記帳 All Rights Reserved.

<免責事項> 当サイトの情報やコードの利用により生じた損失や損害などについては、 いかなる場合も一切の責任を負いません。

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