寝太郎の江戸風呂。ね！

[PR]

2024/04/25 (Thu.)

Google Visualization Table の page イベント

前回の「Google Visualization Events」では、Google Visualization のイベント処理の設定方法とそれを使った簡単な例として select イベントを紹介しました。今回は Google Visualization Table に用意されている page イベントについて述べましょう。

Google Visualization Table の 標準のページ処理

Google Visualization Table では、draw メソッドを実行する時に設定する第二引数であるテーブルオプションの設定でページ化を実現します。４行ずつのページにする設定は次のとおりです。

table.draw(data, {page: 'enable', pageSize:4});

こう設定することでテーブルの左下にページナビゲーションボタンが出現して、次のページに進めたり、前のページに戻れるようになります。

Google Visualization Table の page イベントの設定

Google Visualization Table では、標準のページ処理ではなく、カスタマイズした処理を設定できる方法が用意されています。それはページナビゲーションボタンをクリックした時に指定した関数を実行するというイベント処理の方法です。これを実現するためには、まずテーブルオプションの page プロパティの値を'event'に設定します。そして、page イベントが発生した時に実行する関数を登録します。

table.draw(data,{page:'event', pageSize:4, startPage:1});

google.visualization.events.addListener(
 table,
 'page',
 pageHandler
);
function pageHandler(e) {
   alert(e['page']);
}

この例では、テーブルオプションの startPage の値を 1 に設定しているで、最初に表示されるのは２ページ目です。そして、前ページボタンを押すと「0」、次ページボタンを押すと「2」がアラート表示されます。しかし、それで終わりです。前ページも次ページも表示されません。

page イベントからの再表示

テーブルオプションの page プロパティの値を'event'に設定した場合、標準のページ処理は行われなくなります。例えば、次ページボタンを押しても次のページは表示されません。ただ次ページの番号がイベント処理関数に送られるだけです。

次ページボタンを押したら、次のページが表示されるようにするには、イベント処理関数でその処理を記述しなければなりません。すなわち、送られてきたイベントオブジェクトから page プロパティを取得します。そして、この値をテーブルオプションの startPage の値としてテーブルを再表示するのです。

function pageHandler(e) {
   alert(e['page']);
   var options={page:'event', pageSize:4, startPage:e['page']};

   table.draw(data,options);

}

サンプルページ

次のページでは、上記の記述例を実際に確かめることできます。

参考

2010/10/18 (Mon.) Trackback() Comment(0) Google Visualization

Google Visualization Events

Google Visualization には、各種のイベントが用意されています。そして、それぞれのイベントが起きたときにどのような動作をさせるかをユーザーが設定できます。例えば、テーブルをクリックした時に、そのクリックした行のデータをアラートで表示させるという動きを定められます。以下、イベント処理の設定方法とそれを使った簡単な例を紹介します。

イベント処理の設定方法

Google Visualization イベント処理の設定には、google.visualization.events.addListener を使用します。このメソッドは、３つの引数を取ります。第一引数はイベントが発生する visualization のオブジェクトです。第二引数はイベントの種類です。第三引数はイベント時に実行する関数です。例えば、Google Visualization Table によって生成された Table オブジェクトである table の select イベントに対して、selectHandler 関数を登録するには、次のように記述します。

google.visualization.events.addListener(
  table, 
  'select', 
  selectHandler
);

イベント情報の取得

イベントによって発生した情報を取得する方法には、２通りあります。1つは、特定のグローバルオブジェクトを参照する方法で、もう１つは、関数に渡されるイベント引数を参照する方法です。どちらで取得できるかは、イベントの種類で決まります。

select イベント

select イベントは、すべての Visualization にあるイベントです。Visualization の種類によって細かい点は異なりますが、おおむね次のような特性を持っています。

• 関数にプロパティやオブジェクトを渡すことはない。
• getSelection メソッドを利用して、選択されたデータに関する情報を取得する。

getSelection

getSelection メソッドは、選択されたデータに関する情報を持つオブジェクトの配列を返します。各オブジェクトは、row プロパティまたは column プロパティ、もしくはその両方を持ちます。どのプロパティが返るかは、Visualization の種類で決まります。Tableの場合には、row プロパティのみが返ります。各プロパティの値は、インデックス番号です。選択されたデータを取得するには、そのインデックス番号を用いて、DataTable の getValue メソッドなどを利用しなければなりません。

Table の select イベント処理例

Google Visualization Table で作成したテーブルのデータをクリックした場合に、その行の最初のカラムの値をアラート表示する関数の例を示します。

