Some more changes and back to something practical.

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>

Advertisements

About Cameron

Cameron Helm is a third year undergraduate student at Rensselaer Polytechnic Institute currently pursuing his bachelors in Computer Science and a member of the TWC.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s