【Google Charts】動的にグラフを更新する方法

公開日: : JavaScript/jQuery, グラフ

スポンサーリンク

はじめに

Webサイト上でグラフを描こうと思った場合、いくつかのJavascriptのプラグインがありますが、今回はGoogle Chartsを使ってグラフを描きましたのでその方法を紹介します。本家サイトのサンプルはページ読み込み時にグラフの形が決定してしまうものですが、少し工夫して動的にグラフを更新できるようにしたのでその方法を紹介します。今回は線グラフを対象としましたが、他のタイプのグラフに関しても同じことが言えると思います。

本家グラフ描画

こちらのサンプルコードのページを引用します。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

「google.charts.setOnLoadCallback」メソッドにグラフの描画を指示する関数をコールバックとしてセットしています。私が試した限り、ここに設定されているdrawChart関数内部で実行しているgoogle.visuallization以下のメソッドはこのコールバックメソッド内に宣言していないとうまく動きませんでした。

ですので、ここから言えるのは「google.visualization」の要素を利用したい場合はsetOnLoadCallbackに設定しないと難しいということです。

動的グラフ更新

上記結果を踏まえるとクロージャをうまく活用すればできそうです。以下にHTMLを除いたスクリプト部分のみ紹介します。

// 動的にグラフを変更可能なdrawChartクラス
function drawChart() {
	var data = null;
	var chart = null;
	var options = {
		title: '',
		curveType: 'function',
		legend: { position: 'in' },
		hAxis: {title: ''},
		vAxis: {title: ''}
	};
	var defaultDataArray = [];
	
	// タイトルの設定
	this.SetTitle = function(title){
		options.title = title;
	}

	// 各軸名の設定
	this.SetAxisTitle = function(xtitle,ytitle){
		options.hAxis.title = xtitle;
		options.vAxis.title = ytitle;
	}

	// 初期データ配列の設定
	this.SetDefaultDataArray = function(data){
		defaultDataArray = data;
	}

	// setOnLoadCallbackにセットするメソッド(関数を返す)
	this.Get = function(){
      	return function(){
			data = google.visualization.arrayToDataTable(defaultDataArray);
			chart = new google.visualization.LineChart(document.getElementById('chart_div'));
			chart.draw(data, options);
		}
	}
	
	// 値の更新&再描画
	this.Update = function(newData){
		data = google.visualization.arrayToDataTable(newData);
		chart.draw(data, options);
	}
}

var dc = new drawChart();
dc.SetTitle('体重変動グラフ');
dc.SetAxisTitle('経過月[カ月]',"体重変化量[kg]");
dc.SetDefaultDataArray(function(){
   var wd = [];
   wd.push(['Month', '体重変化量[kg]']);
   for(var i=0;i<=12;i++){
      wd.push([i.toString(),0.0]);
   }
   return wd;
}());

// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(dc.Get());

これは元のサンプルコードをそのまま転用したものでなく申し訳ないのですが、「体重変化計算シミュレータ」作成時のソースをそのまま持ってきました。タイトルや配列の値をSetメソッドで代入できるようなある程度汎用的な作りにしています。

まず、「drawChart」ですが、関数でなくクラスとして、その内部でコールバック用の関数を返すGetメソッドを作成しました。コードの最後で「google.charts.setOnLoadCallback(dc.Get())」で設定しているのがわかると思います。ここで返した関数はdrawChartクラスの一部のためその内部メソッドを利用することができるはずで、この「chart」をクラスのプロパティとしておくことで後から変更を加えられるようにしています。

実際の更新時はUpdateメソッドを呼びます。ここにグラフにする配列を代入することでグラフを更新しています。

これが動作している様子はこのデモからご覧ください。

まとめ

Google Chartsを利用してWebサイト上にグラフを描画しました。また、値の更新時にグラフが動的に変更されるように工夫を施しました。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