<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> | |
<title> | |
Google Visualization API Sample | |
</title> | |
<script type="text/javascript" src="http://www.google.com/jsapi"></script> | |
<script type="text/javascript"> | |
google.load('visualization', '1', {packages: ['table']}); | |
</script> | |
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAD_ziHOA-HplCEnGfUt2a0RS5vT4lJK8ASZewWpmekOnhBSF2gxT174gaAbNYZBVhZ3_f5OC13j8CQQ"></script> | |
<script type="text/javascript"> | |
google.load("jquery", "1.4.2"); | |
</script> | |
<script> | |
var isFirstTime = true; | |
var options = {'showRowNumber': true}; | |
var data; | |
var queryInput; | |
// To see the data that this visualization uses, browse to | |
// http://spreadsheets.google.com/pub?key=rYQm6lTXPH8dHA6XGhJVFsA | |
var queryparam =('http://spreadsheets.google.com/tq?key=t3R4Mcza2NqwF7VQVKfg4OA&hl&sheet=Athens'); | |
var querysheet =('Athens'); | |
//regex &sheet\=(\w+')$ | |
//Replacement &sheet=test' | |
//http://www.regular-expressions.info/javascriptexample.html | |
var query = new google.visualization.Query(queryparam); | |
function sendAndDraw() { | |
// Send the query with a callback function. | |
query.send(handleQueryResponse); | |
intialize(); | |
} | |
function handleQueryResponse(response) { | |
if (response.isError()) { | |
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); | |
return; | |
} | |
data = response.getDataTable(); | |
var table = new google.visualization.Table(document.getElementById('querytable')); | |
table.draw(data, {'showRowNumber': true}); | |
if (isFirstTime) { | |
init(); | |
} | |
} | |
function setQuery(queryString) { | |
// Query language examples configured with the UI | |
query.setQuery(queryString); | |
sendAndDraw(); | |
queryInput.value = queryString; | |
} | |
google.setOnLoadCallback(sendAndDraw); | |
function init() { | |
isFirstTime = false; | |
(new google.visualization.Table(document.getElementById('table'))).draw(data, options); | |
queryInput = document.getElementById('display-query'); | |
} | |
function setQueryFromUser() { | |
setQuery(queryInput.value); | |
} | |
</script> | |
</head> | |
<body> | |
<body style="font-family: Arial; border: 0 none;"> | |
<div style="margin-bottom: 10px; padding: 5px; border: 1px solid gray; background-color: buttonface;"> | |
<style type="text/css"> | |
a.test { font-weight: bold; } | |
</style> | |
<span> Configure the query</span> | |
<form action=""> | |
<table style="font-size: 12px; "> | |
<tr> | |
<td>Select</td> | |
<td><select id='query-1' onchange='setQuery(this.value)'> | |
<option value=''>None</option> | |
<option value='select A,B'>select A,B</option> | |
<option value='select A,B,D'>select A,B,D</option> | |
<option value='select D,E,A'>select D,E,A</option> | |
<option value='select E,G,B,C'>select E,G,B,C</option> | |
<option value='select F,A,B,D'>select F,A,B,D</option> | |
</select></td> | |
<td>Group by:</td> | |
<td><select id='query-2' onchange='setQuery(this.value)'> | |
<option value=''>None</option> | |
<option value='select B,sum(F) group by B'>select B,sum(F) group | |
by B</option> | |
<option value='select B,avg(G),sum(E) group by B'>select | |
B,avg(G),sum(E) group by A</option> | |
</select></td> | |
<td>Scalar functions:</td> | |
<td> <select id='query-3' onchange='setQuery(this.value)'> | |
<option value=''>None</option> | |
<option value='select F-E'>select F-E</option> | |
<option value='select F*G'>select F*G</option> | |
<option value='select (F-E)*G'>select (F-E)*G</option> | |
</select></td> | |
<td>Filter:</td> | |
<td><select id='query-3' onchange='setQuery(this.value)'> | |
<option value=''>None</option> | |
<option value='where G < 80'>where G < 80</option> | |
<option value='where G < 90'>where G < 90</option> | |
<option value="where D <> 'Asia'">where D <> 'Asia'</option> | |
</select></td> | |
</tr> | |
<tr> | |
<td>Pivot:</td> | |
<td><select id='query-3' onchange='setQuery(this.value)'> | |
<option value=''>None</option> | |
<option value='select avg(F) pivot B'>select avg(F) pivot B</option> | |
<option value='select sum(G),max(F) pivot D'>select sum(G),max(F) pivot D</option> | |
</select></td> | |
<td>Offset / limit: </td> | |
<td><select id='query-3' onchange='setQuery(this.value)'> | |
<option value=''>None</option> | |
<option value='offset 3'>offset 3</option> | |
<option value='limit 5'>limit 5</option> | |
<option value='limit 4 offset 2'>limit 4 offset 2</option> | |
</select></td> | |
<td>Label / Format:</td> | |
<td><select id='query-3' onchange='setQuery(this.value)'> | |
<option value=''>None</option> | |
<option value="select A label A 'Manager Name'">select A label A | |
'Manager Name'</option> | |
<option value="select G format G '00%'">select G format G '00%'</option> | |
</select></td> | |
</tr> | |
</table> | |
</form> | |
</div> | |
<table style='width: 100%;'> | |
<tr style='font-size: 20px;'> | |
<td>Original Table</td> | |
<td>Query Table</td> | |
</tr> | |
<tr> | |
<td style="width: 50%; padding: 10px; vertical-align: top;"> | |
<div id="table"></div> | |
</td> | |
<td style="width: 50%; padding: 10px; vertical-align: top;"> | |
<div id="querytable"></div> | |
<div style='font-size: 15px; font-weight: bold; padding: 5px;'><input | |
type="text" style="width: 100%" id='display-query' /> <br></br> | |
<input type="button" value='edit & submit' onclick="setQueryFromUser()" /></div> | |
</td> | |
</tr> | |
</table> | |
<div id="querystr"> | |
<script> | |
document.write('querystr '+queryparam+' end'); | |
</script> | |
<script> | |
function intialize(){ | |
$("a").addClass("test"); | |
$("a").click(function(event){ | |
alert("As you can see, the link no longer took you to jquery.com"); | |
event.preventDefault(); | |
}); | |
} | |
</script> | |
<br> | |
<br> | |
</div> | |
Choose your area: Select Month and Year You purchased your home:<br> | |
<select name ="areas"> | |
<option value ="statewide">State Wide</option> | |
<option value ="athens">Athens</option> | |
<option value ="birmingham">Birmingham</option> | |
</select> | |
<select name ="month"> | |
<option value ="Jan">Jan</option> | |
<option value ="Feb">Feb</option> | |
<option value ="Mar">Mar</option> | |
</select> | |
<select name ="Year"> | |
<option value ="2000">2000</option> | |
<option value ="2001">2001</option> | |
<option value ="2002">2002</option> | |
</select> <br> | |
Date Median Average Active Sales Inv/sales<br> | |
<input type="text" name="odate" /><input type="text" name="omedian" /><input type="text" name="oaverage" /><input type="text" name="oactitve" /><input type="text" name="osales" /><input type="text" name="oinvsales" /><br> | |
<input type="text" name="ndate" /><input type="text" name="nmedian" /><input type="text" name="naverage" /><input type="text" name="nactitve" /><input type="text" name="nsales" /><input type="text" name="ninvsales" /><br> | |
% change from : Month Year to Month Year:<br> | |
The values for the % change in each element will be here<br> | |
Contact your local Realtor for more localized information The MLS for your area is located at : http://localmls.com | |
<br> | |
<a href="http://jquery.com/">Jquery</a><br> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment