Change Text Size

normal | large

日本語
Skip to Context

A system that provides the main statistical data provided by the national government and private companies in graphs.

List of countries

List of Prefectures

List of cities

A－E
F－J
K－O
P－T
U－Z

開発者向けサンプル(Japanese version only.)

統計ダッシュボードから提供しているWeb APIの利用例について、Google Chartsと組み合わせたサンプルコードを掲載しています。

Google Chartsの詳細については，https://developers.google.com/chart/をご覧ください。

サンプルでは２０１７年の「総人口に占める割合（０～14歳）」と「総人口に占める割合（65歳以上）」のデータを使用しています。

サンプル

サンプルコード

<!DOCTYPE html>

<html>

<head>

<title>Sample Google Charts</title>

google.load("visualization", "1", {

packages: ["corechart"]

});

google.setOnLoadCallback(drawChart);

function drawChart() {

var indicatorCodeX = "0201010010000020010";

var indicatorCodeY = "0201010010000020030";

var api_url = "https://dashboard.e-stat.go.jp/api/1.0/Json/getData?Lang=JP&IndicatorCode=" + indicatorCodeX +

"," + indicatorCodeY + "&Time=2017CY00&RegionalRank=3&Cycle=3&IsSeasonalAdjustment=1&MetaGetFlg=Y&SectionHeaderFlg=1";

callApi(api_url).done(function(jsonData){

var dataX = jsonData.GET_STATS.STATISTICAL_DATA.DATA_INF.DATA_OBJ.filter(function(item) {

return item.VALUE["@indicator"] === indicatorCodeX;

});

var dataY = jsonData.GET_STATS.STATISTICAL_DATA.DATA_INF.DATA_OBJ.filter(function(item) {

return item.VALUE["@indicator"] === indicatorCodeY;

});

// ========== データ設定 ==========

var indicatorNameX = jsonData.GET_STATS.STATISTICAL_DATA.CLASS_INF.CLASS_OBJ[0].CLASS[0]["@name"];

var indicatorNameY = jsonData.GET_STATS.STATISTICAL_DATA.CLASS_INF.CLASS_OBJ[0].CLASS[1]["@name"];

var data = new google.visualization.DataTable();

data.addColumn("number", indicatorNameX);

data.addColumn("number", indicatorNameY);

data.addColumn({type: "string", role:"tooltip"});

$.each(dataX, function(i, x) {

var dataValue = "";

dataY.forEach(function(item) {

if(item.VALUE["@regionCode"] === x.VALUE["@regionCode"]){

dataValue = item.VALUE["$"];

}

});

var regionName = "";

jsonData.GET_STATS.STATISTICAL_DATA.CLASS_INF.CLASS_OBJ[2].CLASS.forEach(function(item) {

if(item["@code"] === x.VALUE["@regionCode"]){

regionName = item["@name"];

}

});

data.addRow([parseFloat(x.VALUE["$"]), parseFloat(dataValue),regionName]);

});

// ========== 表示設定 ==========

var options = {

title: indicatorNameX + " vs. " + indicatorNameY,

hAxis: {title: indicatorNameX},

vAxis: {title: indicatorNameY},

legend: 'none'

};

// ========== 描画処理 ==========

var chart = new google.visualization.ScatterChart(document.getElementById("chart_code"));

chart.draw(data, options);

});

}

function callApi(apiUrl) {

return $.ajax({

type:'GET',

contentType : 'application/json; charset=utf-8',

dataType:'json',

scriptCharset:'utf-8',

url:apiUrl,

});

}

</script>

<style>

code#chart_code {

height: 400px;

}

</style>

</head>

<body>

</body>

</html>