簡単にグラフを作れる Google Chart Tools を使ってグラフを作成する方法

Google Chart Tools を使うととても便利なグラフを簡単に作ることができます。ちょっとした統計データなどを掲載するときに大変便利です。

http://code.google.com/intl/ja/apis/chart/

Google Chart Tools – Google Code

例えば円グラフは以下のようにして簡単に作れます。

コードは以下のような感じ。addColumn でカラムを追加して、addRows で値の数を定義したら、setValue で値を追加していきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart1);
  function drawChart1() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '項目名');
    data.addColumn('number', 'アクセス数');
    data.addRows(4);
    data.setValue(0, 0, '検索エンジン');
    data.setValue(0, 1, 82939);
    data.setValue(1, 0, '参照元サイト');
    data.setValue(1, 1, 14809);
    data.setValue(2, 0, 'ノーリファラー');
    data.setValue(2, 1, 9166);
    data.setValue(3, 0, 'その他');
    data.setValue(3, 1, 93);
    var chart = new google.visualization.PieChart(document.getElementById('chart1'));
    chart.draw(data, {width: 500, height: 300, title: 'トラフィックサマリー'});
  }
</script>
<div id="chart1"></div>

他にも以下のように様々なグラフがあります。

Charts Gallery – Google Chart Tools – Google Code

どれも簡単に組み込むことができますので、覚えておくと良さそうです。

コメント

コメントは受け付けていません。