Pages

Monday, March 29, 2010

Interactive Chart from Google Apps Engine datastore

Create a simple python file chart.py which should have been already mapped to a particular URL pattern in app.yamx

- url: /chart/.*
  script: chart.py

   1: import cgi



   2:  



   3: from google.appengine.ext import db



   4: import hist



   5:  



   6: import os



   7: from google.appengine.ext.webapp import template



   8:  



   9: quotes = db.GqlQuery("SELECT * FROM HistoricalPrices")



  10:  



  11: template_values = {'quotes': quotes,}



  12:  



  13: path = os.path.join(os.path.dirname(__file__), 'index.html')



  14: print template.render(path, template_values)




index.html should look like following





   1: <html>



   2:   <head>



   3:     <script type="text/javascript" src="http://www.google.com/jsapi"></script>
   1:  
   2:     <script type="text/javascript">
   3:       google.load("visualization", "1", {packages:["linechart"]});
   4:       google.setOnLoadCallback(drawChart);
   5:       function drawChart() {
   6:         var data = new google.visualization.DataTable();
   7:         data.addColumn('string', 'Year');
   8:         data.addColumn('number', 'Sales');
   9:         {% for quote in quotes %}        
  10:         data.addRows(1);
  11:         data.setValue({{ forloop.counter0  }}, 0, '{{ quote.TIMESTAMP }}');
  12:         data.setValue({{ forloop.counter0  }}, 1, {{ quote.OPEN }});
  13:         {% endfor %}
  14:         var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  15:         chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
  16:       }
  17:     
</script>



   4:   </head>



   5:   <body>



   6:     <div id="chart_div"></div>      



   7:         <b></b>



   8:   </body>



   9: </html>




Here Django's templating engine is used. For the charting component Google Visualization API is used.



Following command can be used for single command update



D:Pythonpython.exe "D:Program FilesGooglegoogle_appengineappcfg.py" --passin --email=<username>@gmail.com update "D:devappsengineproxy"  < gpass



Here gpass is a text file containing the password.

3 comments:

  1. follow your code i got this:
    : No module named hist
    args = ('No module named hist',)
    message = 'No module named hist'

    ps:what is the datastore structure to run this script? i think the moule hist is your datastore class.

    ReplyDelete
  2. I think the datastore class I used was "HistoricalPrices" , I am wondering why you got the error for "hist" . Anyway you can design your own schema and use the similar code.

    ReplyDelete
  3. ... [Trackback]

    [...] There you will find 73082 more Infos: neilghosh.com/2010/03/28/interactive-chart-from-google-apps-engine-datastore/ [...]

    ReplyDelete