寝太郎の江戸風呂。ね！

[PR]

2024/04/26 (Fri.)

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

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

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

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

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」の第１カラムは「タイムスタンプ」というラベルになっていますが、カラム名は「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()メソッドを用いたテーブルですので、若干の機能が付加されています。
たとえば、カラム名をクリックすると、そのカラムで並べ替えや逆順の並べ替えを行なえたりします。

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