Statistics Dashboard - Sample for developers 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. Home Chart ▼ Category Land and Climate Populaion and Hous…
Statistics Dashboard - Sample for developers 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. Home Chart ▼ Category Land and Climate Populaion and Households Labour and Wages Agriculture, Forestry and Fisheries Mining and Manufacturing Domestic Trade and Services Business, Household and Economy Housing, Estate and Construction Energy and Water Transport and Sightseeing Information and Communication, Science and Technology Education, Culture, Sports and Life Administration and Public Finance Justice, Security and Environment Social Security and Sanitation International Other Country Prefecture City Advanced Search Data Table API▼ How to use Sample for developers Help Contact Us List of countries List of Prefectures 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>   <meta charset="utf-8">   <title>Sample Google Charts</title>   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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() {       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>   <code id="chart_code"></code> </body> </html> >>About this Site >>Site Policy >>Privacy Policy >>Web Accessibility Statistics Dashboard, Statistics Bureau, Ministry of Internal Affairs and Communications (JCN:2 0000 1202 0001)