Charts Servicesによるデータテーブルとチャートの利用 (2/6)

チャート利用の第一歩は、DataTableオブジェクトを作成することから始まります。DataTableは、以下のようにして「DataTableBuilder」オブジェクトを作成するところから始めます。

変数 = Charts.newDataTable();

これで得られたオブジェクトに、必要な情報を追加していきます。これは大きく分けて「列（コラム）の追加」と「行（データ）の追加」からなります。

DataTableBuilderは、まずデータの構造を「列」として用意します。例えば、「１列目は支店名」「２列目は上半期の売上」「３列目は下半期の売上」というように、それぞれの項目の役割と内容を「列」として用意していくのです。そして列が出来上がったら、今度は具体的なデータを「行」として組み込んでいくことになります。

これは、表計算のシートの各列に項目を割り当て、各行にデータを記述している状態を想像するとイメージしやすいでしょう。では、それぞれの作成について整理しましょう。


・列の追加

変数 =【DataTableBuilder】.addColumn( 種類の指定 , 名前 );

addColumnは、列情報を追加するものです。引数には、その列に設定される値の種類と、列の名前を指定します。名前はそのままチャートの項目の名前として用いられます。値の種類は、Charts.ColumnTypeオブジェクトに用意されているプロパティを使って指定します。これは以下のようなものが用意されています。

Charts.ColumnType.STRING――テキスト値
Charts.ColumnType.NUMBER――数値
Charts.ColumnType.DATE――日時


・行の追加

変数 =【DataTableBuilder】.addRow( 配列 );

列の設定が完了したら、実際のデータを追加します。addRowでは、各列の値をまとめた配列を引数に渡します。これを必要なだけ繰り返してデータを作成していきます。


・テーブルのビルド

変数 =【DataTableBuilder】.build();

データをすべて作成し終えたら、最後に「build」メソッドを呼び出すことでテーブルが生成されます。これで、DataTable作成の作業は完了です。

これらのメソッドは、すべてオブジェクト自身（DataTableBuilder）を返すように設計されているため、メソッドチェーン（メソッドをつなげて記述する書き方）として作成することができます。

例として、簡単なサンプルデータをDataTableとして作成するコードを下に掲載しておきます。これで変数dataにデータの完成したDataTableBuilderが保管されます。ここでは、メソッドチェーンを使い必要なメソッドをすべてつなげて記述してあります。

こうして作成されたテーブルデータは、これだけでは何の役にも立ちません。チャートのオブジェクトに設定し、このデータをチャート化するための部品なのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function makeTable(){
	var data = Charts.newDataTable()
		.addColumn(Charts.ColumnType.STRING, "OS")
		.addColumn(Charts.ColumnType.NUMBER, "シェア")
		.addRow(["Windows", 47])
		.addRow(["Android", 19])
		.addRow(["iOS", 14])
		.addRow(["Mac OS", 4])
		.addRow(["Linux", 2])
		.addRow(["その他", 4])
		.build();
}