UP
Google Visualization API（基礎編） 		前のページへ
Google Ajax API 		次のページへ
Google Visualization API―データをフォーマットする

Google Visualization API―データを操作する

本稿ではGoogle Visualization API の英文のドキュメント中にVisualizationと記述されている語をわかり易いようにチャートと呼ぶことにする。
例えばTable visualizationはテーブルチャートと記述する。

チャートだけでなくチャートの基となるデータの操作についてもGoogle Visualization APIは非常に高機能だ。

Google Visualization APIのチャートの基となるデータはDataTableに格納される。
DataTableはリレーショナルデータベースのテーブルと同様に２次元テーブルで表現される。

またチャートの基となるデータには他に、読み込み専用のDataViewがある。

DataTableとDataViewの関係は一般的なリレーショナルデータベースのTableとViewの関係と同じようなものと考えられる。

DataViewは、基となる書き換え可能なDataTableから特定の列や行，フィルタリングされたデータを抽出してつくられた読み込み専用のテーブルということになる。

DataTable

DataTableを作成し、データを格納するには２つの方法がある。

DataTableオブジェクトを作成してデータを格納するには以下の例のようにする。 

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

以下のようにオブジェクト作成時に格納するテータも同時に指定する事もできる。

var dt = new google.visualization.DataTable(
     {
       cols: [{id: 'task', label: 'Task', type: 'string'},
                {id: 'hours', label: 'Hours per Day', type: 'number'}],
       rows: [{c:[{v: 'Work'}, {v: 11}]},
              {c:[{v: 'Eat'}, {v: 2}]},
              {c:[{v: 'Commute'}, {v: 2}]},
              {c:[{v: 'Watch TV'}, {v:2}]},
              {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
             ]
     },
   0.6
)

DataTableクラスのコンストラクタの第一引数にテーブルの内容を示すJSONデータを，第２引数にワイヤープロトコルというデータフォーマットのバージョンを示す数値を指定する。

第２引数の値はいまのところ何も考えずに0.6固定にしておけば良いようである。

作成されたテーブルをテーブルチャートに表示するとどちらも以下のようになる。

２つめの方法の方が若干スピードが速くなるが、どちらの方法を使うかはコードの可読性とか他のデメリットも考慮して決めるのが良い。

２つ目の方法で指定したJSONデータは以下に示すDataTableの構成要素の示している。

テーブル

DataTableは複数の「列（rows）」と「行（cols）」と「テーブル全体の属性を示すプロパティ（p）」によって構成されている。
行には「行と列にマッピングされたセル（c）」が要素として含まれる。

これはExcelに代表される表計算ソフトの「シート」と「列」と「行」と「セル」の関係を連想すれば理解しやすい。

列

一つの列は「ＩＤ（id）」と「ラベル（label）」と「データ型（type）」と「列の属性を示すプロパティ（p）」で構成されている。
データ型は指定は必須であるがIDとラベルとプロパティの指定は省略可能である。

ＩＤは数字ではなく名前で特定の列を指定するために使われるユニークな文字列です。 ラベルは列に表示される文字列です。

データ型には列のデータの型を示す以下の文字列が指定できる。 

  • 'boolean'：JavaScriptのboolean型
  • 'number'：JavaScriptの数値型
  • 'string'：JavaScriptの文字列型
  • ''date' ：JavaScriptのDate型（時間部分は切り捨て）
    例．2008年1月15日を指定「new Date(2008, 0, 15)」
    注意しなければならないのはDate型では月を指定するのに0から始まる数字を指定するため、実際の月から１を引いた値を指定する。
  • 'datetime'：JavaScriptのDate型（時間部分も含めた）
    例．2008年1月15日14時35分45秒を指定「new Date(2008, 0, 15, 14, 30, 45) 」
  • 'timeofday'：JavaScriptの配列で時間を指定，オプションでミリ秒を指定する事もできる。
    例．14時35分45秒を指定「[8, 15, 0] 」，144ミリ秒を追加で指定する場合は「[6, 12, 1, 144]」

行

一つの行は複数の列に対応する行の要素を現す「セル（c）」と、省略可能な「行の属性を示すプロパティ（p）」で構成されている。

セル

セル（c）は省略可能な「値（v）」と「表示用のフォーマットされた値（f）」と「セルの属性を示すプロパティ（p）」で構成されている。

ｖとｆはどちらもセルの値であるが、ｆがチャートで表示されるフォーマットされた文字列を指定するのに対して、ｖはテーブルのソートなどの計算のための値として使われる。
例えば、ｖに1，２，3を、対応するｆにlow，midiam，highを割り当てることで、データ値とは違ったデータ表現をすることができる。

セルはnull値を持つこともできる。

ｖの値の指定を省略すると、ｖにはｆと同じ値が代入される。
逆にｆの値の指定を省略すると、ｆにはｖに指定した値が使われる。
ｖとｆの両方を省略するとnull値が指定されたことになる。

プロパティ

テーブルと列と行にはそれぞれ省略可能なプロパティがあるが、この使い方は任意である。

いくつかのチャートでは機能追加のための特定のカスタムプロパティをサポートしている。

例えばテーブルチャートではＨＴＭＬテーブルのＣＳＳスタイルの指定するために、カスタムプロパティが使われている。

DataTableのJSONデータへのエクスポートとインポート

DataTableよりJSON形式のテーブル定義データを取得するには、getJSONメドッドを使用する。
取得したJSONデータを基に、再度新しいテーブルを作成する事ができる。
また、ただ単にDataTableをコピーするだけならcloneメソッドも使える。

  var jsonData = data.toJSON();
 alert(jsonData);
 var data2 = new google.visualization.DataTable(jsonData, 0.6);

 var data3 = data.clone();

DataTableのメソッド

DataTableのメソッドを以下のように分類してみた。

テーブルに関するメソッド

  • テーブルプロパティオブジェクトの取得と設定
    getTableProperties()， setTableProperties(properties)
  • テーブルプロパティのnameで指定されたプロパティの値の取得と設定
    getTableProperty(name) setTableProperty(name, value)
  • テーブルのソート
    sort(sortColumns)
  • 引数で指定された条件にマッチする行インデックスの配列を返す。
    DataViewの項で詳しく述べる。
    getFilteredRows(filters)
  • テーブルの基となるJSONデータを取得する。
    toJSON()
  • テーブルのクローンを作成する。
    clone()

列に関するメソッド

  • 列の追加
    addColumn(type [,label [,id]])
  • 列番号columnIndexで指定された列に列を挿入
    insertColumn(columnIndex, type [,label [,id]])
  • columnIndexで指定された列を削除
    removeColumn(columnIndex)
  • columnIndexで指定された列からnumberOfColumnsで指定した列の数だけ列を削除
    removeColumns(columnIndex, numberOfColumns)
  • columnIndexで指定された列の最小値（min）と最大値（max）の値をオブジェクトとして返す。
    getColumnRange(columnIndex) 
    alert(data.getColumnLabel(1) + "列の最小値は" + rangeObject.min + "，最大値は"
        + rangeObject.max);
    getColumnRangeメソッドの実行結果
  • テーブルの列の数を取得する。
    getNumberOfColumns()
  • columnIndexで指定された列のID値を取得する。
    getColumnId(columnIndex)
  • columnIndexで指定された列のデータ型を示す文字列を取得する。
    getColumnType(columnIndex)
  • columnIndexで指定された列のラベルを取得，設定する。
    getColumnLabel(columnIndex) setColumnLabel(columnIndex, label)
  • columnIndexで指定された列のプロパティオブジェクトを取得，設定する。
    getColumnProperties(columnIndex) setColumnProperties(columnIndex, properties)
  • columnIndexで指定された列のnameで指定されたプロパティの値を取得，設定する。
    getColumnProperty(columnIndex, name) setColumnProperty(columnIndex, name, value)
  • columnIndexで指定された列のユニークな値（重複した値をひとつにまとめる）の配列を返す。
    getDistinctValues(columnIndex) 
    var msg = data.getColumnLabel(1) + "列のユークな値";
for ( var i = 0; i < distinctValues.length; i++) {
    msg += "\n" + distinctValues[i];
}
alert(msg);
    getColumnRangeメソッドの実行結果

行に関するメソッド

  • １行のデータを追加
    addRow(opt_cellArray) 
    var msg = data.getColumnLabel(1) + "列のユークな値";
for ( var i = 0; i < distinctValues.length; i++) {
    msg += "\n" + distinctValues[i];
}
alert(msg);
  • 複数行のデータを追加
    addRows(numOrArray)
  • rowIndexで指定された行に複数行を追加
    insertRows(rowIndex, numberOrArray)
  • rowIndexで指定された行を削除
    removeRow(rowIndex)
  • rowIndexで指定された行からnumberOfRows行分の行を削除
    removeRows(rowIndex, numberOfRows)
  • テーブルの行数を取得
    getNumberOfRows()
  • rowIndexで指定された行のプロパティオブジェクトを取得，設定する。
    getRowProperties(rowIndex) setRowProperties(rowIndex, properties)
  • rowIndexで指定された行のnameで指定された名前のプロパティの値を取得，設定する。
    getRowProperty(rowIndex, name) setRowProperty(rowIndex, name, value)

セルに関するメソッド

  • rowIndex行, columnIndex 列のセルに値とフォーマットされた値，プロパティオブジェクトを設定する。
    setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])
  • rowIndex行, columnIndex 列のセルに値を取得，設定する。
    getValue(rowIndex, columnIndex) setValue(rowIndex, columnIndex, value)
  • rowIndex行, columnIndex 列のセルにフォーマットされた値を取得，設定する。
    getFormattedValue(rowIndex, columnIndex) setFormattedValue(rowIndex, columnIndex, formattedValue)
  • rowIndex行, columnIndex 列のセルのプロパティオブジェクトを取得，設定する。
    getProperties(rowIndex, columnIndex) setProperties(rowIndex, columnIndex, properties)
  • rowIndex行, columnIndex 列のセルのnameで指定された名前のプロパティの値を取得，設定する。
    getProperty(rowIndex, columnIndex, name) setProperty(rowIndex, columnIndex, name, value)
    これらのメソッドによるDataTableのデータの変更をチャートに反映するには、再度チャートオブジェクトのdrowメソッドを実行する。

