GoogleChartでブログに簡単にグラフを表示してみる

先日、Chart.jsを利用してブログ上でグラフを表示することを学んで、「おお、すげ～」と思っていました。
しかし、このやり方、一つめんどうなところが、Chart.jsファイルをWeb上のどこかでホスティングしなきゃいけないところ。
Googleドライブでホスティングしてはみたものの、2016年8月でホスティングサービスは終了ということで、もっとお手軽な方法はないものかと。www.cospa14.com

そしたらあるじゃないですか。
GoogleChartというAPIを利用してのグラフ描画。

Googleの公開APIを利用してグラフを作成する

この方法の便利なところは、自分でChart.jsを用意しなくてもよく、Googleの公開APIを利用できるところです。
いやー、世の中探せば便利なサービスはあるもんですね。
みんなこういうの知ってるもんなんだろうか？

GoogleChartの利用の仕方

公式ドキュメントはこちら。
一応以下の記述があって、利用は無料。3年間は使えるようにしておくよ！とのことです。
（GoogleのAPI（例えばGoogleMapなど）はものによっては有料です）

Use the same chart tools Google uses, completely free and with three years' backward compatibility guaranteed.

developers.google.com

１．AJAX APIを呼び出す
２．ビジュアル化APIとパイチャートパッケージを呼び出す
３．もろもろ設定
４．グラフデータを記述
５．グラフのオプションを記述
６．グラフを描く

    <!--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([
          ['そう思う', 8],
          ['そう思わない', 5],
          ['わからない', 87],

        ]);

        // Set chart options
        var options = {'title':'日本人は優柔不断と思うか？',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>

いやー世の中便利だな。