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.

Comments

  1. Blog Admin - If your blog isn't bringing in as much money as you would like it to check out my site www.QuickCashBlogging.com. We show blog owners how to maximize their blogs earnings potential. Tony

    ReplyDelete

Post a Comment

Popular posts from this blog

Load Testing Using Gatling

Bengali English word definition in Google Dictionary

Automatically Deploying to Google Appengine from Github using Cloud Build