DataView

DataViewはDataTableのライブWindowである。

単なるTaaTableの静的ッスナップショットではない。

別のビューから新しいビューを作成する事ができる。

ビューは計算された列もサポートする。基となるDataTableの列を追加したり削除したりすると、DataViewのデータが反映されなかったり、期待しない動作が起きる可能性がある。
このような場合には再度Viewを作成し直す必要がある。Viewを作成し直す必要 基となるDataTableの行の追加や削除の変更ほ、即時に反映される。
しかし、DataViewへの変更をチャートに反映させるには、DataTableと同様にdrowメソッドを使ってチャートを再描画する必要がある。
後述のsetRows() か hideRows() メソッドを使って行をフィルタリングしている場合は、基となるテーブルの追加や削除は予期しないふるまいをとる。
変更を反映させるため、テーブルからビューを作り直さなければならない。ーを作り直さなければならない。
セルの値の変更は当然安全に即座に反映される。 DataTableやDataViewからDataViewを作成する構文を以下に示す。

vars="keyword">var view = new google.visualization.DataView(dataTable_or_dataView);

DataViewのメソッド

DataViewでもDataTable同様に以下のメソッドが使用可能

  • getColumnId
  • getColumnLabel
  • getColumnProperty
  • getColumnRange
  • getColumnType
  • getDistinctValues
  • getFilteredRows
    使い方については後述の行に関するメソッドを参照。
  • getFormattedValue
  • getNumberOfColumns
  • getNumberOfRows
  • getProperty
  • getProperties
  • getRowProperty
  • getSortedRows
  • getTableProperty
  • getValue

