ii9 - 経済統計練習帳

<!DOCTYPE html>
<html>
<head>
<title>経済統計練習帳</title>
<meta charset="UTF-8">    
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script  src="jquery.js"></script>
<script  src="svgpaint.js"></script>
    <script  src="sample.js"></script>
    </head>
   <body onload="sample()">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">経済統計練習帳</span>
    </div>
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
 <a href="#scroll-tab-1" class="mdl-layout__tab is-active">内閣府</a>
 <a href="#scroll-tab-2" class="mdl-layout__tab">国民経済計算</a>
 <a href="#scroll-tab-3" class="mdl-layout__tab">名目</a>
   </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
  </div>
  <main class="mdl-layout__content">
 
 <div class="page-content">
 
     <div id="memo" style="width: 900px; height: 500px;"></div>
 
</div>
   </main>    
 
</body>
 
 
</html>
 
 
google.load("visualization", "1", {packages:["corechart"]});
var point = new Array();
 var x = new Array();
 var year = new Array();
 var month = new Array();
 var y = new Array();
 
function sample() {
 
        var query = "SELECT * FROM " +
            '1MXib5s2LpS6kidM01aFOVaEOEKgncnbvCMPIqR4Y';
        var encodedQuery = encodeURIComponent(query);
 
        var url = ['https://www.googleapis.com/fusiontables/v1/query'];
        url.push('?sql=' + encodedQuery);
        url.push('&key=AIzaSyAH0WCAXRIdHdbI-6bnMSN4kVDDZZmGyqY');
        url.push('&callback=?');
 
 
 
 
 
        $.ajax({
            url: url.join(''),
            dataType: 'jsonp',
            success: function (data) {
                var rows = data['rows'];
 
 
 
                sx = 0;
 
                for (var i in rows) {
                    sx = sx + 1;
                    point[sx] = rows[i][38];
 
 
 
                }
 
 
                number = sx;
 
 
 
                mm = 4;
                yy = 1993;
 
                for (s = 1; s < number + 1; s++) {
                    mm = mm + 1;
                    if (mm > 4) yy = yy + 1;
                    if (mm > 4) mm = 1;
                    year[s] = yy;
                    month[s] = mm;
 
                }
 
 
 
                for (s = 0; s < number + 1; s++) {
                    x[s] = new Array();
                }
                x[0][0] = "date";
                x[0][1] = "名目";
                for (s = 1; s < number + 1; s++) {
                    x[s][0] = "" + year[s] + "年" + month[s] + "期";
                    x[s][1] = 1 * point[s];
                }
 
 
                var data = google.visualization.arrayToDataTable(x);
                var op = { title: '国民経済計算' };
 
                var chart = new google.visualization.LineChart(document.getElementById('memo'));
                chart.draw(data, op);
 
 
 
 
 
 
 
            }
        });
 
}