Index: main/trunk/model-sites-dev/von-sparql/transform/pages/home.xsl
===================================================================
--- main/trunk/model-sites-dev/von-sparql/transform/pages/home.xsl	(revision 28737)
+++ main/trunk/model-sites-dev/von-sparql/transform/pages/home.xsl	(revision 28784)
@@ -11,131 +11,144 @@
   <xsl:template name="von-sparql-canvas">
     
-    <script type="text/javascript" src="ext/jena/sgvizler/jquery-1.6.2.min.js"><xsl:text> </xsl:text></script>
+    <link rel="stylesheet" type="text/css" href="sites/von-sparql/transform/pages/style.css"/>
+  	<script type="text/javascript" src="https://www.google.com/jsapi"><xsl:text> </xsl:text></script>
+	<script> 
+		<xsl:text disable-output-escaping="yes">google.load('visualization','1', {'packages':['corechart']});</xsl:text>
+	</script>
+	<script type="text/javascript" src="http://beta.data2000.no/sgvizler/release/0.6/sgvizler.js"><xsl:text> </xsl:text></script>
 
-    <script type="text/javascript" src="ext/jena/sgvizler/jsapi"><xsl:text> </xsl:text></script>
-    <script type="text/javascript" id="sgvzlr_script" src="ext/jena/sgvizler/sgvizler.js"><xsl:text> </xsl:text></script>
     <script type="text/javascript" src="ext/von-sparql/von-sparql-script.js"><xsl:text> </xsl:text></script>
-<div>
-<div id="sgvzl_PredicateOverview"
-      data-sgvizler-endpoint="http://localhost:3030/greenstone/query"
-      data-sgvizler-chart="gTable"
-      data-sgvizler-loglevel="2"
-      data-sgvizler-chart-options="title=Items by Language"
-      width="100"
-      style="width:450px; height:250px;display:inline-block;float:left" >
-  <xsl:attribute name="data-sgvizler-query">
-      SELECT ?Predicate (COUNT (?Predicate) AS ?Count) (COUNT (DISTINCT ?o) AS ?Distinct_Values)
-      WHERE{
-        ?s ?Predicate ?o
-      }
-      GROUP BY ?Predicate
-      ORDER BY DESC (?Predicate)
-  </xsl:attribute>
-  <xsl:comment>Filler</xsl:comment>
-</div>
-<div id="queryContainer"
-     style="
-     border:1px solid #DFD9C3;
-     width:450px;height:250px;
-     float:left;
-     margin-left:15px;
-     padding:10px;
-     overflow-y:scroll;"
-     >
-     <span>SPARQL Query:</span>
-     <br/>
-     <span id="span_sparqlQuery"
-           style="font-size:10pt;">
-     <xsl:comment>Filler</xsl:comment>
-     </span>
-</div>
-</div>
-<br/>
-<div style="margin-top:20px;margin-bottom:10px;display:inline-block;">
-    <label for="sel_Predicate">View Predicate:</label>
-    <select id="sel_Predicate">
-        <option value="None"></option>
-    </select> 
-    <br/>
-    <div style="margin-left:20px;margin-bottom:20px;margin-top:5px">
-        <input type="checkbox" id="cb_RefineSearch"/> <label for="cb_RefineSearch">Refine search to:</label>
-        <br/>
-        <label for="sel_RefineObject">?o</label>
-        <select id="sel_RefineObject" enabled='false'>
-            <option value="None">Select predicate above</option>
-        </select>
-        <br/>
-        <label for="sel_RefinePredicate">?p</label>
-        <select id="sel_RefinePredicate" enabled='false'>
-            <option value="None">Select ?o above</option>
-        </select>
-    </div>
+    <script type="text/javascript" src="ext/von-sparql/von-sparql-setup.js"><xsl:text> </xsl:text></script>
+    <script type="text/javascript" src="ext/von-sparql/combobox.js"><xsl:text> </xsl:text></script>
 