列に関するメソッド

  • setColumns
    引数で指定した基のDataTableの列番号を元にDataView（もしくじはDataView）の列を指定する。

    次の例はDataTableを作成して、そのDataTableを基にDataViewを作成し、基のDataTableの列番号0，3，2をDataViewの列0～3にマッピングしてTableチャートに表示した例です。 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="http://www.google.com/jsapi">
        </script>
        <script type="text/javascript">
            google.load('visualization', '1', {
                'packages': ['table']
            });

            function initialize(){
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Employee Name');
                data.addColumn('date', 'Start Date');
                data.addColumn('number', '年齢');
                data.addColumn('string', '性別');
                data.addRows(6);
                data.setCell(0, 0, 'Mike');
                data.setCell(0, 1, new Date(2008, 1, 28));
                data.setCell(0, 2, 45);
                data.setCell(0, 3, "男");
                data.setCell(1, 0, 'Bob');
                data.setCell(1, 1, new Date(2007, 5, 1));
                data.setCell(1, 2, 38);
                data.setCell(1, 3, "男");
                data.setCell(2, 0, 'Alice');
                data.setCell(2, 1, new Date(2006, 7, 16));
                data.setCell(2, 2, 18);
                data.setCell(2, 3, "男");
                data.setCell(3, 0, 'Frank');
                data.setCell(3, 1, new Date(2007, 11, 28));
                data.setCell(3, 2, 45);
                data.setCell(3, 3, "女");
                data.setCell(4, 0, 'Floyd');
                data.setCell(4, 1, new Date(2005, 3, 13));
                data.setCell(4, 2, 55);
                data.setCell(4, 3, "男");
                data.setCell(5, 0, 'Fritz');
                data.setCell(5, 1, new Date(2007, 9, 2));
                data.setCell(5, 2, 33);
                data.setCell(5, 3, "男");

                var table = new google.visualization.Table(document.getElementById('table_div'));
                table.draw(data);

                var view = new google.visualization.DataView(data);
                view.setColumns([0, 3, 2])
                var table = new google.visualization.Table(document.getElementById('view_div'));
                table.draw(view);
            }

            google.setOnLoadCallback(initialize);
        </script>
    </head>
    <body>
        <P>DataTable</P>
        <div id="table_div"></div>
        <P>DataTableの列番号0，3，2をDataViewの列0～3にマッピングしたDataView</P>
        <div id="view_div"></div>
    </body>
