javascript [jQuery and GooG viz] with a datasource

Hi,

My first attempts at JS / Jquery - I'm trying to setup a page where i can populate a table from data that is stored in a database. I now have a Python datasource up and running which seems to works fine - i've also managed to hack up something that is able to display that on a page (code below).

I found a datepicker on the jQuery page, and that has been added too :). Where I am sort of getting stuck now is how i would 'package' up those dates and send them to my datasource which is a web.py page running the google python viz api. One way of course would be to encode the start and end dates in the url, and then use the regex in web.py to pull these out and construct the return data appropriately. Goog also seems to discuss an sql like query language, but it doesnt seem like this is implemented in the python ver I am using, so i would have to code this up myself I think..

I'm just concerned that all of this is getting exponentially convoluted, and i'm sure there must be better ways to approach this problem -- im just not certain where to look?

Any help greatly appreciated, thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
    </title>
    <link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
      google.load("jquery", "1");
      google.load("jqueryui", "1");
    </script>
    <script type="text/javascript">
    var visualization;

  $(function() {
        $("#startDate").datepicker();
    });

      $(function() {
        $("#endDate").datepicker();
    });

//    function handleButtonClick() {
//      drawVisualization();
  //  }

    function drawVisualization() {
      var query = new google.visualization.Query(
          'http://localhost:8080/');

      // Send the query with a callback function.
      query.setRefreshInterval(5);
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      visualization = new google.visualization.Table(document.getElementById('visualization'));
      visualization.draw(data, null);
    }

    google.setOnLoadCallback(
        function() {
          document.getElementById('button').style.visibility = 'visible';
        });

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <p>Start Date: <input type="text" id="startDate"></p>
    <p>End Date: <input type="text" id="endDate"></p>
    <input id="button" type="button" value="Draw" onclick="drawVisualization();" style="visibility: hidden;"></input>
    <div id="visualization" style="height: 400px; width: 400px;"></div>
  </body>
</html>

ansaurus

tags:

views:

answers:

javascript [jQuery and GooG viz] with a datasource

related questions