-    <select id="sel_Limit">
-        <option value="None">No Limit</option> 
-        <option value="10">10</option> 
-        <option value="25">25</option> 
-        <option value="50">50</option> 
-        <option value="75">75</option> 
-        <option value="100">100</option> 
-    </select>
-    <select id="sel_ChartType">
-        <option value="gTable">Table</option> 
-        <option value="gPieChart">Pie Chart</option> 
-        <option value="gBarChart">Bar Chart</option> 
-    </select>
-    <button type="button" id="btn_ShowChart">Execute Query</button>
-</div>
-<script type="text/javascript">
-      <xsl:text disable-output-escaping="yes">
-      var overviewSparqlQuery;
-      function sgvizlerGo (){
-         overviewSparqlQuery = $('#sgvzl_PredicateOverview').attr("data-sgvizler-query");
-         sgvizler.go();
+    <xsl:variable name="protocol" select="substring-before(/page/pageRequest/@baseURL,':')"/>
+    <xsl:variable name="baseURL" select="substring-after(/page/pageRequest/@baseURL,':')"/>
+    <xsl:variable name="domain" select="substring-before($baseURL,':')"/>
+	<xsl:variable name="endpointPath" select="concat($protocol,':',$domain,':3030/greenstone/query')"/>    
 
-         //Load possible predicate values into selector
-         updatePredicateSelector();
 
-         //Ensure search refinement elements are greyed
-         toggle_RefineSearch(0);   
-         $('#cb_RefineSearch').prop('checked',false);
-      }
-      sgvizler.option.namespace.dc = 'http://purl.org/dc/elements/1.1/';
-      sgvizler.option.namespace.gsembedded = 'http://greenstone.org/gsembedded#'
-      sgvizler.option.namespace.greenstonedata = 'http://localhost:3030/greenstone/data/'
-      $(document).ready(sgvizlerGo());
+	<div id="div_PredicateOverview" style="height:270px" width="auto">
+		<div id="sgvzl_PredicateOverview"
+			  data-sgvizler-endpoint="{$endpointPath}"
+			  data-sgvizler-chart="google.visualization.Table"
+			  data-sgvizler-loglevel="2"
+			  data-sgvizler-chart-options="title=Predicate Overview"
+			  style="width:550px;"
+			  >
+		  <xsl:attribute name="data-sgvizler-query">
 
-      $("#btn_ShowChart").click(function(){
-        newPredQuery("sgvzl_container", $('#sel_ChartType').val())
-      });
-      $("#cb_RefineSearch").click(function(){
-        if(document.getElementById("cb_RefineSearch").checked==false)
-            toggle_RefineSearch(0);
-        else
-            toggle_RefineSearch(1);
+			  SELECT (?p as ?Predicate)(COUNT (?hts) as ?Hathi) (COUNT (?nzs) as ?NZ)((?NZ + ?Hathi) as ?Total)WHERE
+			  {
+				  {
+					?hts &lt;http://purl.org/dc/elements/1.1/Relation.isPartOf&gt; &lt;http://localhost:8989/greenstone3/library/collection/hathitrust-tab&gt;;
+						 ?p ?o
+				  }
+				  UNION
+				  {
+					 ?nzs &lt;http://purl.org/dc/elements/1.1/Relation.isPartOf&gt; &lt;http://localhost:8989/greenstone3/library/collection/nz-natlib-cat&gt;;
+						  ?p ?o
+				  }
+			  }
+			  GROUP BY ?p
+			  ORDER BY DESC(?Predicate)
 
-        generateQuery();
-      });
-      $("#sel_Predicate").change(function(){
-        updateRefineObjectSelector($("#sel_Predicate").val());
-        generateQuery();
-      });
-      $("#sel_RefineObject").change(function(){
-        updateRefinePredicateSelector($("#sel_RefineObject").val());
-        generateQuery();
-      });
-      $("#sel_RefinePredicate").change(function(){
-        generateQuery();
-      });
-      $("#sel_Limit").change(function(){
-        generateQuery();
-      });
-      </xsl:text>
-</script>
+		  </xsl:attribute>
+		  <xsl:comment>Filler</xsl:comment>
+		</div>
+		<div id="queryContainer">
+			 <span>SPARQL Query:</span>
+			 <br/>
+			 <span id="span_sparqlQuery"
+				   style="font-size:10pt;">
+			 <xsl:comment>Filler</xsl:comment>
+			 </span>
+		</div>
+	</div>
+	<div id="searchContainer">
+		<div id="searchControls">
+			<label for="sel_Predicate">View Predicate:</label>
+			<select id="sel_Predicate">
+				<option value="None"></option>
+			</select> 
+			<br/>
+				<input type="checkbox" id="cb_RefineSearch"/> <label for="cb_RefineSearch">Refine search to:</label>
+				<br/>
+			<div id="refineControls">
+				<label for="sel_RefineObject">?o</label>
+				<select id="sel_RefineObject" enabled='false'>
+					<option value="None">Select predicate above</option>
+				</select>
+				<br/>
+				<label for="sel_RefinePredicate">?p</label>
+				<select id="sel_RefinePredicate" enabled='false'>
+					<option value="None">Select ?o above</option>
+				</select>
+			</div>
 
