BLOG

Google Chart Tools

2015/2/15

Google Chart Toolsはインタラクティブ性の高いグラフ作成ライブラリです。
大きく分けて2種類のAPIで構成されいます。
・Image Charts（旧機能）
・Google Visualization API

使い方例

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
	var data = google.visualization.arrayToDataTable([
		['年', '売上', '費用'],
		['2012', 1000, 400],
		['2013', 1100, 420],
		['2014', 1200, 500]
	]);
	var options = {
		title: '業績'
	};
	var chart = new google.visualization.LineChart(document.getElementById('chart'));
	chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart></div>
</body>
</html>

<html>

<head>

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['年', '売上', '費用'],

['2012', 1000, 400],

['2013', 1100, 420],

['2014', 1200, 500]

]);

var options = {

title: '業績'

};

var chart = new google.visualization.LineChart(document.getElementById('chart'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

GoogleのサイトにあるJavaScirptファイルを使用します。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

1	<script type="text/javascript" src="http://www.google.com/jsapi"></script>

使用できるグラフはCharts Galleryを見て下さい。
https://google-developers.appspot.com/chart/interactive/docs/gallery

またGoogle スプレッドシートを使えば、簡単にグラフを表示させることができます。

基本的にGoogle Chart Toolsは商用利用も可能です。
しかし、MapやGeochartといった図は Google Maps API を使用しており、
こちらは有料、無料版があり、無料版には使用制限があリます。

またD3.js、Three.jsもおもしろそうです。

参考URL

https://google-developers.appspot.com/chart/
http://yohshiy.blog.fc2.com/blog-category-24.html
http://www.showa-corp.jp/special/graphtools/gct.html
http://dotinstall.com/lessons/basic_chart_tools

Tag:Google JavaScript ライブラリ

BLOG

BLOG

Google Chart Tools

使い方例

参考URL

関連記事