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 について記します。
表示する列を指定します。引数のとり方には３種類あります。
元とする 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'}
配列ではなく、２個の数字を引数にした場合には、それらを含めた列番号の列を表示します。
引数に数字の配列を取ると、その列番号の列は表示されず、それ以外の列が表示されます。引数に数字を２個指定すると、第一引数以上第二引数以下の行番号の列は表示されず、それ以外の列が表示されます。
計算カラムの設定例を次に示します。上に表示した 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 オブジェクトの列操作に関するメソッドである getFiltererRows、 setRows、 hideRows について記します。
カラムの値が指定した条件に一致する行の行番号の配列を返します。その配列を setRows メソッドの引数にすることで、カラムの値が指定した条件に一致するデータを持つ ViewTable となります。
引数は、オブジェクトを要素とする配列です。各オブジェクトは column プロパティを持ち、比較対象とする列番号を指定します。そして、 value プロパティで抽出対象とする値を指定します。value プロパティに代え、minValue, maxValue のプロパティで範囲指定することもできます。
{column: 1, minValue: 'B', maxValue: 'D'}
引数に数字の配列を取ると、その行番号のデータを持つ ViewTable となります。引数に数字を２個指定すると、第一引数以上第二引数以下の行番号のデータを持つ ViewTable となります。
引数に数字の配列を取ると、その行番号以外のデータを持つ 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);