-<div id="sgvzl_container"
-     style="width:auto; height:400px; margin-top:10px; ">
-</div>
-</xsl:template>
+			<select id="sel_Limit">
+				<option value="None">No Limit</option> 
+				<option value="10">10</option> 
+				<option value="25">25</option> 
+				<option value="50">50</option> 
+				<option value="75">75</option> 
+				<option value="100">100</option> 
+			</select>
+			<select id="sel_ChartType">
+				<option value="google.visualization.Table">Table</option> 
+				<option value="google.visualization.PieChart">Pie Chart</option> 
+				<option value="google.visualization.BarChart">Bar Chart</option> 
+				<option value="google.visualization.ImageSparkLine">Sparkline</option> 
+			</select>
+			<button type="button" id="btn_ShowChart">Execute Query</button>
+			<button type="button" id="btn_ShowQuery">Show SPARQL Query</button>
+		</div>
+		<div id="selectDataset">
+		<span>Search Datasets:</span>
+		<br/>
+		<input type="radio" name="radio_Dataset" value="all"/>All<br/>
+		<input type="radio" name="radio_Dataset" value="nz_natlib_cat"/>NZ National Library Catalogue<br/>
+		<input type="radio" name="radio_Dataset" value="hathitrust_tab"/>Hathi Trust<br/>
+		</div>
+	</div>
+	<script type="text/javascript">
+		<xsl:text disable-output-escaping="yes">
+			var overviewSparqlQuery;
+			function createOverviewQuery()
+			{
+				overviewSparqlQuery = $('#sgvzl_PredicateOverview').attr("data-sgvizler-query");
+			}
+			
+			google.load('visualization','1', {packages: ['imagechart']});		
+
+			$(document).ready(
+				function (){
+					sgvizler
+						.defaultEndpointOutputFormat('jsonp')
+						// Add prefixes used in examples:
+						.prefix('dc',  "http://purl.org/dc/elements/1.1/")
+						.prefix('xsd',  "http://www.w3.org/2001/XMLSchema#")
+
+						// Draw all sgvizler containers on page:
+						.containerDrawAll();
+
+						createOverviewQuery();
+
+					 //Load possible predicate values into selector
+					 updatePredicateSelector();
+
+					 //Ensure search refinement elements are greyed
+					 toggle_RefineSearch(0);   
+					 $('#cb_RefineSearch').prop('checked',false);
+				}
+			);
+
+			window.onload=setupPage;
+		  </xsl:text>
+	</script>
+
+	<div id="sgvzl_container"
+		 style="width:auto; height:400px; margin-top:10px; ">
+	</div>
+	</xsl:template>
 
 
Index: main/trunk/model-sites-dev/von-sparql/transform/pages/style.css
===================================================================
--- main/trunk/model-sites-dev/von-sparql/transform/pages/style.css	(revision 28784)
+++ main/trunk/model-sites-dev/von-sparql/transform/pages/style.css	(revision 28784)
@@ -0,0 +1,48 @@
+#sgvzl_PredicateOverview{
+    width:550px;
+    height:250px;
+    display:inline-block;
+    float:left;
+}
+
+#queryContainer{
+    border:1px solid #DFD9C3;
+    width:350px;height:230px;
+    float:right;
+    margin-left:15px;
+    padding:10px;
+    overflow-y:scroll;
+}
+
+#searchContainer{
+    margin-bottom:10px;
+    width:100%;
+    height:auto;
+	min-height:110px;
+	overflow:auto;
+}
+
+#searchControls{
+    width:65%;
+    float:left;
+}
+
+#refineControls{
+    margin-left:20px;
+    margin-bottom:20px;
+    margin-top:5px
+}
+
+#selectDataset{
+    width:30%;
+    float:right;
+    border:1px solid #DFD9C3;
+    padding:10px;
+}
+
+.ui-autocomplete{
+	max-height: 300px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	z-index: 1000 !important;
+}
