After tormenting anyone who looked at the previous script with hundreds of pop-ups, I decided to make things a lot more manageable by getting everything back into one script and creating divs that can be opened and closed. Currently everything looks pretty sloppy since there isn’t really any css going on, but I will get to that at some point.
The new file, TWCnew.html, has been dropped into this folder along with the older files.
A quick preview is below:
<!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</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
var numdivs = 0;
function drawTable() {
//load data using SPARQL query
var queryLoc = 'http://www.cs.rpi.edu/~helmc2/query';
var query = new google.visualization.Query('http://logd.tw.rpi.edu/sparql.php?'+
'query-uri=' + queryLoc +
'&output=gvds');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function drawSecondTable(q) {
var queryurl = "http://logd.tw.rpi.edu/sparql.php?query-option=text&query=prefix+rdfs%3A+++++++%3Chttp%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%3E%0D%0Aprefix+void%3A+++++++%3Chttp%3A%2F%2Frdfs.org%2Fns%2Fvoid%23%3E%0D%0Aprefix+ov%3A+++++++++%3Chttp%3A%2F%2Fopen.vocab.org%2Fterms%2F%3E%0D%0Aprefix+conversion%3A+%3Chttp%3A%2F%2Fpurl.org%2Ftwc%2Fvocab%2Fconversion%2F%3E%0D%0A%0D%0ASELECT+DISTINCT+%3Feg+%3Fcol+%3Fp+%3FpLabel+%3Fo%0D%0AWHERE+{%0D%0Agraph+%3C" + q + "%3E+{%0D%0A[]+void%3AexampleResource+%3Feg+.%0D%0A%3Feg+%3Fp+%3Fo+.%0D%0Aoptional{+%3Fp+ov%3AcsvCol+++++++++++++++++++++++%3Fcol+}%0D%0Aoptional{+%3Fp+rdfs%3Alabel++++++++++++++++++++++%3FpLabel+}%0D%0Aoptional{+%3Fp+conversion%3AsubjectDiscriminator+%3Fdiscrim+}%0D%0A}%0D%0A}+ORDER+BY+%3Feg+%3Fcol&service-uri=&output=gvds&callback=&tqx=&tp=";
var query = new google.visualization.Query(queryurl);
// Send the query with a callback function.
query.send(handleSecondQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' +
response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
//Get the data
var data = response.getDataTable();
var rows = data.getNumberOfRows();
for (var i = 0; i < 5; i++ ){
drawSecondTable(encodeURIComponent(data.getValue(i, 0)));
}
var viz = document.getElementById('root');
new google.visualization.Table(viz).draw(data);
}
function handleSecondQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' +
response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var div = 'content'+numdivs;
createDiv(numdivs++);
var viz = document.getElementById(div);
new google.visualization.Table(viz).draw(data);
}
function createDiv(q)
{
var div1 = document.createElement('div');
var div1IdName = 'divheader'+ q;
div1.setAttribute('id',div1IdName);
div1.innerHTML = "Visualization " + q;
document.body.appendChild(div1);
var div2 = document.createElement('div');
var div2IdName = 'content'+ q;
div2.setAttribute('id',div2IdName);
div2.style.display = "none";
document.body.appendChild(div2);
var div = document.getElementById(div1IdName);
var newlink = document.createElement('a');
var header = 'header' + q;
newlink.setAttribute('id',header);
newlink.setAttribute('class', 'signature');
newlink.setAttribute('href', 'javascript:toggle2(' +'\'' + div2IdName +'\'' + ',' + '\'' + header +'\'' +')');
newlink.innerHTML = '<img src="/plus.png">'
div.appendChild(newlink);
}
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = '<img src="/plus.png">';
}
else {
ele.style.display = "block";
text.innerHTML = '<img src="/minus.png">';
}
}
google.setOnLoadCallback(drawTable);
</script>
</head>
<body>
<h3>Visualization Results</h3>
<div id="titleText">First Query Results</div><a id="myHeader" href="javascript:toggle2('root','myHeader');"><img src="plus.png"></a>
<div id="root" style="display: none;"></div>
</body>
</html>
Cameron
