Google Visualization　寝太郎の江戸風呂。ね！

2024
11
23

[PR]

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

2024/11/23 (Sat.)

2010
09
27

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

2010
09
25

Google Spreadsheets のフォーム機能とGoogle Visualization API

「Google Spreadsheets のフォーム機能を利用して　掲示板を作成する。」の記事では、Google Spreadsheets へのデータの入力とデータの出力の双方について、それぞれインラインフレームを使ってページを表示することで、簡易掲示板の機能を実現しました。ただし、データの出力については、Google Spreadsheets の公開ページをそのまま表示するだけなので、見栄えはよくありませんでした。そこで触れていたように、これを改善するために Google Visualization API を利用することでができるはずです。今回は、その部分の仕組みについて記事にします。

これを実現する仕組みは、データの入力がされたら、そのイベントを捉えて、Google Visualization API で Google Spreadsheets のデータを取得して親ページに表示するというものです。

まず、データの入力イベントをどう捉えるかが問題になります。これに対する案としては、入力フォームの submit ボタンが押されたタイミングを捉えるというのも考えられますが、これは早すぎるでしょう。ボタンが押されただけでは、サーバーにデータが送られていないはずです。同じようにフォームが submit されたタイミングを捉えるのも早すぎるでしょう。送信しただけでは、サーバーの処理が行われていません。送信したデータに対してサーバーの処理が完了するとレスポンスが返ってきます。そのレスポンスを捉えることが適切でしょう。

Google Spreadsheets のフォーム機能でデータを送信すると、「ありがとうございます。メッセージを登録しました。」などが記載されたページが返ってきます。このページが返ってきたことを捉えればよいでしょう。幸い前回の「iframe のロードイベントを捉える。」の記事では iframe のロードを捉えています。これを応用することが出きるはずです。

次に、Google Visualization API で Google Spreadsheets のデータを取得して親ページに表示する部分が問題となります。これについては、すでに「Google Spreadsheets のデータを Google Visualization API で表示する。その２」でそのやり方を知っています。これを応用すればよいでしょう。

上記の考え方に従って、作成したサンプルページが次のものです。
■　PublicMessageBoard2

このサンプルページは、掲示板としてはまだまだ改善すべきところはあります。上記の考え方を反映しただけのものと認識して下さい。

2010/09/25 (Sat.) Comment(0) Google Visualization

2010
09
14

Google Spreadsheets のデータを Google Visualization API で表示する。その２

前々回の記事「Google Spreadsheets のフォーム機能を利用して掲示板を作成する。」では、簡易掲示板の「Public Message Board」を作成しました。そこでは、インラインフレーム(iframe)を用いて、Google Spreadsheets の公開ページを表示する方法で掲示板データを表示しました。Google Spreadsheets のページが表示されるので、ツールバーなど余計なものが見えて、デザイン的にもすっきりしていません。

そこで、思い出したのが、Google Visualization API で Google Spreadsheets のデータを表示する方法です。これについては、以前の記事「Google Spreadsheets のデータを Google Visualization API で表示する。」で触れています。これを利用して、「Public Message Board」のデータを表示してみましょう。

■　サンプルページ
Public Message Board Data

[つづきはこちら]

2010/09/14 (Tue.) Trackback() Comment(0) Google Visualization

2010
09
01

Google Visualization Table を利用して簡単にテーブルを作成する。

dataTable

「Google Ajax API 動的ロード」では、Google Ajax API を動的にロードする方法があることを紹介しました。今回は、その具体的な例として、「visualization」パッケージを動的にロードして利用するツールの一例を示します。題材にしたのは、ページにテーブルを作成する「Google Visualization : Table」です。

皆さんは、WEBページにテーブルを作成するとき、面倒だと思ったことはありませんか?簡単なテーブルであっても、TABLE要素を記述して、TR要素を各行ごとに記述して、さらにセルの数だけ、TD要素を入れなければなりません。サンプルページ「dataTable.html」のテーブルは、そういうことはしていません。テーブルを挿入したい場所に次の記述をしているだけです。

データ部分は、SCRIPT要素のtotle属性に記述しています。このtitle属性を読み取って、Google Visualization の dataTable に放り込むことによって、テーブルを作成しています。データの各行は、パイプ「|」で区切っています。そして、各セルはセミコロン「;」で区分しています。一行目だけは特殊で、カラムのデータタイプとラベルをコロン「:」で関連つけています。

「http://blog.cnobi.jp/v1/blog/user/c1c990de467ed4f31a60b43ae3632205/1283339276」のソースコードを読めば、前回説明したような形で動的ロードを利用していることが分かります。今回は、その処理内容については、詳しく説明しませんが、動的ロードが非常に便利なものらしいことは、わかるかと思います。

2010/09/01 (Wed.) Trackback() Comment(0) Google Visualization

2010
07
03

Google Spreadsheets のデータを Google Visualization API で表示する。

データの保管場所として、Google Spreadsheets を考えています。 Google Visualization API を使用すれば、Google Spreadsheets のデータをWEBで表示できることを知ったからです。Google Spreadsheets は、Excelのデータをインポートすることもできるので、活用範囲は広いと思います。

Google Spreadsheets も Google Visualization API も利用したことがなかったので、簡単なスクリプトを作りながら勉強していこうと思います。まずは、"gSheetTable.js"というものを作ってみました。

[つづきはこちら]

2010/07/03 (Sat.) Trackback() Comment(0) Google Visualization