Google Chart API を使って円グラフを作ってみる。

Google Chart APIとは、Googleが提供しているデータの可視化（グラフの描画）をしてくれる便利なAPIです。よく理解していませんがリリースされた当初はGoogle Chart APIとDatasources Libraryは別々に提供されていたようですが、現在はそれらを1つにまとめてGoogle Chart Toolsとしているようです。

使い方は簡単。HTML内でデータを投げるだけ。そうするとJavaScriptで書かれたグラフが出てきます。描画はHTML5/SVGなので古いWebブラウザでは表示できないことがあります。

では早速試してみましょう。以下のコードをhoge.htmlという名前で保存します。

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
   
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
     
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
     
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['所得税', 134900],
        ['法人税', 77920],
          ['消費税', 101990],
          ['その他 揮発油税,酒税等', 94460],
          ['その他収入', 94905],
          ['公債', 442980]
      ]);

      // Set chart options
      var options = {'title':'平成23年度当初予算（歳入内訳）',
                     'width':800,
                     'height':800};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

そしてこのhtmlファイルを適当なWebブラウザで開くと以下のようなグラフが表示されます。
データは財務省が発表している、平成23年度当初予算（歳入内訳）です。

ポインターを合わせると、ご丁寧に噴出しで項目と数値が表示されます。
歳入の半分近くが国債という異常事態がよくわかります。