Google Charts サンプル

最終更新日:2015/06/25

サンプル

サンプルで描画している棒グラフの他にも、様々なグラフを描画することが出来ます。詳細については、Chart Galleryをご覧ください。

使用するWeb API

サンプルではデータセット「基本情報」から、2014年度の組織名と情報システムのカウント数を取得しています。

※2021年3月28日より、リクエストURLが変更となりました。

https://itdashboard.cio.go.jp/PublicApi/getData.json?dataset=BasicInformation&year=2014&field=organization&option=count

グラフ作成手順

環境準備

jQueryとGoogle Chartsを利用するための<script>タグを記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

パッケージ読み込みとコールバック

グラフ作成に必要なパッケージを読み込みます。

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

$.getJSONによるWeb APIの呼出し

コールバックするファンクションでは、$.getJSONメソッドを用いてWeb APIを呼び出します。取得したデータは内部でjsonDataという変数名で扱います。
内部処理については以下手順で解説しています。

function drawChart() {
    $.getJSON("/PublicApi/getData.json?dataset=BasicInformation&year=2014&field=organization&option=count",
        function(jsonData) {

            // 以下の手順を参照

        }
    );
}

データ設定

Google Chartsでデータを取り扱えるようにするため、jsonDataをDataTableオブジェクトに変換します。
詳細についてはDataTables and DataViewsをご覧ください。

// ========== データ設定 ========== 
var data = new google.visualization.DataTable();
data.addRows(jsonData.raw_data.length);
data.addColumn("string", "組織名");
data.addColumn("number", "情報システム数");
$.each(jsonData.raw_data, function(i, v) {
    data.setValue(i, 0, v.organization);
    data.setValue(i, 1, v.count);
});

表示設定

作成するグラフの表示設定を行います。詳細についてはBar Charts - Configuration Optionsをご覧ください。
設定可能な項目はグラフによって異なるので注意してください。

// ========== 表示設定 ========== 
var options = {
    title: "府省別情報システム数",
    chartArea: {
        width: "50%",
        height: "90%"
    },
    vAxis: {
        title: "府省名"
    }
};

グラフの描画

グラフ描画の対象となる要素のIDを指定し、グラフの描画を行います。

// ========== 描画処理 ==========
var chart = new google.visualization.BarChart(document.getElementById("chart_div"));

chart.draw(data, options);

サンプルコード

Google Chartsを用いたサンプルコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sample Google Charts</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>
        google.load("visualization", "1", {
          packages: ["corechart"]
        });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            $.getJSON("/PublicApi/getData.json?dataset=BasicInformation&year=2014&field=organization&option=count",
                function(jsonData) {

                // ========== データ設定 ========== 
                var data = new google.visualization.DataTable();
                data.addRows(jsonData.raw_data.length);
                data.addColumn("string", "府省名");
                data.addColumn("number", "情報システム数");
                $.each(jsonData.raw_data, function(i, v) {
                    data.setValue(i, 0, v.organization);
                    data.setValue(i, 1, v.count);
                });

                // ========== 表示設定 ========== 
                var options = {
                    title: "府省別情報システム数",
                    chartArea: {
                        width: "50%",
                        height: "90%"
                    },
                    vAxis: {
                        title: "府省名"
                    }
                };

                // ========== 描画処理 ========== 
                var chart = new google.visualization.BarChart(document.getElementById("chart_div"));

                chart.draw(data, options);
            });
        }
    </script>
    <style>
      div#chart_div {
        height: 400px;
      }
    </style>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>