去年 Amazonで使った金額を計算してみた。 - だるろぐ でグラフを張り付けようと思ったのだけど、「Excel」で作って画像として貼り付けるよりも、Google ChartGoogle Charts — Google Developers で張り付けた方がカッコイイっぽいことに気付いた。

f:id:daruyanagi:20150105162759p:plain

最近は Material Charts と呼ばれる SVG で実装されたリッチなグラフが書けるようになっている(そのため、古い Internet Explorer では表示できないので注意)。たとえば、グラフにマウスオーバーすると数値が表示されたり。かっちょいい。ただし、ベータ版であることには留意しておこう。

コード

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("visualization", "1.1", {packages:["bar"]});
	google.setOnLoadCallback(drawChart);

	function drawChart() {
		var data = google.visualization.arrayToDataTable([
			[Year, 合計金額],
			[2006, 71180 ],
			[2007, 283066 ],
			[2008, 66638 ],
			[2009, 35289 ],
			[2010, 93949 ],
			[2010, 93949 ],
			[2011, 258747 ],
			[2012, 277831 ],
			[2013, 186103  ],
			[2014, 258747 ],
		]);

		var options = {
			chart: {
				title: Amazon 年間消費金額,
				subtitle: 2006-2014,
			}
		};

		var chart = new google.charts.Bar(document.getElementById(chart_div));
		chart.draw(data, options);
	}
</script>
<div id="chart_div" style="width: 540px; height: 360px;"></div>

詳しい使い方は Visualization: Column Chart - Google Charts — Google Developers で。円グラフとかも今度試してみようかな。

結果

マウスオーバーしてみるといいやで。