google chart api Visualizationの使い方

Visualizationを覚えよう。やはりjavascriptを使うようだが、若干複雑になっている。

上記は最初のサンプルになっている。普通のgoogle chart apiの最初のサンプルより、ちょっと奇麗で豪華になっている。ソースは下記だ。

<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 = 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, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, title: 'Company Performance'});
      }
</script>
<div id="chart_div"></div>

シンプルにしてみよう。

二次関数のグラフを作ってみよう

できた！すばらしい。ソースはこれ。

<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'y');

        var x;
        var y;
        var z = 0;
        var max = 1001;

        data.addRows(max);

        for (x = -500; x < 501; x = x +1){
          y = x*x;
          data.setValue(z, 0, y);
          z = z+1;
        }

      new google.visualization.LineChart(document.getElementById('chart_div3')).
      draw(data, {width: 500, height: 400,vAxis: {maxValue: 10}});
}
</script>
<div id="chart_div3">
</div>

これでフェルマーも作れるはずだ。