2024
11
23
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 のデータは、二次元配列のような形式を取ることに注意しましょう。たとえ返されるデータが１つであっても、行とカラムのインデックスで場所を指定する必要があるのです。
PR
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
30
Google Spreadsheets の入力フォームのページを作成する。
「Google Spreadsheets のフォーム機能を利用して 掲示板を作成する。」の記事では、Google Spreadsheets のフォーム機能で、Google Spreadsheets のデータを入力できるフォーム用のページを Google が作成してくれることを紹介しました。これは大変便利なことですが、１つだけ問題があります。それはスタイルが選べないことです。自動的に作成されるので、レイアウトの自由がありません。
特にインラインフレーム内に配置したときは、親ページとドメインが異なるので、そのスタイルを変更することは困難です（私はその方法を知りません）。フレームを用いない場合は、ブラウザのユーザースタイルシートを適用すればよいかもしれませんが、すべてのユーザーにそれを望むことはできません。
それでは、自由にレイアウトしたり、スタイルシートを適用することはできないのでしょうか。ここでフォーム(Form)の機能とは何かに思いを馳せましょう。フォーム(Form)は、データを送信するものです。送信(submit)したときに指定の方法(POSTなど)で指定の URL にデータを送信します。送信先のサーバーが、処理を行うものを特定のドメインや特定のファイルからの送信に限定したり、特別なデータがあるものに限定したりしていなければ、その送信が受理される可能性があります。もしかすると、自作のページから送信されたデータを Google のサーバーが受け取り、普通に処理してくれるかもしれません。
ここは１つ、試してみましょう。
そのためには、Google が Google Spreadsheets のフォーム機能で作成してくれたページのソースを分析する必要があります。まず注目しなけれなばならないのは、Form 要素の属性です。これで、送信先の URL と method が分かります。formkeyの値は各スプレッドシートのフォームごとに異なるはずです。
action="https://spreadsheets.google.com/formResponse?formkey=dFpTWGUxSW9lcVNEeEYyeE9aM3B3RGc6MQ&embedded=true&ifq"
method="POST"
次に送られるデータは何で、その id 属性や name 属性や値は何かということです。これは、textarea 要素や input 要素に注目します。
(name) (id) (value)
entry.1.single entry_1
entry.2.single" entry_2
pageNumber "0"
backupCache ""
入力カラムが２つの場合には、この４つをデータとして送信すればよいようです。
以上のように考えて、入力フォームを作成してみたサンプルページが次のものです。
果たして、思惑通りにいったでしょうか?
■サンプルページ
Public Messsage Board 入力フォーム
2010/09/30 (Thu.) Comment(0) Google Spreadsheets
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
