<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="pqgrid.min.css" />
<script src="pqgrid.min.js"></script>
<link rel="stylesheet" href="themes/office/pqgrid.css" />
<script src="https://www.google.com/jsapi"></script>
<script src="play.js"></script>
</head>
<body onload="play()">
<div id="grid" style="margin:100px;"></div>
</body>
</html>
google.load("visualization", "1", {packages:["corechart"]});
function play(){
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1TUISotdjLRT1Ji6XJVdp3krG5lO-dYC0PjHajq9F3nA/edit?usp=sharing');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var number;
var data=new Array();
var x=new Array();
number=20;
var s;
for(s=0;s<number+1;s++){
data[s]=new Array();
}
for(s=0;s<number+1;s++){
x[s]=response.getDataTable().getValue(s+1,0);
}
for(s=0;s<number+1;s++){
data[s][0]=s+1;
var str="W"+x[s];
data[s][1]=str;
}
var obj = { width: 500, height: 500, title: "練習",resizable:true,draggable:true };
obj.colModel = [{ title: "Rank", width: 200, dataType: "integer" },
{ title: "Company", width: 300, dataType: "string" }];
obj.dataModel = { data: data };
$("#grid").pqGrid(obj);
}
最終更新:2014年05月02日 03:18