2024
11
23
2010
10
05
Google Visualization Table のページ処理。
Google Visualization の Table オブジェクトは、データテーブルのデータを HTML の TABLE として表現しますが、単に表を作成するだけではなく、そこに様々な機能を盛り込んでいます。そのような機能の中でも、ページ処理機能は、とても有用な機能です。今回は、このページ処理機能に焦点を当ててみましょう。
ここでいう「ページ処理機能」とは、一度に表示するデータの件数を定めておき、その次のデータ群を表示したいときは「続き」ボタンを、前を表示したいときは「戻る」ボタンを押すことにより、表示されるデータを切り替えるというものです。
Google Visualization Table でこのページ処理機能を利用するのは、とても簡単です。draw メソッドの第二引数の options オブジェクトに決められたパラメータを指定するだけでよいのです。
コードサンプルを示しましょう。data は、データテーブルオブジェクトとします。
var container=document.getElementById('res');
var table = new google.visualization.Table(container);
var options={page:'enable'};
table.draw(data, options);
container は、HTMLテーブルを表示する場所の要素です。上記の例では、id 属性が「res」である要素です。
new 演算子を使って、google.visualization.Table のインスタンスを生成します。
テーブル設定オプションをオブジェクト形式で記述します。ページングを行う場合には、上記のように「page:'enable'」と記述します。
そして、Table オブジェクトの draw メソッドを実行します。そうすると、container 要素内に、データテーブルのデータが、HTML テーブルとして表示されます。
draw メソッドの第二引数は省略可能です。これを省略した場合には、デフォルトの値が適用されます。
page プロパティのデフォルト値は、「enable」なので、オプション指定がなければ、ページングは行われません。
また、ページングを指定した場合に一度に表示される件数のデフォルト値は「10」です。これを変更したい場合は、「pageSize」プロパティで指定します。「pageSize」の指定は、ページングを指定した場合のみ有効です。
（例）var options={page:'enable', pageSize:20};
この他、最初に表示するページを指定することもできます。「startPage」プロパティがそれです。そのデフォルト値は「0」です。
それでは、この Google Visualization Table のページ処理機能を利用して、Google Spreadsheets のデータを表示するサンプルページを示しましょう。
■サンプルページ
gVss_query_page.html
PR
2010/10/05 (Tue.) Trackback() Comment(0) Google Visualization
2010
10
04
Google Visualization Query Language の関数を使ってみる。
前回の「Google Visualization Query で利用できる関数」 では、Google Visualization の Query Language でどのような関数を利用できるかを紹介しました。
今回は、その関数を使うとどのようなクエリのレスポンスがあるか調べてみましょう。
関数の１つにカラムのデータ個数を数える「count」というものがあります。これを使ってみましょう。下のサンプルページの「gVss_query_count.html」がその利用例です。
このページのソースは、他の Google Spreadsheets のシートや別のクエリにも流用しやすいように記述しています。次の id 属性を持つ DIV 要素の innerHTML の記述を変えれば、指定した Google Spreadsheets のシートや別のクエリを実行できます。流用したい方は、ソースを編集して下さい。このページへのリンクを設定していただけば、複製、改変は自由です。
・ss
・queryStatement
■ サンプルページ
gVss_query_count.html
上記のサンプルページでは、クエリの結果を drawメソッドを用いて、HTMLのテーブルで表示するとともに、最初の行の最初のカラムの値をアラート表示させています。
「select count(A)」のように集計関数を用いたカラムを１つしか指定していなければ、クエリのレスポンスのカラムも１つです。また、グループ化していなければ、行は１つだけです。したがって、行数、カラム数とも１つだけのテーブルの表示となっているはずです。そして、その１つだけの値がアラート表示されたのではないでしょうか。このように、クエリのレスポンスから取得する dataTable のデータは、二次元配列のような形式を取ることに注意しましょう。たとえ返されるデータが１つであっても、行とカラムのインデックスで場所を指定する必要があるのです。
2010/10/04 (Mon.) Trackback() Comment(0) Google Visualization
2010
10
01
Google Visualization Query で利用できる関数
Google Visualization の Query Language は、SQL に似ています。指定したカラムの最高値(max)や最小値(min)などもSELECT 文で取得することができます。今回は、Google Visualization の Query Language で利用できる関数と算術演算子をリストアップしました。
■集計関数
avg 平均値
count 個数
max 最高値
min 最小値
sum 合計値
■日付時刻関数（括弧内は、パラメータにできるデータタイプ）
year 西暦(date,datetime)
month 月（date,datetime）※１月は 0
day 日（date,datetime）
hour 時（datetime,Timeofday）
minute 分（datetime,Timeofday）
second 秒（datetime,Timeofday）
millisecond ミリ秒（datetime,Timeofday）
quarter 四半期（date,datetime）
※第一四半期は 1
dayOfWeek 曜日（date,datetime）
※日曜は 1、土曜は 7
now GMT タイムゾーンによる現在日時（なし）
※戻り値のデータタイプは datetime
dateDiff 日数（date,datetime）
※パラメータは２個、第１から第２を差し引く。
toDate dateタイプに変換（date,datetime,number）
※パラメータのデータタイプが number の場合は、
1970.1.1空のミリ秒数とみなす。
■文字列関数
upper 大文字に変換
lower 小文字に変換
■算術演算子
+ 加算
- 減算
* 乗算
/ 除算
※ これらは二項演算子です。次のような構文になります。
select 2 * (max(A) / max(B))
Google Visualization の Query Language について、詳しく知りたい方は
「Query Language Reference」のページをご覧下さい。
2010/10/01 (Fri.) Trackback() Comment(0) Google Visualization
2010
09
29
Google Visualization の dataTable の並べ替え
前々回の「Google Visualization の Query で並べ替えを指定する。」では、データソースである Google spreadsheets にクエリを投げるときに、返ってくるレスポンスの dataTable オブジェクトの並び順を指定しました。今回はクエリで並び順を指定するのではなく、dataTable オブジェクトのメソッドを利用して並べ替えを行う方法について説明しましょう。
Google Visualization の dataTable には、行を並べ替えるメソッドが用意されています。行を並べ替えるメソッドには、実際にデータの並び順を並べ替えてしまう sort メソッドと、並べ替えた場合の行番号の順番を返す getSortedRows メソッドの２つがあります。
２つのメソッドとも同じ種類の引数を用いて、並べ替えの方法を指定します。 引数には、４種類あります。並べ方に応じて使い分けます。
１.数(number)
数(number)を指定した場合には、その数のカラムを昇順に並べ替えます。getSortedRows メソッドの場合には、並べ替え場合の行番号の配列を返し、実際の dataTable の行の順番が変更されるわけではありません。sort メソッドの場合は、実際に順番が並べ替えられますが、戻り値はありません。これらについては、以下同じです。なお、１番目のカラムの番号は「0」です。
(例）
0,B
1,C
2,A
上記のようなデータテーブル data を想定します。
２番目のカラムを指定して、その行番号の配列を取得する場合は、次のように記述します。
rowInds=data.getSortedRows(1);
[2,0,1]という配列が取得できます。
実際に並べ替える場合には、次のように記述します。
data.sort(1)
この場合、データテーブル data の行の並び順は、次のとおり変更されます。
2,A
0,B
1,C
2.並び順オブジェクト
「{coulumn:1, desc:true}」のようなオブジェクトで指定します。column プロパティの値は、何番目のカラムで並べ替えるかを指定します。１番目は「0」です。
desc プロパティは、降順とするかどうかです。降順の場合に true を指定します。このプロパティを省略した場合には、昇順とみなします。
(上記と同じ data の例）
rowInds=data.getSortedRows({coulumn:1, desc:true});
//[1,0,2]
data.sort({coulumn:1, desc:true});
1,C
0,B
2,A
3.数の配列
[3,2,1]のような数の配列を指定します。まず１番目のカラム、２番目、３番目のカラムという優先順位で並べ替えます。１番目のカラムが同じ値の場合には２番目のカラムが比較され、これも同じ場合には３番目のカラムが比較されます。
(例）
0,B,200
1,C,200
2,A,200
3,C,100
4,A,100
上記のようなデータテーブル data を想定します。
rowInds=data.getSortedRows([1, 2]);
//[4,2,0,3,1]
data.sort([1, 2]);
4,A,100
2,A,200
0,B,200
3,C,100
1,C,200
4.並び順オブジェクトの配列
「[{coulumn:1}, {coulumn:2, desc:true}]」のようなオブジェクトの配列で指定します。
(上記と同じ data の例）
rowInds=data.getSortedRows([{coulumn:1}, {coulumn:2, desc:true}]);
//[2,4,0,1,3]
data.sort([{coulumn:1}, {coulumn:2, desc:true}]);
2,A,200
4,A,100
0,B,200
1,C,200
3,C,100
■ 行番号の配列の処理方法
取得した行番号の配列をループ処理することで、その順番でその行のデータを処理することができます。例えば、各行の３番目のカラムの値を取得する場合は、次のように getValue メソッドで取得できます。
for (var i = 0; i < rowInds.length; i++) {
var v = data.getValue(rowInds[i], 2);
}
dataTable のメソッドについてもっと知りたい方は、「Google Visualization API Reference の dataTable Object」をご覧下さい。英文ですが。。
2010/09/29 (Wed.) Comment(0) Google Visualization
2010
09
28
Google Visualization の dataTable
前回の「Google Visualization の Query で並べ替えを指定する。」では、データソースである Google spreadsheets にクエリを投げ、返ってきたレスポンスから getDataTable メソッドで dataTable オブジェクトを取得しました。dataTable オブジェクトは、Google Visualization の中核となるオブジェクトです。このオブジェクトは、データソースから取得する他に、コンストラクタによって生成することができます。
google.visualization.dataTable() ;
google.visualization.dataTable(data,version) ;
引数がない場合には空き(empty)のインスタンスが、引数がある場合には第一引数のdata オブジェクトをデータとするインスタンスが生成されます。なお、第二引数の version は、現在 0.6 です。第一引数のdata オブジェクトの書式を知ることで、dataTable オブジェクト のデータの構造を推定することができます。リファレンスでは、次のような書式が紹介されています。
{
cols: [{id: 'task', label: 'Task', type: 'string'},
{id: 'hours', label: 'Hours per Day', type: 'number'}],
rows: [{c:[{v: 'Work'}, {v: 11}]},
{c:[{v: 'Eat'}, {v: 2}]},
{c:[{v: 'Commute'}, {v: 2}]},
{c:[{v: 'Watch TV'}, {v:2}]},
{c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
]
}
このオブジェクトは、cols と rows という２つのプロパティを持ちます。その名前から、cols は 列(columns)を、rowsは行を示していることが推測できます。
cols の値は、オブジェクトを要素とする配列です。配列の要素の数は、列の数です。各列の内容は、type, label, id をプロパティとするオブジェクトで定義されます。
rows の値もまた、オブジェクトを要素とする配列です。配列の要素の数は、行の数です。各行の内容は、c をプロパティとするオブジェクトで定義されます。c の値は配列です。配列 c の各要素もまたオブジェクトで、それぞれが１つのセルを表していると考えられます。各セルはプロパティとして v と f を持ちます。v は 値(value)、f は 表示値(formatted value) を示します。
dataTable オブジェクトには、多数のメソッドが用意されています。これらを用いて、データを追加、変更、取得することができます。詳細は、「Google Visualization API Reference の dataTable Object」を参照して下さい。
2010/09/28 (Tue.) Comment(0) Google Visualization
