<html>
<head>
<meta charset="utf-8"/>
<title>jsonp</title>
<script src="https://www.google.com/jsapi"></script>
<script src="jquery.js"></script>
<script src="sample.js"></script>
<script src="table.js"></script>
</head>
<body onload="sample()">
<input type="button" value="表" onClick="table()" />
<div id="chart" style="width: 800px; height: 500px;">準備中</div>
</body>
</html>
c=new Array();
y=new Array();
v=new Array();
var number;
function sample() {
$.ajax({
type: 'GET',
url: 'http://atsites.jp/skebank/soc/gdata/100.jsonp',
dataType: 'jsonp',
jsonpCallback: 'callback',
success: function(json){
number = json.length;
var s;
var x1;
for(s=0; s<number; s++){
c[s+1]=json[s].city;
x1=json[s].year;
y[s+1]=parseInt(x1);
x1=json[s].v;
v[s+1]=parseInt(x1);
}
$("#chart").html("準備完了");
}
});
}
google.load("visualization", "1", {packages:["table"]});
function table() {
var s;
var data = new google.visualization.DataTable();
data.addColumn('string', 'city');
data.addColumn('number', 'year');
data.addColumn('number', 'value');
data.addRows(number);
for(s=1;s<number+1;s++){
data.setCell(s-1, 0, c[s]);
data.setCell(s-1, 1, y[s]);
data.setCell(s-1, 2, v[s]);
}
var table = new google.visualization.Table(document.getElementById('chart'));
table.draw(data, {showRowNumber: true});
}
最終更新：2013年12月21日 19:43
