ブログにかっちょいいグラフを張り付ける

執筆日時：

去年 Amazonで使った金額を計算してみた。 - だるろぐ でグラフを張り付けようと思ったのだけど、「Excel」で作って画像として貼り付けるよりも、Google ChartCharts  |  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  |  Charts  |  Google Developers で。円グラフとかも今度試してみようかな。

結果

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