忍者ブログ

2018
07
24

[PR]

×

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

2018/07/24 (Tue.)

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
PR

2010/10/14 (Thu.) 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

コガネモチ

フリーエリア