【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サイト上にグラフを描画しました。また、値の更新時にグラフが動的に変更されるように工夫を施しました。

スポンサーリンク
Amazon

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

関連記事

あなたの腹痛を劇的に改善するたった一つのシンプルな方法

はじめに 私は昔からよくおなかを壊してトイレに駆け込むことが多かった

無料のDAZ Studioに課金しまくってわかったこと

はじめに  初めにお断りしておきますがこれから書く意見はあくまで素人

[最後のレストラン]ジャンヌ「出来らあっ!」

はじめに 「スーパーくいしん坊」という漫画の有名なシーンがこちら

[日本株]特定の個別銘柄の大株主一覧をネットで見る方法

 個別株を購入する際に大株主情報をネットで検索して参考にしようと思った

[DAZ Studio]目線をカメラに向ける方法

DAZ Studioでフィギュアの目線をカメラに向ける方法についてです

→もっと見る

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