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:\Python\python.exe "D:\\Program Files\\Google\\google_appengine\\appcfg.py" --passin --email=<username>@gmail.com update "D:\\dev\\appsengine\\proxy"  < gpass



Here gpass is a text file containing the password.