　寝太郎の江戸風呂。ね！

2024
11
23

[PR]

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

2024/11/23 (Sat.)

2010
10
17

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 オブジェクトです。

http://blog.cnobi.jp/v1/blog/user/c1c990de467ed4f31a60b43ae3632205/1287283024

サンプルページ

Google Visualization events の利用例

参考

Handling Events - Google Visualization

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

2010
10
16

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);

サンプルページ

DataView　の表示サンプル

参考

DataView - Google Visualization API Reference

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

2010
10
14

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 関数を実行するという記述です。

サンプルページ

gVtableFromArray.html

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

2010
10
11

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 として表現するよう設定できます。ただし、元がエスケープ文字に変換されている場合(< や　>　は、&lt; &gt;）には、当然、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

2010
10
05

Google Visualization Table のページ処理。

Google Visualization の Table オブジェクトは、データテーブルのデータを HTML の TABLE として表現しますが、単に表を作成するだけではなく、そこに様々な機能を盛り込んでいます。そのような機能の中でも、ページ処理機能は、とても有用な機能です。今回は、このページ処理機能に焦点を当ててみましょう。

ここでいう「ページ処理機能」とは、一度に表示するデータの件数を定めておき、その次のデータ群を表示したいときは「続き」ボタンを、前を表示したいときは「戻る」ボタンを押すことにより、表示されるデータを切り替えるというものです。

Google Visualization Table でこのページ処理機能を利用するのは、とても簡単です。draw メソッドの第二引数の options オブジェクトに決められたパラメータを指定するだけでよいのです。

コードサンプルを示しましょう。data は、データテーブルオブジェクトとします。

var container=document.getElementById('res');
var table = new google.visualization.Table(container);
var options={page:'enable'};
table.draw(data, options);

container は、HTMLテーブルを表示する場所の要素です。上記の例では、id 属性が「res」である要素です。
new 演算子を使って、google.visualization.Table のインスタンスを生成します。
テーブル設定オプションをオブジェクト形式で記述します。ページングを行う場合には、上記のように「page:'enable'」と記述します。
そして、Table オブジェクトの draw メソッドを実行します。そうすると、container 要素内に、データテーブルのデータが、HTML テーブルとして表示されます。

draw メソッドの第二引数は省略可能です。これを省略した場合には、デフォルトの値が適用されます。
page プロパティのデフォルト値は、「enable」なので、オプション指定がなければ、ページングは行われません。

また、ページングを指定した場合に一度に表示される件数のデフォルト値は「10」です。これを変更したい場合は、「pageSize」プロパティで指定します。「pageSize」の指定は、ページングを指定した場合のみ有効です。
（例）var options={page:'enable', pageSize:20};

この他、最初に表示するページを指定することもできます。「startPage」プロパティがそれです。そのデフォルト値は「0」です。

それでは、この Google Visualization Table のページ処理機能を利用して、Google Spreadsheets のデータを表示するサンプルページを示しましょう。

■サンプルページ
gVss_query_page.html