2024
11
23
2011
07
04
Googleドキュメントのスプレッドシートからグラフを作る。
前回の「GoogleドキュメントのスプレッドシートのデータをWEBページに表示する。」では、Google Spreadsheets のデータを Googele Visualization API を用いて、WEBページのテーブルを作成する方法を説明しました。そして、公開されている URL を指定することにより、テーブルにするサイト「Google Spreadsheet Visualization Table」を紹介しました。
今回は、Google Spreadsheets のデータを Googele Visualization API を用いて取得し、さらにグラフにするページを紹介します。
公開されているスレッドシートの URL を入力すると、スプレッドシートのデータをグラフにするとともに、データをテーブル形式でページに表示します。
Googleドキュメントのスプレッドシートのデータを取得して、グラフにする方法
「Google Spreadsheet Chart」では、入力した URL のスプレッドシートのデータを表示しますが、以下の説明では簡略化して、固定した１つのシートのみを対象とします。また、グラフの種類も１種類とします。なお、Google Spreadsheets のデータを取得するまでは、前回の「Googleドキュメントのスプレッドシートのデータを取得して、WEBページに表示する方法」とほぼ同じです。
スプレッドシートの URL の確認
公開設定したスプレッドシートの URLは次のようなフォーマットになっています 。
https://spreadsheets.google.com/spreadsheet/ccc?key=スプレッドシートのID&hl=言語
jsapi.js のロード
データをテーブルとして表示するところで、Google Visualization API の table パッケージを利用します。そのパッケージをロードするためには、前提として Google Data API の Google AJAX API loader をサーバーから取り込んでおく必要があります。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
パッケージのロード
Google AJAX API loader を取り込んだら、JavaScript クライアントライブラリをロードします。テーブルの作成には、Googele Visualization モジュールの table パッケージが必要です。また、標準的なグラフを利用するには corechart パッケージも必要です。
google.load("visualization", "1", {'packages':['table','corechart']});
モジュールのロード完了後の初期化処理
モジュールのロードが完了した際に行う処理を記述します。これは google.setOnLoadCallback メソッドでイベント登録します。下記の例では、init という変数を与えていますが、この部分に直接、匿名関数を当てることもできます。
init=function(){
//初期化処理
}
google.setOnLoadCallback(init);
初期化処理の内容
google.visualization.Query のインスタンスを生成します。データソースを Google スプレッドシートの公開URL とし、send メソッドを実行すれば、Google スプレッドシートのデータ取得後、コールバック関数が実行されます。次の例では、コールバック関数は handleResponse です。
init=function(){
var sourceSheet=GoogleスプレッドシートのURL;
var query = new google.visualization.Query(sourceSheet);
query.send(handleResponse);
}
コールバック関数の内容
次の例では、Google スプレッドシートからのレスポンスを 仮引数 response で受けています。そして、id属性が'res'である要素にテーブルを、id属性が'res'である要素に縦棒グラフを表示します。
var handleResponse=function(response){
var div =document.getElementById('res');
var chart=document.getElementById('chart');
if(response.isError()) {
div.innerHTML = response.getDetailedMessage();
return;
}
var data = response.getDataTable();
var divTable = new google.visualization.Table(div);
divTable.draw(data);
var divChart = new google.visualization.ColumnChart(chart);
divChart.draw(data);
}
レスポンスにエラーがあった場合には、エラーメッセージを表示し、正常な場合には、テーブルとグラフを表示します。
レスポンスの getDataTable メソッドで、Google Visualization の基本であるデータテーブルの形に Google スプレッドシートのデータが格納されます。
テーブルを表示する要素を指定して、google.visualization.Table のインスタンスを生成します。この google.visualization.Table の draw メソッドでデータテーブルを指定すると、指定した要素の中にデータテーブルのデータがテーブル形式で表示されます。
グラフを表示する要素を指定して、google.visualization.ColumnChart のインスタンスを生成します。この google.visualization.ColumnChart の draw メソッドでデータテーブルを指定すると、指定した要素の中にデータテーブルのデータがグラフで表示されます。
グラフの種類
上記では、縦棒グラフ(ColumnChart)を採用しましたが、他の種類のグラフを利用することもできます。その場合、次の場所の記述を変更します。
var divChart = new google.visualization.ColumnChart(chart);
グラフの種類の主なものは次のとおり
AreaChart 面グラフ BarChart 横棒グラフ CandlestickChart 蝋燭グラフ Gauge ゲージ GeoChart 地域図 LineChart 折れ線グラフ PieChart 円グラフ ScatterChart 散布図 TreeMap 階層図
PR
2011/07/04 (Mon.) Trackback() Comment(0) Google Spreadsheets
Comments
Trackback
Trackback for this entry：
