Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Help with JavaScript to build graphs

  • 29-03-2014 11:43AM
    #1
    Registered Users, Registered Users 2 Posts: 284 ✭✭


    I have been stuck on this problem and I know its something small but cannot get it working.

    I have two queries and I want the user to have an option of what query they want to display and what type of graph. I can get one working but not at the same time. I always get one says no data and the other displays and vice a versa.

    Maybe a another set of eyes will help?

    This is the code.
    <script type="text/javascript">
         
    		var resultArray = ['test'];
          // Define a callback function to receive the SPARQL JSON result.
          function myCallback(str) {
            // Convert result to JSON
            var jsonObj = eval('(' + str + ')');
    
            // Build up an array of results.
    		 resultArray = new Array();
    		resultArray[0] = jsonObj.head.vars;
    	for(var i = 0; i <  jsonObj.results.bindings.length; i++) {
    			resultArray[i+1] = new Array();
    			resultArray[i+1][0] = jsonObj.results.bindings[i].Name.value;
    			resultArray[i+1][1] = jsonObj.results.bindings[i].Population.value / 1000;
            } 
         }
          
         // Make the query.
        // sparqlQueryJson(query, endpoint, myCallback, false);
          
    	  
          google.load("visualization", "1", {packages:["corechart"]});
         
          function drawChart() {
    	  
    		var item = document.getElementById('selQuery').value;
    		
    		var item2 = document.getElementById('graphs').value;
    		
    		if (item == 'query1')
    		{
    		
    		function sparqlQueryJson(queryStr, endpoint, callback, isDebug) {
          var querypart = "query=" + escape(queryStr);
        
          // Get our HTTP request object.
          var xmlhttp = null;
          if(window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
         } else if(window.ActiveXObject) {
           // Code for older versions of IE, like IE6 and before.
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         } else {
           alert('Perhaps your browser does not support XMLHttpRequests?');
         }
        
         // Set up a POST with JSON result format.
         xmlhttp.open('POST', endpoint, true); // GET can have caching probs, so POST
         xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
         xmlhttp.setRequestHeader("Accept", "application/sparql-results+json");
        
         // Set up callback to get the response asynchronously.
         xmlhttp.onreadystatechange = function() {
           if(xmlhttp.readyState == 4) {
             if(xmlhttp.status == 200) {
               // Do something with the results
               if(isDebug) alert(xmlhttp.responseText);
               callback(xmlhttp.responseText);
             } else {
               // Some kind of error occurred.
               alert("Sparql query error: " + xmlhttp.status + " "
                   + xmlhttp.responseText);
             }
           }
         };
         // Send the query to the endpoint.
         xmlhttp.send(querypart);
        
         // Done; now just wait for the callback to be called.
        };
    	var endpoint = "http://sws.ifi.uio.no/sparql/world";
          var query = "PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>PREFIX owl: <http://www.w3.org/2002/07/owl#>PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>PREFIX w: <http://sws.ifi.uio.no/ont/world.owl#>PREFIX dbpo: <http://dbpedia.org/ontology/>PREFIX geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>PREFIX dct: <http://purl.org/dc/terms/>PREFIX fn: <http://www.w3.org/2005/xpath-functions#>PREFIX afn: <http://jena.hpl.hp.com/ARQ/function#>PREFIX npdv: <http://sws.ifi.uio.no/vocab/npd#>PREFIX npdv2: <http://sws.ifi.uio.no/vocab/npd-v2#>PREFIX geos: <http://www.opengis.net/ont/geosparql#>SELECT * WHERE{ []  a w:Country ; w:hasName ?Name ; w:hasCountryPopulation ?Population ; } ORDER BY DESC(?Population) LIMIT 10" ;
    		
    		sparqlQueryJson(query, endpoint, myCallback, false);
    		var data = google.visualization.arrayToDataTable(resultArray);
    
            var options = {
              title: document.selectionForm.graphName.value,
              hAxis: {title: 'Note: All Values are in thousands',  titleTextStyle: {color: 'red'}}
    		 };
                if (item2 == 'bar'){
    			var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, options);}
    			else if (item2 == 'pie'){
    			var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
    			}
    			else if (item2 == 'column'){
    			var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);
    			}
    			
          }
    	 else if (item == 'query2')
    		{
    		var endpoint = "http://sws.ifi.uio.no/sparql/world";
    		var query = "PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>PREFIX owl: <http://www.w3.org/2002/07/owl#>PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>PREFIX w: <http://sws.ifi.uio.no/ont/world.owl#>PREFIX dbpo: <http://dbpedia.org/ontology/>PREFIX geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>PREFIX dct: <http://purl.org/dc/terms/>PREFIX fn: <http://www.w3.org/2005/xpath-functions#>PREFIX afn: <http://jena.hpl.hp.com/ARQ/function#>PREFIX npdv: <http://sws.ifi.uio.no/vocab/npd#>PREFIX npdv2: <http://sws.ifi.uio.no/vocab/npd-v2#>PREFIX geos: <http://www.opengis.net/ont/geosparql#>SELECT * WHERE{ [] a w:City ; w:hasName ?Name ; w:hasCityPopulation ?Population ; } ORDER BY DESC(?Population) LIMIT 10";
    		var data = google.visualization.arrayToDataTable(resultArray);
    
            var options = {
              title: document.selectionForm.graphName.value,
              hAxis: {title: 'Note: All Values are in thousands',  titleTextStyle: {color: 'red'}}
    		  
    		  
            };
    			if (item2 == 'bar'){
    			var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, options);}
    			else if (item2 == 'pie'){
    			var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
    			}
    			else if (item2 == 'column'){
    			var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);
    			}
    			
          }
    	  
    	}
        </script>
    <title> Pre Written - Easy Graphs </title>
    <h2>Welcome to our Pre-queried page for the Central Statistics Office</h2>
    <form name='selectionForm'>
    <table border=0 style= "align:center">
    	<tr>
    		<td><b>Queries</b></td>
    		<td><select  id= 'selQuery' name='query'>
    			<option value='query1'>Top ten countries by population</option>
    			<option value='query2'>Top ten most populated cities in the world</option>
    			<option value='query3'>Query 3</option>
    			<option value='query4'>Query 4</option>
    			</select>
    		</td>
    	</tr>
    
    	<tr>
    		<td><b>Graphs</b></td> 
    		<td><select  id='graphs' name='charts'>
    			<option value='pie'>Pie Chart</option>
    			<option value='bar'>Bar Chart</option>
    			<option value='column'>Column Chart</option>
    			<option value='bubble'>Bubble Chart</option>
    			</select>
    


Comments

  • Registered Users, Registered Users 2 Posts: 284 ✭✭degzs


    This is a jsfiddle of the code http://jsfiddle.net/degzs/Wd8A5/


  • Registered Users, Registered Users 2 Posts: 19 joe_joe


    whats 'google' here
    Do you need to include some library...


    Any specific reason for keeping
    'function sparqlQueryJson(queryStr,'

    inside and 'if' condition


  • Registered Users, Registered Users 2 Posts: 19 joe_joe


    after looking into code further noticed...
    an async call and not waiting for its reponse...

    sparqlQueryJson(query, endpoint, myCallback, false);

    var data = google.visualization.arrayToDataTable(resultArray);

    Ideally you must expect 'resultArray' in callBack..


Advertisement