function selectHandler() {
 var str = data.getValue(table.getSelection()[0].row, 0);
 alert(str);
}

上記のコードにおいて、tableは Google Visualization Table オブジェクト、data は Google Visualization DataTable オブジェクトです。

サンプルページ

参考

2010/10/17 (Sun.) Trackback() Comment(0) Google Visualization

Google Visualization DataView

Google Visualization の DataView オブジェクトは、DataTable オブジェクトのサブセットです。Google Visualization の DataView オブジェクトを生成するには、引数に DataTable オブジェクト か別の DataView オブジェクト を指定して、google.visualization.DataView コンストラクタ を new 演算子で実行します。

/** data をすでに生成されているDataTable オブジェクトとします。**/
var view=new google.visualization.DataView(data);

DataViewオブジェクトを生成したばかりの段階では、DataViewオブジェクトの内容は、元とした DataTable オブジェクト（または DataView オブジェクト）と同じです。各種のメソッドを実行することにより、計算カラムを追加したり、行や列の表示を変更できます。

ViewTable メソッド(列関係）

ViewTable オブジェクトの列操作に関するメソッドである setColmuns と hideColumns について記します。

setColmuns

表示する列を指定します。引数のとり方には３種類あります。

数の配列

元とする DataTable オブジェクト（または DataView オブジェクト）のインデックス番号を、並ばせたい順番に並べます。同じ番号を複数回指定できます。

数と計算カラムオブジェクトの配列

計算カラムを設定したいときは、次のような書式で記述したオブジェクトを配列の要素とします。

{calc:計算関数, type:'データタイプ', label:'ラベル名'}

計算関数には２つの引数が必要で、第一引数は元とした DataTable オブジェクト、第二引数は行インデックスとみなして処理内容を記述します。２列目のカラムの値に 円周率 を乗じた値を表示するには、次のように関数を定義します。そして、定義した関数を参照させるよう、計算カラムオブジェクトのcalcプロパティにその関数名(setCalc）を記述します。

function setCalc(dataTable,rowNum){
 return (dataTable.getValue(rowNum, 1) * Math.PI);
}

{calc:setCalc, type:'number', label:'Diameter'}

最小値,最大値

配列ではなく、２個の数字を引数にした場合には、それらを含めた列番号の列を表示します。

hideColumns

引数に数字の配列を取ると、その列番号の列は表示されず、それ以外の列が表示されます。引数に数字を２個指定すると、第一引数以上第二引数以下の行番号の列は表示されず、それ以外の列が表示されます。

列関連関数の利用例 - 計算カラム

計算カラムの設定例を次に示します。DataView の元となっている DataTable から行番号(index)を取得して３番目のカラムに表示します。

  var container=document.getElementById('res2');

  var table=new google.visualization.Table(container);
  function setCalc(data,rowNum){
    return rowNum;
  }
  var calcColumn={calc:setCalc, type:'number', label:'INDEX'};

  view.setColumns([0,1,calcColumn]);

  table.draw(view,options);

ViewTable メソッド(行関係）

ViewTable オブジェクトの列操作に関するメソッドである getFiltererRows、 setRows、 hideRows について記します。

getFiltererRows

カラムの値が指定した条件に一致する行の行番号の配列を返します。その配列を setRows メソッドの引数にすることで、カラムの値が指定した条件に一致するデータを持つ ViewTable となります。

引数は、オブジェクトを要素とする配列です。各オブジェクトは column プロパティを持ち、比較対象とする列番号を指定します。そして、 value プロパティで抽出対象とする値を指定します。value プロパティに代え、minValue, maxValue のプロパティで範囲指定することもできます。

{column: 1, minValue: 'B', maxValue: 'D'}

setRows

引数に数字の配列を取ると、その行番号のデータを持つ ViewTable となります。引数に数字を２個指定すると、第一引数以上第二引数以下の行番号のデータを持つ ViewTable となります。

hideRows

引数に数字の配列を取ると、その行番号以外のデータを持つ ViewTable となります。引数に数字を２個指定すると、第一引数以上第二引数以下の行番号以外のデータを持つ ViewTable となります。

行関連関数の利用例

２番目のカラムの値が"B"であるものを表示します。

  var container=document.getElementById('res2');

  var table=new google.visualization.Table(container);
  function setCalc(data,rowNum){
    return rowNum;
  }
  var calcColumn={calc:setCalc, type:'number', label:'INDEX'};

  view.setColumns([0,1,calcColumn]);

  table.draw(view,options);

サンプルページ

参考

2010/10/16 (Sat.) Trackback() Comment(0) Google Visualization

Google Visualization DataTable を配列から生成する。

Google Visualization API をマスターするために、これまで色々なテストページを作成してきました。より簡単にテストページを作りたいので、二次元配列をデータ元とする関数を考えました。ついでに文字列から二次元配列を抽出する関数も掲載しましょう。

文字列から二次元配列を抽出する関数

これは、次のようなデータを PRE要素内等に記述しておき、その要素の innerHTML を取得して、split メソッドで区切り文字によって配列化しようというものです。

Nation,Group
China,A
Kuwait,A
Qatar,A
Uzbekistan,A
Japan,B
Jordan,B
Saudi Arabia,B
Syrian,B
Australia,C
Bahrain,C
India,C
Korea,C
DPRK,D
Iran,D
Iraq,D
UAE,D

第一引数に対象とする文字列、第二引数にカラム間の区切り文字、第三引数に行間の区切り文字を指定して、次のような処理を行って、配列を返します。

function stringToArray(str,sep2,sep1){
	sep1=sep1||"\n";
	sep2=sep2||",";
	var rows=str.split(sep1);
	for(var i=0;i<rows.length;i++){
		rows[i]=rows[i].split(sep2);
	}
	return rows;
}

CSV(Commma Separated Value)などを二次元配列にすることができます。

二次元配列から dataTable オブジェクトを生成する関数

このコードは、次のようなものです。

function dataTableFromArray(array,columns){
  cols=[];
  if(!columns){
    for(var j=0;j<array[0].length;j++){
      cols.push({id:array[0][j], 
       label:array[0][j], type:'string'});
    }
  }
  var rows=[];
  for(var i=columns?0:1;i<array.length;i++){
    var c=[];
    for(var j=0;j<array[i].length;j++){
      c.push({v:array[i][j]});
    }
    rows.push({c:c});
  }
  return new google.visualization.DataTable(
  {cols:cols,rows:rows},0.6);
}

第一引数に二次元配列を取ります。第二引数は、カラム見出しのオブジェクトです。カラム見出しのオブジェクトは、次のような書式です。第二引数がない場合には、二次元配列の1行目のデータから自動的に生成します。

[
{id:'ID', label:'ラベル名', type:'データタイプ'},
{同上},・・,{同上}]

テーブル表示関数

dataTable オブジェクトから HTMLのテーブルを表示するための関数の例を次に示します。

function drawTable(){
  var options={};
  var container=document.getElementById('res');
  var str=document.getElementById('csv').innerHTML;
  var rows=stringToArray(str,",","\n");
  var data=dataTableFromArray(rows);
  var table=new google.visualization.Table(container);
  table.draw(data,options);
}

options は、Google Visualization Table のテーブルオプションです。ページ、ソートなどの設定を行いたいときは、この options に記述します。container は、HTMLテーブルを表示する要素を指定します。

実行処理

以上のようにテーブル表示関数に、処理の詳細を記述しておいたうえで、実行処理を次のように記述します。

google.load('visualization', '1', {'packages':['table']});
google.setOnLoadCallback(drawTable);

これは、Google Visualization の table パッケージをロードし、それから darwTable 関数を実行するという記述です。

サンプルページ

2010/10/14 (Thu.) Trackback() Comment(0) Google Visualization

Google Visualization Table の設定変更。

前回の「Google Visualization Table のページ処理。」では、Google Visualization の Table オブジェクトの draw メソッドを実行する際に、設定によりページ化(pagenation)を実現できることを示しました。今回は、ページ化(pagenation)のほかにどのような設定ができるか見てみましょう。

■　行の並び順(sort)
特に指定しなければ、元とする dataTable と同じ順番で表示されます。
そして、項目名のところをクリックすることにより、その項目のデータの値によって昇順に並べ替えたり、降順に並べ替えたりできます。
これらの設定を変更したいときは、次のプロパティの設定値を変えます。

● sortColumn
カラム番号を指定する。初期表示でこのカラムが昇順で並べ替えられます。
デフォルトは「-1」。これはソートカラムを指定しないということでしょう。
● sortAscending
sortColumn を指定した場合に降順にしたい場合に「false」を指定します。
デフォルトは「TRUE」で昇順。sortColumn を指定しない場合には  sortAscendingを指定しても無視されます。
● sort
デフォルトでは、カラムの項目名をクリックすると、その項目のデータの値によって昇順に並べ替えたり、降順に並べ替えたりできる設定になっています。そうしたくない場合には、"disable" を指定します。デフォルトは "enable" です。

■　行番号の表示
行番号の表示・非表示を指定できます。
● showRowNumber
行番号を表示したい場合には、「true」を指定します。
デフォルトは「false」で、行番号は表示しません。
● firstRowNumber
行番号の１番目を「1」以外にしたいときに指定します。
デフォルトは「1」です。showRowNumber の指定がなければ無効です。

■　スタイル
● height
テーブルのコンテナ要素の高さを指定します。「px」や「em」などスタイルシートで用いる単位をつけられます。数字だけの場合は「px」とみなします。データタイプは「String」です。テーブルがこの指定の中に収まらないときは、スクロールバーが表示されます。この指定がない場合は、テーブルが表示されるようにブラウザが自動的にレンダリングするはずです。
● width
テーブルのコンテナ要素の幅を指定します。「px」や「em」などスタイルシートで用いる単位をつけられます。数字だけの場合は「px」とみなします。データタイプは「String」です。テーブルがこの指定の中に収まらないときは、スクロールバーが表示されます。この指定がない場合は、テーブルが表示されるようにブラウザが自動的にレンダリングするはずです。
● scrollLeftStartPosition
水平スクロールバーの開始位置を数字で指定します。「px」を単位とみなします。
● alternatingRowStyle
行の色合いを交互に変えたくない場合に「false」を指定します。　
デフォルトは「TRUE」で、交互に色合いが変わります。

■　クラスネーム割当て(cssClassNames)
特定の行やセルに対して、CSS スタイルシート(stylesheet)のクラスネーム(className)を割り当てるには、まず「cssClassNames」プロパティの値にオブジェクトを指定します。そのオブジェクトのプロパティとして下記のプロパティを指定して、クラスネーム(className)を文字列で割り当てます。
＜　行　＞
● headerRow
ヘッダ行の TR 要素。
● tableRow
データ行の TR 要素。
● oddTableRow
奇数行の TR 要素。alternatingRowStyle が True でなければならない。
● selectedTableRow
選択されたデータ行の TR 要素。
● hoverTableRow
マウスカーソルが乗ったデータ行の TR 要素。
＜　セル　＞
● headerCell
ヘッダ行にある TD 要素。
● tableCell
データ行にある TD 要素。
● rowNumberCell
行番号の TD 要素。showRowNumber が true であることが前提。
（例）cssClassNames:{headerRow:'headerRow', hoverRow:'hoverRow'}

■　HTML処理
データに HTML のタグが含まれている場合に、これを HTML として表現するよう設定できます。ただし、元がエスケープ文字に変換されている場合(< や　>　は、< >）には、当然、HTMLと認識されない。
● allowHtml
データに HTML のタグが含まれている場合に、これを HTML として表現するときは、True に設定します。デフォルト値は、false です。




Google Visualization Table の表示設定を行うのは、とても簡単です。draw メソッドの第二引数の options オブジェクトに決められたパラメータを指定するだけです。

コードサンプルを示しましょう。data は、データテーブルオブジェクトとします。
 
  var container=document.getElementById('res');
  var table = new google.visualization.Table(container);
  var options={
   page:'enable',
   allowHTML:true,
   showRowNumber:true,
   width:'500',
  cssClassNames:{
   headerRow:'headerRow',
   hoverTableRow:'hoverRow'}
  };
  table.draw(data, options);

container は、HTMLテーブルを表示する場所の要素です。上記の例では、id 属性が「res」である要素です。
new 演算子を使って、google.visualization.Table のインスタンスを生成します。
テーブル設定オプションをオブジェクト形式で記述します。
そして、Table オブジェクトの draw メソッドを実行します。そうすると、container 要素内に、データテーブルのデータが、HTML テーブルとして表示されます。
draw メソッドの第二引数は省略可能です。これを省略した場合には、デフォルトの値が適用されます。

それでは、この Google Visualization Table の設定機能を利用して、Google Spreadsheets のデータを表示するサンプルページを示しましょう。
なお、スタイルシートで次のように指定しています。

.headerRow{
 background-color:#fcc;
 color:#c00;
}
.hoverRow{
 color:#c00;
}


■　サンプルページ
gVtable_config.html

■　参考ページ
Google Visualization Table

2010/10/11 (Mon.) Trackback() Comment(0) Google Visualization