</html>

    基となるDataTable

    DataTableの列番号0，3，2をDataViewの列0～3にマッピングしたDataView


    setColumnsメソッドは 計算された列をマッピングする事もできる。
    以下の例は列0の後に給料が年齢の2倍となる計算列をマッピングした例です。
    view.setColumns([0,{
    calc: myFunc,
    type: 'number',
    label: '給料'
}]);
function myFunc(dataTable, rowNum){
    return dataTable.getValue(rowNum,2)*2;
}

for(var i=0,imax=view.getNumberOfRows(); i<imax; i++ )
    alert(view.getValue(i,1));  // 90,76,36,90,100,66の順に表示

    上記の結果のようにDataViewの値として計算列をマッピングできるが、計算列を含むDataViewを チャートに表示させようとすると、私のやり方が悪かったのかエラーになってしまった。
    計算列を含むDataViewはチャートに表示できないようだ。
  • getTableColumnIndex
    DataViewの列が基になるDataTableもしくはDataViewのどの列に対応するかを返す。
     var view = new google.visualization.DataView(data);
view.setColumns([0, 3, 2])

alert(view.getTableColumnIndex(1)) // viewの列1はdataの列3
    計算列を指定した場合は-１が返ってくる。
  • getViewColumnIndex
    getTableColumnIndexとは逆に基となるDataTableもしくはDataViewの列が新しいDataViewのどの列に対応するかを返す。
    alert(view.getViewColumnIndex(3)) // dataの列3はviewの列1
  • getViewColumns
    DataViewの列が基になるDataTableもしくはDataViewのどの列に対応するかを配列で返す。
    alert(view.getViewColumns()); // [0, 3, 2]
  • hideColumns
    配列で指定された列番号の列を隠す。
    view.hideColumns([0,1]);
