Google Chartでデータを可視化する　その２〜基本のDataView〜

注：古い記事の為、内容が最新ではない可能性がありますm(＿＿)m

前回に引き続きこんにちわ！マツウラです。今回はグラフからデータの一部を表示したいときに使うDataViewについてです。

参考：Google Visualization API Reference - Google Charts — Google Developers

DataView Class

DataViewは基になるDataTableのread-onlyビューです。
DataViewは列、行、または列と行のサブセットのみを選択することができます。

DataViewは基になるDataTableのライブウィンドウであり、データの静的なスナップショットではありません。
しかし、テーブル自体の構造を変更する際には次に説明することに注意してください。

列について columns
基のテーブルから列を追加、削除してもビューには反映されず、ビューで予期せぬ動作を起こすかもしれません。
変更をビューに反映するにはDataTableから新しいDataViewを作成しましょう。

行について rows
逆に基のテーブルから行の追加、削除はすぐにビューに反映されます（行の設定後にdraw()を呼び再描画する必要がある）。
ただし、ビューがsetRows()またはhideRows()を呼んで行を除外している場合、基のテーブルから追加または削除すると予期せぬ動作を起こすかもしれないので注意してください。
行の変更でも列同様に、テーブルの変更を反映させるために新しいDataViewを作成します。

セルについて cells
既存のセル値は安全に変更可能で、変更はすぐにDataViewに伝えられます。
（新しいセル値が表示されるためには、値の変更後にdrow()を呼ぶ必要があります）

別のDataViewからDataViewを作ることもできます。
ただし、作成したDataViewを参照すると基になったDataViewオブジェクトを参照することになるので注意してください。

DataViewは列の計算をサポートしています。
列は提供された関数により計算を実行した結果そのものです。
詳細はSetColumns()を参照してください。

行または列を表示、非表示することでDataViewを変更したとき、draw()を呼ぶまで表示は変更されません。

データの一部からDataViewを作成するために、DataView.getFilterdRows()とDataView.setRows()を組み合わせることもできます。
次に例を示します。

google.load('visualization', '1.0', {'packages': ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    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 view = new google.visualization.DataView(data);
    view.setRows(view.getFilteredRows([{column:1, minValue: 5}]));  // ここです。

    var opts = {
        'title': 'My Daily Activities',
        'width': 900,
        'height': 500,
        'sortColumn': 1
    };
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(view, opts);
}

f:id:knightso:20140529115938p:plain

行に対するフィルタリングにより、値が5以上の行のみ表示されます。
column:0で0行目のWork,Eat,...、そしてコード中のcolumn:1で1行目の11,2,...を指します。

getFilteredRows(filter)

フィルタに一致する行のインデックスを返します。
返されたインデックスはDataView.setRows()へ渡すことで、表示する行を絞るのに使えます。

filter
オブジェクトの配列です。
各フィルタは数値のcolumnプロパティ（フィルタリングする行での列インデックスです）を持ち、次の内１つを持ちます。

value
指定した列のセル値と一致する値を指定します。
値は列の型と同じである必要があります。
minValue または maxValue
minValueはセルの最小値を指定します。
列のセル値がより大きい、または同じであれば結果に含まれます。
maxValueはセルの最大値を指定します。
列のセル値がより小さい、または同じであれば結果に含まれます。

コンストラクタについて

新しいDataViewインスタンスを作成する方法は２つあります。

その１

var myView = new google.visualization.DataView(data);

data
DataTableまたはDataViewをビューの初期化に使用します。
デフォルトでは、基のテーブルまたはビューのすべての行と列が元の順序で含まれています。
このビューの列または行を表示、非表示するには、適切なset...()またはhide...()メソッドを呼びます（なんでset？showなどの反意語じゃないのは何故だろう？）。

その２

var myView = google.visualization.DataView.fromJSON(data, viewAsJson);

こちらのコンストラクタでは、DataTableにシリアライズされたDataViewを渡して新しいDataViewを作成します。
これはDataView.toJSON()を使用してシリアライズされたDataViewを再作成するのに便利です。

data
DataView.toJSON()を呼び、DataViewを作成するために使用するDataTableオブジェクトです。
このテーブルは元のテーブルとわずかでも異なると、予期せぬ結果になります。
viewAsJson
DataView.toJSON()で返されるJSON文字列です。
これはDataTableから表示、非表示する行の記述です。
（こんな感じ{"columns":[0,1],"rows":[0,4]}）

（Google Chartsでは表示を変更するときは、元のデータの一部を表示するDataViewを作成します。
viewAsJsonの実体はテーブルのインデックスのため、元のデータが変更されるとインデックスが一致しなくなります。）

例

var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column:1, minValue: 5}]));

view = new google.visualization.DataView.fromJSON(data, view.toJSON());

DataTableとDataView

参考:DataTables and DataViews - Google Charts — Google Developers

最後に前回取り上げたDataTableと、今回のDataViewの比較です。

グラフのデータテーブルは、DataTableオブジェクトまたはDataViewオブジェクトのいずれかによって表現されます。

DataTableはオリジナルのデータテーブルを作成するため使用します。
DataViewはDataTableのread-onlyビューを提供する便利なクラスであり、オリジナルのデータを変更することなく列、行を非表示にしたり、再ソートを行うメソッドを持ちます。
この２クラスの簡単な比較は次のとおりです。

DataTable	DataView
Read/Write	read-only
空でも、データの集合でも作成可能。	既存のDataTableへの参照です。スクラッチして値を入れることはできません。既存のDataTableを参照してインスタンス化する必要があります。
データは記憶領域を要します。	既存のDataTableへの参照なので、記憶領域は消費しません。
行、列、およびデータの追加/編集/削除が可能で、すべての変更は永続的です。	元のデータを変更することなく行のソートまたはフィルタが可能です。行と列は表示と非表示を繰り返すことができます。
クローンできる。	ビューのDataTableのバージョンを返すことができる。
ソースデータであり、参照は含まれない。	DataTableへのライブ参照です。DataTableのデータ変更はすぐにビューに反映されます。
データソースとしてグラフに渡せます。	同じ。
列計算は非サポート。	列計算をサポート。
行または列を非表示にできない。	選択した列を表示、非表示できます。

DataTableとDataViewの２つがGoogle Chartでグラフのデータを取り扱うクラスです。
この２つで簡単にデータをグラフとして可視化することができます。

さらにグラフと連動したイベントを追加する機能もあるので気になった方は見てみてください。
Google Visualization API Reference - Google Charts - Events — Google Developers

The Round

合同会社ナイツオの開発ブログ

Google Chartでデータを可視化する　その２〜基本のDataView〜

DataView Class

getFilteredRows(filter)

コンストラクタについて

DataTableとDataView