Google Chart Toolsで色々なグラフを描いてみた。

　前回、Google Chat Toolを使ってみたら、簡単でとても良い感じだったので、習作として、もっと色々なグラフを描いてみました。
サンプル実行

　

google.load('visualization', '1', {packages:['barchart','linechart','areachart',
			'scatterchart','piechart','columnchart','geomap']});
google.setOnLoadCallback(init);

function init(){
	var query=new google.visualization.Query(
		"https://spreadsheets.google.com/spreadsheet/ccc?key=0Aq1zr4YC2cRadEMtOTNMS1JkZkZUSHN0ekhBNnFxa3c&hl=en_US");
	query.send(drawData);
}

function drawData(res){
	if(res.isError()){
		alert(res.getMessage());
		return;
	}
	var data=res.getDataTable();
	var optionLine={width:360,height:300,legend:'top',title:'LineChart'};
	var optionArea={width:360,height:300,legend:'top',title:'AreaChart'};
	var optionScat={width:360,height:300,legend:'top',title:'ScatterChart'};
	var optionBar={width:360,height:300,legend:'top',title:'BarChart'};
	var optionCol={width:360,height:300,legend:'top',title:'ColumnChart'};
	var optionCol3d={width:360,height:300,legend:'top',is3D:true,title:'ColumnChart3d'};
	var optionPie={width:360,height:300,legend:'top',title:'PieChart'};
	var optionGeo={width:360,height:300,legend:'top',title:'GeoMap'};
	
	var data2=new google.visualization.DataTable();
	data2.addRows(6);
	data2.addColumn('string', '国');
	data2.addColumn('number', '人口');	
	data2.setValue(0, 0, 'United States');
		data2.setValue(0, 1, 314);
	data2.setValue(1, 0, 'Japan');
		data2.setValue(1, 1, 128);
	data2.setValue(2, 0, 'China');
		data2.setValue(2, 1, 1345);	
	data2.setValue(3, 0, 'France');
		data2.setValue(3, 1, 65);
	data2.setValue(4, 0, 'Brasil');
		data2.setValue(4, 1, 194);
	data2.setValue(5, 0, 'Russia');
		data2.setValue(5, 1, 141);
	new google.visualization.LineChart(
		document.getElementById('line')).draw(data,optionLine);
	new google.visualization.AreaChart(
		document.getElementById('area')).draw(data,optionArea);
	new google.visualization.ScatterChart(
		document.getElementById('scatter')).draw(data,optionScat);
	new google.visualization.BarChart(
		document.getElementById('bar')).draw(data,optionBar);
	new google.visualization.ColumnChart(
		document.getElementById('column1')).draw(data,optionCol);
	new google.visualization.ColumnChart(
		document.getElementById('column2')).draw(data,optionCol3d);	
	new google.visualization.PieChart(
		document.getElementById('pie')).draw(data,optionPie);
	new google.visualization.GeoMap(
		document.getElementById('geo')).draw(data2,optionGeo);
}