table.draw(view);

    列0と1を隠す

行に関するメソッド

  • setRows
    引数で指定した基のDataTableの行番号を基にDataView（もしくじはDataView）の行を指定する。

    行番号の指定方法にはminとmaxで指定する方法とマッッピングする行番号を配列で指定する方法がある。
    以下の例はminとmaxでDataTableの行番号1から4をDataViewの行として指定する例です。
    view.setRows(1, 4);

    基のDataTableの行１から行4を表示

    以下の例は行番号を配列で指定して、基のDataTableの行番号を4,3,2,1の順にマッピングする例です。
    view.setRows([4, 3, 2, 1]);

    基のDataTableの行4，3，2，1行を表示

  • getTableRowIndex
    DataViewの行が、基になるDataTableもしくはDataViewのどの行に対応するかを返す
    alert(view.getTableRowIndex(1)); // viewの行1はdataの行3
  • getViewRowIndex
    getTableRowIndexとは逆に基となるDataTableもしくはDataViewの行が、新しいDataViewのどの行に対応するかを返す。
    alert(view.getViewRowIndex(1)); // viewの行1はdataの行3
  • hideRows
    指定された行番号の行を隠す。
    行番号の指定方法にはsetRowsメソッドと同様、minとmaxで指定する方法と配列で指定する方法とがある。

    minとmaxで指定する。
    view.hideRows(1,2);   // 行1から行2を隠す

    配列で指定する。
    view.hideRows([1,3]); // 行1と行3を隠す

    一見すると上記の結果は予測したものと異なるように見えるが、これで正しいようだ。
    注意しなけらばならない点は行番号に指定する番号は基となるDataTable（もしくはDataView）の行番号であること、そしてhideを複数回おこなう場合はhide行が合成されてしまうということである。

  • getFilteredRows
    getFilteredRowsは特定の値や値の範囲にマッチする行の行番号の配列を返す。
    マッチする条件は複数指定できる。

    getFilteredRowsの引数にはマッチ条件を指定するオブジェクトの配列を指定する。
    マッチ条件を指定するオブジェクトには、columnプロパティとvalueプロパティもしくはminValueプロパティとmaxValueプロパティもしくはminValueまたはmaxValueのいずれかを指定する。

    以下の例は列3の値が男である。すべての行番号を取得して表示する例です。
    var view = new google.visualization.DataView(data);
var rows = view.getFilteredRows([{
    column: 3,
    value: "男"
}]);
alert(rows);    // [0，1，2，4，5]を表示

    getFilteredRowsにsetRowsメソッドを組み合わせて使うと、特定の列の値を持つ行をピックアップする事ができる。
    以下の例は前述の例のrows変数を使用して列3が男である行をピックアップしてテーブルチャートに表示した例です。 
    view.setRows(rows);
var table = new google.visualization.Table(document.getElementById('view_div'));
table.draw(view);

    列3が男である行をピックアップ

    以下のように複数のより複雑な条件を指定できる。 
    var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{
    column: 1,
    minValue: new Date(2007, 6, 1)
}, {
    column: 2,
    minValue: 20,
    maxValue: 50
}, {
    column: 3,
    value: "男"
}]));
var table = new google.visualization.Table(document.getElementById('view_div'));
table.draw(view);

    列1が2007年7月1日以降で列2が20～50の間で列3が男である行をピックアップ

