<html>
<head>
<meta charset="utf-8"/>
<title>野球</title>
<script src="https://www.google.com/jsapi"></script>
<script src="jquery.js"></script>
<script src="fusiontable.js"></script>
<script src="googlechart.js"></script>
</head>
<body onload="fusiontable()">
<input type="button" value="図を描く" onClick="googlechart()" />
<div id="chart" style="width: 500px; height: 500px;"></div>
</body>
</html>
a=new Array();
b=new Array();
c=new Array();
var s,number;
function fusiontable() {
var query = "SELECT a,b,c FROM " +
'1TaKnmtVcmx4jLJHBXldRNIEVU4790dXAc4yH8vc';
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=?');
sx=0;
$.ajax({
url: url.join(''),
dataType: 'jsonp',
success: function (data) {
var rows = data['rows'];
for (var i in rows) {
sx=sx+1;
a[sx]= rows[i][0];
b[sx]= rows[i][1];
c[sx]= rows[i][2];
}
number=sx;
}
});
}
google.load("visualization", "1", {packages:["corechart"]});
function googlechart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'チーム');
data.addColumn('number', '年棒');
data.addColumn('number', '成績');
data.addRows(number);
var z1,y1;
for(s=1;s<number+1;s++){
z1=parseInt(b[s]);
y1=parseInt(c[s]);
data.setCell(s-1, 0, a[s]);
data.setCell(s-1, 1, y1);
data.setCell(s-1, 2, z1);
}
var options = {
title: '野球',
vAxis: {title: 'チーム', titleTextStyle: {color: 'blue'}}
};
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(data, options);
}
最終更新：2013年12月13日 01:57
