2009年07月01日

Google Visualization APIを使ってグラフを描いてみる

昨日に引き続いて、Google APIを使ってみようのコーナーです。
今日はグラフを描いてみたいと思います。

簡単にプログラミングが楽しめるように、まずはGoogle AJAX APIs Playgroundを開いてみましょう。(Chromeで開くのが一番オススメです。)

Google AJAX APIs Playground
http://code.google.com/apis/ajax/playground/

画面の左上「Pick Sample」の中から、「Visualization API」を選んで、その中の「Bar Chart」を開いてみましょう。

右側にソースプログラム、ちょっと間をおいて、下の画面にグラフが表示されたはずです。

Google AJAX APIs Playground

このプログラムを見て、内容を確認してみましょう。

まず、
function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Sales');
  data.addColumn('number', 'Expenses');
  data.addRows(4);
ここで、DataTableというObjectを作っていますよね。そこに、列を3つ加えています。それが、「Year」「Sales」「Expenses」です。そして、addRows(4)で4行追加、となります。ここまでで、つまり、

YearSalesExpense
   
   
   
   

という表を作ったと言うわけです。
  data.setValue(0, 0, '2004');
  data.setValue(0, 1, 1000);
  data.setValue(0, 2, 400);
  data.setValue(1, 0, '2005');
  data.setValue(1, 1, 1170);
  data.setValue(1, 2, 460);
  data.setValue(2, 0, '2006');
  data.setValue(2, 1, 660);
  data.setValue(2, 2, 1120);
  data.setValue(3, 0, '2007');
  data.setValue(3, 1, 1030);
  data.setValue(3, 2, 540);
これで、データを埋め込んでいっています。
setValue(行番号,列番号,値)
ということだと分かりますね。
  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data, null);
}
そして、これで id="visualization" の <div> にグラフ描画をしているわけです。

では、ここに同じグラフを埋め込んでみましょう。

-----ここから-----

-----ここまで-----
前回のMap APIのときもそうでしたが、livedoorブログで動かすためには、
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['barchart']});
</script>
<script type="text/javascript">
  function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addRows(4);
    data.setValue(0, 0, '2004');
    data.setValue(0, 1, 1000);
    data.setValue(0, 2, 400);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170);
    data.setValue(1, 2, 460);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 660);
    data.setValue(2, 2, 1120);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030);
    data.setValue(3, 2, 540);
 
    new google.visualization.BarChart(document.getElementById('visualization')).
        draw(data, null);
  }
 
</script>

<input type="button" value="実行する" onClick="drawVisualization();">
<div id="visualization" style="width: 300px; height: 300px;"></div>
をというスクリプトを、「ここから」〜「ここまで」の中に入れてあります。詳しくはソースを表示で確認してみてください。

次回は、前回のデータを使いますが、Googleドキュメントで入力された数字を使って、グラフを描画する、というテーマでいきたいと思います。


dmatsu2005 at 00:23コメント(0)トラックバック(0) 
プログラミング講座 

トラックバックURL

コメントする

名前:
URL:
  情報を記憶: 評価:  顔   星
 
 
 
livedoor プロフィール

アロハ

痩せないと死ぬよっていう宣告を受けてしまったので、ダイエットに目覚めたプログラマー(約95kg)

広告

レンタルサーバーなら使えるねっと


Google AdSense
Google検索
訪問者数
  • 今日:
  • 昨日:
  • 累計:

オススメの書籍