google.visualization.data名前空間のメソッド

google.visualization.data名前空間にはsqlの集計をおこなう「group by」句や２つのテーブルの結合をおこなう「join」句に相当するgroup関数とjoin関数が用意されている。

group関数

group関数はグループ（指定列内の同じ値をもったデータ）ごとに集計対象列の値を集計する。
DataViewの項の例で用いたDataTabelのデータを基に、group関数を使用して従業員の男女ごとの年齢の平均を集計する例を以下に示す。

var result = google.visualization.data.group(data, [3], [{
    'column': 2,
    'label': '年齢の平均',
    'aggregation': google.visualization.data.avg,
    'type': 'number'
}]);
var table = new google.visualization.Table(document.getElementById('view1_div'));
table.draw(result);

基となる従業員テーブル

従業員の男女ごとの年齢の平均

group関数の構文を以下に示す。

google.visualization.data.group(dt, keys, columns)

引数dtには基となるDataTableを指定する。
keysには集計対象となるグループの列を配列で指定する。
集計対象となるグループ列の指定方法は、単純に列番号を指定する方法と、オブジェクトを指定する方法とがある。
オブジェクトを指定した場合にはグループ列に変換を加えたうえで、その変換したデータに対してグループ化をおこなう事ができる。
オブジェクトには以下のプロパティを指定する。

  • columnプロパティ
    グループ化対象の列番号を指定する。
  • modifierプロパティ
    columnプロパティで示されるグループ列に変換を加えるための関数を指定する。

    変換関数としてあらかじめ以下の関数が定義されている。
    • google.visualization.data.month －Date 型の列値を月の値に変換する。
  • typeプロパティ
    変換後のグループ列のデータ型を指定。
  • label プロパティ（オプション）
    変換後のグループ列の列ラベルを指定。
  • id プロパティ（オプション）
    変換後のグループ列の列ＩＤを指定。

columnsには、集計結果の列を示す以下のプロパティを持ったオブジェクトの配列を指定する。

  • columnプロパティロパティ 集計対象の列番号を指定する。
  • aggregationプロパティ
    columnプロパティで示される列に対する集計処理をおこなう関数を指定する。

    集計関数としてあらかじめ以下の関数が定義されている。
    • google.visualization.data.avg －集計対象列の平均値を求める。
    • google.visualization.data.count －集計対象列の数を求める。
    • google.visualization.data.max －。集計対象列の最大値を求める。
    • google.visualization.data.min －集計対象列の最小値を求める。
    • google.visualization.data.sum －集計対象列の合計値を求める。
  • typeプロパティ
    集計結果列のデータ型を指定。
  • label プロパティ（オプション）
    集計結果列の列ラベルを指定。
  • id プロパティ（オプション）
    集計結果列の列ＩＤを指定。

group関数は集計結果を示すDataTableオブジェクトを返す。

以下にcolumns引数として２つの列の配列を指定した例を示す。

var result = google.visualization.data.group(data, [3], [{
    'column': 2,
    'label': '年齢の最小',
    'aggregation': google.visualization.data.min,
    'type': 'number'
}, {
    'column': 2,
    'label': '年齢の最大',
    'aggregation': google.visualization.data.max,
    'type': 'number'
}]);
var table = new google.visualization.Table(document.getElementById('view2_div'));
table.draw(result);

従業員の男女ごとの年齢の最小値と最大値を集計

以下にmodifier関数としてgoogle.visualization.data.month を指定した例を示す。

var result = google.visualization.data.group(data, [{
    column: 1,
    modifier: google.visualization.data.month,
    'label': '入社月',
    type: 'number'
}], [{
    'column': 2,
    'label': '人数',
    'aggregation': google.visualization.data.count,
    'type': 'number'
}]);

従業員の入社月ごとの入社人数を集計

以下にmodifier関数とaggregation関数にユーザ定義の関数を指定した例を示す。

var result = google.visualization.data.group(data, [{
    column: 1,
    modifier: function (someDate){
        return someDate.getFullYear()+"年";
    },
    'label': '入社年',
    type: 'string'
}], [{
    'column': 3,
    'label': '男女構成',
    'aggregation': function(values){
        var m=0,f=0;
        for(var i=0,length=values.length;i<length;i++)
            if(values[i]=="男")
                m+=1;
            else
                f+=1;
        return "男"+m+"人，女"+f+"人";
    },
    'type': 'string'
}]);

従業員の入社年ごとの男女構成を集計

join関数

以下の２つDataTable,、dt1とdt2が定義されているとする。

var dt1 = new google.visualization.DataTable();
dt1.addColumn('string', 'name');
dt1.addColumn('number', 'number');
dt1.addColumn('string', 'color');
dt1.addRows([
  ['bob', 111, 'red'],
  ['bob', 111, 'green'],
  ['bob', 333, 'orange'],
  ['fred', 555, 'blue'],
  ['jane', 777, 'yellow']
]);

var dt2 = new google.visualization.DataTable();
dt2.addColumn('string', 'name');
dt2.addColumn('number', 'number');
dt2.addColumn('string', 'figure');
dt2.addRows([
  ['bob', 111, 'point'],
  ['ellyn', 222, 'square'],
  ['jane', 555, 'circle'],
  ['jane', 777, 'triangle'],
  ['fred', 666 , 'dodecahedron']
]);
dt1 dt2

リレーショナルデータベースのテーブルと同様に、この２つのDataTableの内部結合，（完全）外部結合，左外部結合，右外部結合をおこなうにはjoin関数を使って以下のようにする。

// 内部結合 
var dt_inner = google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
var table = new google.visualization.Table(document.getElementById('table_inner_div'));
table.draw(dt_inner);

// （完全）外部結合 
var dt_full = google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
var table = new google.visualization.Table(document.getElementById('table_full_div'));
table.draw(dt_full);

// 左外部結合 
var dt_left = google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
var table = new google.visualization.Table(document.getElementById('table_left_div'));
table.draw(dt_left);

// 右外部結合 
var dt_right = google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
var table = new google.visualization.Table(document.getElementById('table_right_div'));
table.draw(dt_right);

内部結合

（完全）外部結合，

左外部結合

右外部結合

join関数の構文を以下に示す。

google.visualization.data.join(dt1, dt2, joinMethod, keys, dt1Columns, dt2Columns)

引数dt1とdt2は結合する２つのDataTableを指定。
joinMethodには上記のコードのように結合の種類を示す文字列を指定する。
keysには結合条件となる２つのテーブルの対応するキー列のペアの配列を指定する。
dt1Columns，dt2Columnsには結合結果として出力されるdt1，dt2それぞれのテーブルの列番号の配列を指定する。

まとめ

Google Visualization APIのデータを操作するオブジェクトやメソッドを駆け足でみてきた。

他にもVisualization APIの公開データソースに対してqueryを発行する事でさまざまなデータを取得する事ができる。

しかし、現在のところ使用できる公開データソースとしてはGoogle Spreadsheets のデータが主であり、私はこれにあまり魅力を感じていないのでqueryについては触れない。

それよりむしろjavaやphp，asp.netなどを使ってサーバサイドでJSONデータ形式にデータを加工して、xmlhttprequestを使用してDataTableにデータを取り込む方が、新たなVisualization API固有のquery言語をマスターするより、自由度が高く，応用が利くように思われる。

とは言えクライアントサイドスクリプトで、リレーショナルデータベースに似た操作がおこなえるのは素晴らしい。

 

ページのトップへ戻る