JavaScript function

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.

The user needs to have option which one they would like to display eg: query 1 or query 2 ( it should be just a simple if statement)

<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>

<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>

</td>

</tr>

<tr>

<td><b>Enter graph name :</b></td>

<td><textarea name='graphName' rows='1' cols='50'></textarea></td>

</tr>

<tr>

<td><b>Measurements:</b></td>

<td><b>Height:<textarea name='graphHeight' rows='1' cols='10'></textarea>Width:<textarea name='graphWidth' rows='1' cols='10'></textarea></b></td>

</tr>

<tr>

<td></td>

<td><input type='button' value='Submit' style='background:white; width:100px; height:30px; font-weight:900;' 

onClick='drawChart();'></td>

</tr>

</table>

</form>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

 

Maybe a another set of eyes will help?

This is a jsfiddle of my code

 http://jsfiddle.net/degzs/Wd8A5/

--
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.