忍者ブログ

2018
07
23

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/07/23 (Mon.)

2010
09
27

Google Visualization の Query で並べ替えを指定する。

前回の記事「Google Spreadsheets のフォーム機能とGoogle Visualization API」は、Google Visualization を使って Google Spreadsheets のデータを表示していますが、その並び順が日付の古いものから順に並んでいます。掲示板は、通常、日付の新しいものから順に並べますので、これをどのように実現すればよいか考えてみましょう。

並べ替えについてはいくつかの方法が考えられます。
1.データを取得する際に並べ替えておく。
2.データを取得後に並べ替える。
3. 元のデータの並び順は変えないで、並べ替えた場合の行番号の配列を取得する。

今回は、1.の「データを取得する際に並べ替えておく。」方法について説明しましょう。

Google Visualization API を利用して、Google Spreadsheets のデータを取得するには、Google.visualization.Query クラスのメソッドを用います。
new 演算子を使って生成した Query のインスタンスついて setQuery メソッドを適用することにより、クエリを設定できます。このクエリで「order by」句を付加することで、指定したカラムによって並べ替えを行なえます。

(例)クエリ
var var query = new google.visualization.Query(DATA_SOURCE_URL);
query.setQuery('select * order by A desc');
query.send(handleResponse);

例文の「DATA_SOURCE_URL」には、データソースとする Google Spreadsheets の URL を入れます。
クエリの「select * 」は、すべてのカラムのデータを要求していることを示します。特定のカラムを選ぶ場合には、カラム名をカンマ区切りで記述します。
「order by 」に続く「A」はカラム名です。「Public Message Board」の第1カラムは「タイムスタンプ」というラベルになっていますが、カラム名は「A」

です。その次の「desc」は「降順」を示します。「desc」がない場合は、「昇順」とみなされます。
このようにクエリ文を組み立てて、setQueryメソッドを適用した後、send メソッドを実行すると、レスポンスが返ってきたときに handleResponse 関数が実

行されます。レスポンスにあるデータの処理は、このコールバック関数「handleResponse」で定義します。

(例)レスポンス処理
function handleResponse(response){
  var data = response.getDataTable();
  var table = new google.visualization.Table(TARGET_ELEMENT);
  table.draw(data);
}

返ってきたクエリレスポンスに対して、getDataTable()メソッドを適用して、dataTable オブジェクトを取得します。
次にデータをテーブルとして表示する位置を指定します。これは、visualization のコンストラクタを呼び出して、そのインスタンスを生成する形を取ります

。「TARGET_ELEMENT」には、テーブルを表示する位置のHTML要素を記述します(例 document.getElementById("example"))。
そして、Table インスタンスのdraw()メソッドを実行します。drawメソッドの引数には dataTable オブジェクトを指定します。これを実行すると、

「TARGET_ELEMENT」要素の内部にテーブルが展開されます。

上記のような流れで、「Public Message Board」のデータを日付の新しい順に並べ替えたものが、次のサンプルです。
■ サンプル「Public Message Board(gVss_2)

今回のテーブルは、draw()メソッドを用いたテーブルですので、若干の機能が付加されています。
たとえば、カラム名をクリックすると、そのカラムで並べ替えや逆順の並べ替えを行なえたりします。



PR

2010/09/27 (Mon.) Trackback(0) Comment(0) Google Visualization

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

06 2018/07 08
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア