From: Scott Baker <smbaker@gmail.com>
Date: Mon, 21 Apr 2014 07:26:00 +0000 (-0700)
Subject: remove histrogram, make bar chart wider, eliminate unused css, fix column formatting... 
X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;h=db403bbf12d9e8d4f16e616c625a72993edb6f9f;p=plstackapi.git

remove histrogram, make bar chart wider, eliminate unused css, fix column formatting, turn off statistics thread, raise bigquery timeout, fix python error when no rows in query
---

diff --git a/planetstack/core/static/hpc_historical.css b/planetstack/core/static/hpc_historical.css
index 412e986..7be52db 100644
--- a/planetstack/core/static/hpc_historical.css
+++ b/planetstack/core/static/hpc_historical.css
@@ -23,790 +23,28 @@
   clear: both;
 }
 
-.col-xs-1,
-.col-sm-1,
-.col-md-1,
-.col-lg-1,
-.col-xs-2,
-.col-sm-2,
-.col-md-2,
-.col-lg-2,
-.col-xs-3,
-.col-sm-3,
-.col-md-3,
-.col-lg-3,
-.col-xs-4,
-.col-sm-4,
-.col-md-4,
-.col-lg-4,
-.col-xs-5,
-.col-sm-5,
-.col-md-5,
-.col-lg-5,
-.col-xs-6,
-.col-sm-6,
-.col-md-6,
-.col-lg-6,
-.col-xs-7,
-.col-sm-7,
-.col-md-7,
-.col-lg-7,
-.col-xs-8,
-.col-sm-8,
-.col-md-8,
-.col-lg-8,
-.col-xs-9,
-.col-sm-9,
-.col-md-9,
-.col-lg-9,
-.col-xs-10,
-.col-sm-10,
-.col-md-10,
-.col-lg-10,
-.col-xs-11,
-.col-sm-11,
-.col-md-11,
-.col-lg-11,
-.col-xs-12,
-.col-sm-12,
-.col-md-12,
-.col-lg-12 {
+.graph_container {
+  width: 800px;
+}
+
+.col-md-halfgraph,
+.col-md-fullgraph {
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
 }
 
-.col-xs-1,
-.col-xs-2,
-.col-xs-3,
-.col-xs-4,
-.col-xs-5,
-.col-xs-6,
-.col-xs-7,
-.col-xs-8,
-.col-xs-9,
-.col-xs-10,
-.col-xs-11 {
+.col-md-halfgraph,
+.col-md-fullgraph {
   float: left;
 }
-
-.col-xs-12 {
-  width: 100%;
-}
-
-.col-xs-11 {
-  width: 91.66666666666666%;
-}
-
-.col-xs-10 {
-  width: 83.33333333333334%;
-}
-
-.col-xs-9 {
-  width: 75%;
-}
-
-.col-xs-8 {
-  width: 66.66666666666666%;
-}
-
-.col-xs-7 {
-  width: 58.333333333333336%;
-}
-
-.col-xs-6 {
-  width: 50%;
-}
-
-.col-xs-5 {
-  width: 41.66666666666667%;
-}
-
-.col-xs-4 {
-  width: 33.33333333333333%;
-}
-
-.col-xs-3 {
-  width: 25%;
-}
-
-.col-xs-2 {
-  width: 16.666666666666664%;
-}
-
-.col-xs-1 {
-  width: 8.333333333333332%;
-}
-
-.col-xs-pull-12 {
-  right: 100%;
+.col-md-halfgraph {
+  width: 350px;
 }
-
-.col-xs-pull-11 {
-  right: 91.66666666666666%;
-}
-
-.col-xs-pull-10 {
-  right: 83.33333333333334%;
-}
-
-.col-xs-pull-9 {
-  right: 75%;
-}
-
-.col-xs-pull-8 {
-  right: 66.66666666666666%;
-}
-
-.col-xs-pull-7 {
-  right: 58.333333333333336%;
-}
-
-.col-xs-pull-6 {
-  right: 50%;
-}
-
-.col-xs-pull-5 {
-  right: 41.66666666666667%;
-}
-
-.col-xs-pull-4 {
-  right: 33.33333333333333%;
-}
-
-.col-xs-pull-3 {
-  right: 25%;
-}
-
-.col-xs-pull-2 {
-  right: 16.666666666666664%;
-}
-
-.col-xs-pull-1 {
-  right: 8.333333333333332%;
-}
-
-.col-xs-pull-0 {
-  right: 0;
-}
-
-.col-xs-push-12 {
-  left: 100%;
-}
-
-.col-xs-push-11 {
-  left: 91.66666666666666%;
+.col-md-fullgraph {
+  width: 700px;
 }
-
-.col-xs-push-10 {
-  left: 83.33333333333334%;
-}
-
-.col-xs-push-9 {
-  left: 75%;
-}
-
-.col-xs-push-8 {
-  left: 66.66666666666666%;
-}
-
-.col-xs-push-7 {
-  left: 58.333333333333336%;
-}
-
-.col-xs-push-6 {
-  left: 50%;
-}
-
-.col-xs-push-5 {
-  left: 41.66666666666667%;
-}
-
-.col-xs-push-4 {
-  left: 33.33333333333333%;
-}
-
-.col-xs-push-3 {
-  left: 25%;
-}
-
-.col-xs-push-2 {
-  left: 16.666666666666664%;
-}
-
-.col-xs-push-1 {
-  left: 8.333333333333332%;
-}
-
-.col-xs-push-0 {
-  left: 0;
-}
-
-.col-xs-offset-12 {
-  margin-left: 100%;
-}
-
-.col-xs-offset-11 {
-  margin-left: 91.66666666666666%;
-}
-
-.col-xs-offset-10 {
-  margin-left: 83.33333333333334%;
-}
-
-.col-xs-offset-9 {
-  margin-left: 75%;
-}
-
-.col-xs-offset-8 {
-  margin-left: 66.66666666666666%;
-}
-
-.col-xs-offset-7 {
-  margin-left: 58.333333333333336%;
-}
-
-.col-xs-offset-6 {
-  margin-left: 50%;
-}
-
-.col-xs-offset-5 {
-  margin-left: 41.66666666666667%;
-}
-
-.col-xs-offset-4 {
-  margin-left: 33.33333333333333%;
-}
-
-.col-xs-offset-3 {
-  margin-left: 25%;
-}
-
-.col-xs-offset-2 {
-  margin-left: 16.666666666666664%;
-}
-
-.col-xs-offset-1 {
-  margin-left: 8.333333333333332%;
-}
-
-.col-xs-offset-0 {
-  margin-left: 0;
-}
-
-@media (min-width: 768px) {
-  .container {
-    width: 750px;
-  }
-  .col-sm-1,
-  .col-sm-2,
-  .col-sm-3,
-  .col-sm-4,
-  .col-sm-5,
-  .col-sm-6,
-  .col-sm-7,
-  .col-sm-8,
-  .col-sm-9,
-  .col-sm-10,
-  .col-sm-11 {
-    float: left;
-  }
-  .col-sm-12 {
-    width: 100%;
-  }
-  .col-sm-11 {
-    width: 91.66666666666666%;
-  }
-  .col-sm-10 {
-    width: 83.33333333333334%;
-  }
-  .col-sm-9 {
-    width: 75%;
-  }
-  .col-sm-8 {
-    width: 66.66666666666666%;
-  }
-  .col-sm-7 {
-    width: 58.333333333333336%;
-  }
-  .col-sm-6 {
-    width: 50%;
-  }
-  .col-sm-5 {
-    width: 41.66666666666667%;
-  }
-  .col-sm-4 {
-    width: 33.33333333333333%;
-  }
-  .col-sm-3 {
-    width: 25%;
-  }
-  .col-sm-2 {
-    width: 16.666666666666664%;
-  }
-  .col-sm-1 {
-    width: 8.333333333333332%;
-  }
-  .col-sm-pull-12 {
-    right: 100%;
-  }
-  .col-sm-pull-11 {
-    right: 91.66666666666666%;
-  }
-  .col-sm-pull-10 {
-    right: 83.33333333333334%;
-  }
-  .col-sm-pull-9 {
-    right: 75%;
-  }
-  .col-sm-pull-8 {
-    right: 66.66666666666666%;
-  }
-  .col-sm-pull-7 {
-    right: 58.333333333333336%;
-  }
-  .col-sm-pull-6 {
-    right: 50%;
-  }
-  .col-sm-pull-5 {
-    right: 41.66666666666667%;
-  }
-  .col-sm-pull-4 {
-    right: 33.33333333333333%;
-  }
-  .col-sm-pull-3 {
-    right: 25%;
-  }
-  .col-sm-pull-2 {
-    right: 16.666666666666664%;
-  }
-  .col-sm-pull-1 {
-    right: 8.333333333333332%;
-  }
-  .col-sm-pull-0 {
-    right: 0;
-  }
-  .col-sm-push-12 {
-    left: 100%;
-  }
-  .col-sm-push-11 {
-    left: 91.66666666666666%;
-  }
-  .col-sm-push-10 {
-    left: 83.33333333333334%;
-  }
-  .col-sm-push-9 {
-    left: 75%;
-  }
-  .col-sm-push-8 {
-    left: 66.66666666666666%;
-  }
-  .col-sm-push-7 {
-    left: 58.333333333333336%;
-  }
-  .col-sm-push-6 {
-    left: 50%;
-  }
-  .col-sm-push-5 {
-    left: 41.66666666666667%;
-  }
-  .col-sm-push-4 {
-    left: 33.33333333333333%;
-  }
-  .col-sm-push-3 {
-    left: 25%;
-  }
-  .col-sm-push-2 {
-    left: 16.666666666666664%;
-  }
-  .col-sm-push-1 {
-    left: 8.333333333333332%;
-  }
-  .col-sm-push-0 {
-    left: 0;
-  }
-  .col-sm-offset-12 {
-    margin-left: 100%;
-  }
-  .col-sm-offset-11 {
-    margin-left: 91.66666666666666%;
-  }
-  .col-sm-offset-10 {
-    margin-left: 83.33333333333334%;
-  }
-  .col-sm-offset-9 {
-    margin-left: 75%;
-  }
-  .col-sm-offset-8 {
-    margin-left: 66.66666666666666%;
-  }
-  .col-sm-offset-7 {
-    margin-left: 58.333333333333336%;
-  }
-  .col-sm-offset-6 {
-    margin-left: 50%;
-  }
-  .col-sm-offset-5 {
-    margin-left: 41.66666666666667%;
-  }
-  .col-sm-offset-4 {
-    margin-left: 33.33333333333333%;
-  }
-  .col-sm-offset-3 {
-    margin-left: 25%;
-  }
-  .col-sm-offset-2 {
-    margin-left: 16.666666666666664%;
-  }
-  .col-sm-offset-1 {
-    margin-left: 8.333333333333332%;
-  }
-  .col-sm-offset-0 {
-    margin-left: 0;
-  }
-}
-
-@media (min-width: 992px) {
-  .container {
-    width: 970px;
-  }
-  .col-md-1,
-  .col-md-2,
-  .col-md-3,
-  .col-md-4,
-  .col-md-5,
-  .col-md-6,
-  .col-md-7,
-  .col-md-8,
-  .col-md-9,
-  .col-md-10,
-  .col-md-11 {
-    float: left;
-  }
-  .col-md-12 {
-    width: 100%;
-  }
-  .col-md-11 {
-    width: 91.66666666666666%;
-  }
-  .col-md-10 {
-    width: 83.33333333333334%;
-  }
-  .col-md-9 {
-    width: 75%;
-  }
-  .col-md-8 {
-    width: 66.66666666666666%;
-  }
-  .col-md-7 {
-    width: 58.333333333333336%;
-  }
-  .col-md-6 {
-    width: 50%;
-  }
-  .col-md-5 {
-    width: 41.66666666666667%;
-  }
-  .col-md-4 {
-    width: 33.33333333333333%;
-  }
-  .col-md-3 {
-    width: 25%;
-  }
-  .col-md-2 {
-    width: 16.666666666666664%;
-  }
-  .col-md-1 {
-    width: 8.333333333333332%;
-  }
-  .col-md-pull-12 {
-    right: 100%;
-  }
-  .col-md-pull-11 {
-    right: 91.66666666666666%;
-  }
-  .col-md-pull-10 {
-    right: 83.33333333333334%;
-  }
-  .col-md-pull-9 {
-    right: 75%;
-  }
-  .col-md-pull-8 {
-    right: 66.66666666666666%;
-  }
-  .col-md-pull-7 {
-    right: 58.333333333333336%;
-  }
-  .col-md-pull-6 {
-    right: 50%;
-  }
-  .col-md-pull-5 {
-    right: 41.66666666666667%;
-  }
-  .col-md-pull-4 {
-    right: 33.33333333333333%;
-  }
-  .col-md-pull-3 {
-    right: 25%;
-  }
-  .col-md-pull-2 {
-    right: 16.666666666666664%;
-  }
-  .col-md-pull-1 {
-    right: 8.333333333333332%;
-  }
-  .col-md-pull-0 {
-    right: 0;
-  }
-  .col-md-push-12 {
-    left: 100%;
-  }
-  .col-md-push-11 {
-    left: 91.66666666666666%;
-  }
-  .col-md-push-10 {
-    left: 83.33333333333334%;
-  }
-  .col-md-push-9 {
-    left: 75%;
-  }
-  .col-md-push-8 {
-    left: 66.66666666666666%;
-  }
-  .col-md-push-7 {
-    left: 58.333333333333336%;
-  }
-  .col-md-push-6 {
-    left: 50%;
-  }
-  .col-md-push-5 {
-    left: 41.66666666666667%;
-  }
-  .col-md-push-4 {
-    left: 33.33333333333333%;
-  }
-  .col-md-push-3 {
-    left: 25%;
-  }
-  .col-md-push-2 {
-    left: 16.666666666666664%;
-  }
-  .col-md-push-1 {
-    left: 8.333333333333332%;
-  }
-  .col-md-push-0 {
-    left: 0;
-  }
-  .col-md-offset-12 {
-    margin-left: 100%;
-  }
-  .col-md-offset-11 {
-    margin-left: 91.66666666666666%;
-  }
-  .col-md-offset-10 {
-    margin-left: 83.33333333333334%;
-  }
-  .col-md-offset-9 {
-    margin-left: 75%;
-  }
-  .col-md-offset-8 {
-    margin-left: 66.66666666666666%;
-  }
-  .col-md-offset-7 {
-    margin-left: 58.333333333333336%;
-  }
-  .col-md-offset-6 {
-    margin-left: 50%;
-  }
-  .col-md-offset-5 {
-    margin-left: 41.66666666666667%;
-  }
-  .col-md-offset-4 {
-    margin-left: 33.33333333333333%;
-  }
-  .col-md-offset-3 {
-    margin-left: 25%;
-  }
-  .col-md-offset-2 {
-    margin-left: 16.666666666666664%;
-  }
-  .col-md-offset-1 {
-    margin-left: 8.333333333333332%;
-  }
-  .col-md-offset-0 {
-    margin-left: 0;
-  }
-}
-
-@media (min-width: 1200px) {
-  .container {
-    width: 1170px;
-  }
-  .col-lg-1,
-  .col-lg-2,
-  .col-lg-3,
-  .col-lg-4,
-  .col-lg-5,
-  .col-lg-6,
-  .col-lg-7,
-  .col-lg-8,
-  .col-lg-9,
-  .col-lg-10,
-  .col-lg-11 {
-    float: left;
-  }
-  .col-lg-12 {
-    width: 100%;
-  }
-  .col-lg-11 {
-    width: 91.66666666666666%;
-  }
-  .col-lg-10 {
-    width: 83.33333333333334%;
-  }
-  .col-lg-9 {
-    width: 75%;
-  }
-  .col-lg-8 {
-    width: 66.66666666666666%;
-  }
-  .col-lg-7 {
-    width: 58.333333333333336%;
-  }
-  .col-lg-6 {
-    width: 50%;
-  }
-  .col-lg-5 {
-    width: 41.66666666666667%;
-  }
-  .col-lg-4 {
-    width: 33.33333333333333%;
-  }
-  .col-lg-3 {
-    width: 25%;
-  }
-  .col-lg-2 {
-    width: 16.666666666666664%;
-  }
-  .col-lg-1 {
-    width: 8.333333333333332%;
-  }
-  .col-lg-pull-12 {
-    right: 100%;
-  }
-  .col-lg-pull-11 {
-    right: 91.66666666666666%;
-  }
-  .col-lg-pull-10 {
-    right: 83.33333333333334%;
-  }
-  .col-lg-pull-9 {
-    right: 75%;
-  }
-  .col-lg-pull-8 {
-    right: 66.66666666666666%;
-  }
-  .col-lg-pull-7 {
-    right: 58.333333333333336%;
-  }
-  .col-lg-pull-6 {
-    right: 50%;
-  }
-  .col-lg-pull-5 {
-    right: 41.66666666666667%;
-  }
-  .col-lg-pull-4 {
-    right: 33.33333333333333%;
-  }
-  .col-lg-pull-3 {
-    right: 25%;
-  }
-  .col-lg-pull-2 {
-    right: 16.666666666666664%;
-  }
-  .col-lg-pull-1 {
-    right: 8.333333333333332%;
-  }
-  .col-lg-pull-0 {
-    right: 0;
-  }
-  .col-lg-push-12 {
-    left: 100%;
-  }
-  .col-lg-push-11 {
-    left: 91.66666666666666%;
-  }
-  .col-lg-push-10 {
-    left: 83.33333333333334%;
-  }
-  .col-lg-push-9 {
-    left: 75%;
-  }
-  .col-lg-push-8 {
-    left: 66.66666666666666%;
-  }
-  .col-lg-push-7 {
-    left: 58.333333333333336%;
-  }
-  .col-lg-push-6 {
-    left: 50%;
-  }
-  .col-lg-push-5 {
-    left: 41.66666666666667%;
-  }
-  .col-lg-push-4 {
-    left: 33.33333333333333%;
-  }
-  .col-lg-push-3 {
-    left: 25%;
-  }
-  .col-lg-push-2 {
-    left: 16.666666666666664%;
-  }
-  .col-lg-push-1 {
-    left: 8.333333333333332%;
-  }
-  .col-lg-push-0 {
-    left: 0;
-  }
-  .col-lg-offset-12 {
-    margin-left: 100%;
-  }
-  .col-lg-offset-11 {
-    margin-left: 91.66666666666666%;
-  }
-  .col-lg-offset-10 {
-    margin-left: 83.33333333333334%;
-  }
-  .col-lg-offset-9 {
-    margin-left: 75%;
-  }
-  .col-lg-offset-8 {
-    margin-left: 66.66666666666666%;
-  }
-  .col-lg-offset-7 {
-    margin-left: 58.333333333333336%;
-  }
-  .col-lg-offset-6 {
-    margin-left: 50%;
-  }
-  .col-lg-offset-5 {
-    margin-left: 41.66666666666667%;
-  }
-  .col-lg-offset-4 {
-    margin-left: 33.33333333333333%;
-  }
-  .col-lg-offset-3 {
-    margin-left: 25%;
-  }
-  .col-lg-offset-2 {
-    margin-left: 16.666666666666664%;
-  }
-  .col-lg-offset-1 {
-    margin-left: 8.333333333333332%;
-  }
-  .col-lg-offset-0 {
-    margin-left: 0;
-  }
+.col-md-12 {
+  width: 100%;
 }
diff --git a/planetstack/hpc_wizard/bigquery_analytics.py b/planetstack/hpc_wizard/bigquery_analytics.py
index 2e65707..994e837 100644
--- a/planetstack/hpc_wizard/bigquery_analytics.py
+++ b/planetstack/hpc_wizard/bigquery_analytics.py
@@ -91,7 +91,7 @@ class BigQueryAnalytics:
 	service = build('bigquery', 'v2', http=http)
 
         body = {"query": query,
-                "timeoutMs": 30000}
+                "timeoutMs": 60000}
         response = service.jobs().query(projectId=PROJECT_NUMBER, body=body).execute()
 
         return response
diff --git a/planetstack/hpc_wizard/hpc_wizard.py b/planetstack/hpc_wizard/hpc_wizard.py
index bb85847..5c5a3f9 100644
--- a/planetstack/hpc_wizard/hpc_wizard.py
+++ b/planetstack/hpc_wizard/hpc_wizard.py
@@ -316,7 +316,7 @@ def get_hpc_wizard():
 
     if (glo_hpc_wizard is None):
         glo_hpc_wizard = HpcWizard()
-        glo_hpc_wizard.initialize_statistics()
+#        glo_hpc_wizard.initialize_statistics()
 
     return glo_hpc_wizard
 
diff --git a/planetstack/templates/admin/dashboard/hpc_historical.html b/planetstack/templates/admin/dashboard/hpc_historical.html
index 9eb00ba..24d17f2 100644
--- a/planetstack/templates/admin/dashboard/hpc_historical.html
+++ b/planetstack/templates/admin/dashboard/hpc_historical.html
@@ -1,302 +1,301 @@
 
     <script type="text/javascript" src="//www.google.com/jsapi"></script>
-    <link rel="stylesheet" href="/static/hpc_historical.css">
+	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
     <script type="text/javascript">
 		google.load('visualization', '1', {'packages' : ['controls','table','corechart','geochart']});
     </script>
-
+	
     <script type="text/javascript">
+var queryString = encodeURIComponent("SELECT MINUTE(time) as Time, city, s8 as Node, REGEXP_REPLACE(s8,r'node[0-9]+\.(.*)\.vicci\.org',r'\\1') as Site, AVG(i0) as Cpu, AVG(i1) as Requests FROM [vicci.demoevents] WHERE i0 is not null AND s8 contains 'vicci.org' and not city IN ('princeton','Unknown') and city is not null GROUP BY Time,city,Site,Node ORDER BY Time;");
+			var serverPart = "http://cloud-scrutiny.appspot.com/command?action=send_query&force=ColumnChart&q="
+			var dataSourceUrl = serverPart + queryString;
+			var query;
+
+			var options = {
+	   width: 600,
+	   height: 400,
+	   showRowNumber: false,
+	   pages:true,
+       numRows:9,
+	   backgroundColor: "black"
+			};
+
+google.setOnLoadCallback(function() { sendAndDraw(dataSourceUrl); });
+
+function showNodeAgg(dt) {
+		var tab = new google.visualization.ChartWrapper({
+          'chartType': 'Table',
+          'containerId': 'chart3',
+          'options': {
+            'width': 300,
+            'height': 300,
+            'title': 'Network-wide usage',
+			'page': 'enable',
+			'pageSize': 10
+          },
+          'view': {'columns': [0, 1, 2]}
+        });
+
+        tab.setDataTable(dt);
+        tab.draw();
+}
+
+function showSiteTimeAgg(dt) {
+		var lineChart = new google.visualization.ChartWrapper({
+          'chartType': 'LineChart',
+          'containerId': 'chart4',
+          'options': {
+            'width': 300,
+            'height': 300,
+            'title': 'Network-wide usage',
+			'pages': true,
+			'numRows': 9
+          },
+          'view': {'columns': [0, 1, 2]}
+        });
+        lineChart.setDataTable(dt);
+        lineChart.draw();
+		/*
+		var scatterChart = new google.visualization.ChartWrapper({
+          'chartType': 'ScatterChart',
+          'containerId': 'chart5',
+          'options': {
+            'width': 300,
+            'height': 300,
+          },
+          // from the 'data' DataTable.
+          'view': {'columns': [1, 2]}
+        });
+		scatterChart.setDataTable(dt);
+		scatterChart.draw();*/
+}
+function showSiteAgg(dt) {
+		var barChart = new google.visualization.ChartWrapper({
+          'chartType': 'ColumnChart',
+          'containerId': 'chart1',
+          'options': {
+            'width': 300,
+            'height': 300,
+            'title': 'Site-wise usage',
+			'pages': true,
+			'numRows': 9
+          },
+          // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
+          // from the 'data' DataTable.
+          'view': {'columns': [1, 2, 3]}
+        });
+        barChart.setDataTable(dt);
+        barChart.draw();
+		var geoChart = new google.visualization.ChartWrapper({
+          'chartType': 'GeoChart',
+          'containerId': 'chart2',
+          'options': {
+            'width': 300,
+            'height': 300,
+			'displayMode': 'markers',
+			'region':'021',
+            'title': 'Usage map',
+        	colorAxis: {colors: ['green', 'purple', 'red']}
+          },
+          // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
+          // from the 'data' DataTable.
+          'view': {'columns': [0, 2,3]}
+        });
+		geoChart.setDataTable(dt);
+		geoChart.draw();
+	
+		var histogram = new google.visualization.ChartWrapper({
+          'chartType': 'Histogram',
+          'containerId': 'chart6',
+          'options': {
+            'width': 300,
+            'height': 300,
+          },
+		  'title': 'Sites by load',
+          // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
+          // from the 'data' DataTable.
+          'view': {'columns': [1, 2]}
+        });
+		histogram.setDataTable(dt);
+		histogram.draw();
+		
+}
+
+function handleResponse(response) {
+var supportedClasses = {
+		'Table':google.visualization.Table,
+		'LineChart':google.visualization.LineChart,
+		'ScatterChart':google.visualization.ScatterChart,
+		'ColumnChart':google.visualization.ColumnChart,
+		'GeoChart':google.visualization.GeoChart,
+		'PieChart':google.visualization.PieChart,
+		'Histogram':google.visualization.Histogram
+	};
+
+	/*var slider2 = new google.visualization.ControlWrapper({
+    'controlType': 'NumberRangeFilter',
+    'containerId': 'control3',
+    'options': {
+      'filterColumnLabel': 'Cpu',
+      minValue: 0,
+      maxValue: 100,
+	  ui: { ticks: 10}
+    }
+  });*/
+
+  var timeSlider = new google.visualization.ControlWrapper({
+    'controlType': 'NumberRangeFilter',
+    'containerId': 'control1',
+    'options': {
+      'filterColumnLabel': 'Time',
+	  ui: { ticks: 10}
+    }
+  });
+
+  // Define a bar chart
+  var barChart = new google.visualization.ChartWrapper({
+    'chartType': 'BarChart',
+    'containerId': 'chart1',
+    'options': {
+      'width': 400,
+      'height': 300,
+      'hAxis': {'minValue': 0, 'maxValue': 60},
+      'chartArea': {top: 0, right: 0, bottom: 0}
+    }
+  });
+
+	var categoryPicker = new google.visualization.ControlWrapper({
+          'controlType': 'CategoryFilter',
+          'allowMultiple': true,
+          'containerId': 'control2',
+          'options': {
+            'filterColumnLabel': 'Site',
+            'ui': {
+            'labelStacking': 'vertical',
+              'allowTyping': false
+            }
+          }
+        });
+	//var container = document.getElementById('datatable');
+	//var table = new google.visualization.LineChart(container);
+	//var table = new google.visualization.ColumnChart(container);
+
+	var proxy = new google.visualization.ChartWrapper({
+          'chartType': 'Table',
+          'containerId': 'chart7',
+          'options': {
+            'width': 800,
+            'height': 300,
+			pageSize:5,
+			page:'enable',
+            'legend': 'none',
+            'title': 'Nodes'
+          },
+          // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
+          // from the 'data' DataTable.
+          'view': {'columns': [0,1,2,3,4,5]}
+        });
+
+	function core_sum(arr) {
+		var ret = 0;
+		for (var i = 0; i < arr.length; i++) {
+			ret+=arr[i]/1000;
+		}
+		return ret;
+	}
+
+	function scaled_sum(arr) {
+		var ret = 0;
+		for (var i = 0; i < arr.length; i++) {
+			ret+=arr[i]/1000;
+		}
+		return ret;
+	}
+
+	function count_uniq(arr) {
+		var counts = {};
+		var ret = 0;
+		console.log('Starting ret '+ret);
+		for (var i = 0; i < arr.length; i++) {
+				if (!counts[arr[i]]) ret+=1;
+			    counts[arr[i]] = 1;
+		}
+		return ret;
+	}	
+	google.visualization.events.addListener(proxy, 'ready', function () {
+        // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
+        var dt = proxy.getDataTable();
+		var groupedData1 = google.visualization.data.group(dt, [0], [{
+            column: 4,
+            type: 'number',
+            label: dt.getColumnLabel(4),
+            aggregation: google.visualization.data.sum
+        },{
+			column: 5,
+            type: 'number',
+            label: dt.getColumnLabel(5),
+            aggregation: google.visualization.data.sum
+		}]);
+
+        showSiteTimeAgg(groupedData1);
+    });
+
+	/*google.visualization.events.addListener(proxy, 'ready', function () {
+        // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
+        var dt = proxy.getDataTable();
+        var groupedData0 = google.visualization.data.group(dt, [2], [{
+            column: 4,
+            type: 'number',
+            label: dt.getColumnLabel(4),
+            aggregation: google.visualization.data.sum
+        },{
+			column: 5,
+            type: 'number',
+            label: dt.getColumnLabel(5),
+            aggregation: google.visualization.data.sum
+		}]);
+        // after grouping, the data will be sorted by column 0, then 1, then 2
+        // if you want a different order, you have to re-sort
+		showNodeAgg(groupedData0);
+		});*/
+
+	google.visualization.events.addListener(proxy, 'ready', function () {
+        // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
+        var dt = proxy.getDataTable();
+        var groupedData0 = google.visualization.data.group(dt, [1,3], [{
+            column: 4,
+            type: 'number',
+            label: 'Cores',
+            aggregation: core_sum
+        },{
+			column: 5,
+            type: 'number',
+            label: dt.getColumnLabel(5),
+            aggregation: scaled_sum
+		}]);
+        // after grouping, the data will be sorted by column 0, then 1, then 2
+        // if you want a different order, you have to re-sort
+		showSiteAgg(groupedData0);
+            });
+
+	data = response.getDataTable();
+	new google.visualization.Dashboard(document.getElementById('dashboard')).
+            // Establish bindings, declaring the both the slider and the category
+            // picker will drive both charts.
+            bind([categoryPicker,timeSlider], [proxy]).
+            // Draw the entire dashboard.
+            draw(data);
 
-     var options = {
-
         width: 600,
-         height: 400,
-         showRowNumber: false,
-         pages: true,
-         numRows: 9,
-         backgroundColor: "black"
-     };
-
-     // ask django for a data source URL to use for the graphs
-
-     function updateDataSourceUrl() {
-         var sliceName = $("#historical_slicename :selected").text();
-         var queryString = "/analytics/bigquery/?sum=@bytes_sent&avg=@cpu&groupBy=Time,city,@hostname,@site&slice=" + sliceName;
-
-         $.ajax({
-             url: queryString,
-             dataType: 'json',
-             type: 'GET',
-             success: function (newData) {
-                 sendAndDraw(newData["dataSourceUrl"])
-             }
-         });
-     }
-
-     TIME_COL = 0;
-     BANDWIDTH_COL = 2;
-     CPU_COL = 1;
-     CITY_COL = 3;
-     NODE_COL = 4;
-     SITE_COL = 5;
-
-     google.setOnLoadCallback(function () {
-         $('#historical_slicename').change(function()
-         {
-             updateDataSourceUrl();
-         });
-
-         updateDataSourceUrl();
-     });
-
-     function showSiteTimeAgg(dt) {
-         var lineChart = new google.visualization.ChartWrapper({
-             'chartType': 'LineChart',
-             'containerId': 'chart4',
-             'options': {
-                 'width': 300,
-                 'height': 300,
-                 'title': 'Network-wide usage',
-                 'pages': true,
-                 'numRows': 9
-             },
-             'view': {
-                 'columns': [0, 1, 2]
-             }
-         });
-         lineChart.setDataTable(dt);
-         lineChart.draw();
-     }
-
-     function showSiteAgg(dt) {
-         var barChart = new google.visualization.ChartWrapper({
-             'chartType': 'ColumnChart',
-             'containerId': 'chart1',
-             'options': {
-                 'width': 300,
-                 'height': 300,
-                 'title': 'Site-wise usage',
-                 'pages': true,
-                 'numRows': 9
-             },
-             'view': {
-                 'columns': [1, 2, 3]
-             }
-         });
-         barChart.setDataTable(dt);
-         barChart.draw();
-         var geoChart = new google.visualization.ChartWrapper({
-             'chartType': 'GeoChart',
-             'containerId': 'chart2',
-             'options': {
-                 'width': 300,
-                 'height': 300,
-                 'displayMode': 'markers',
-                 'region': '021',
-                 'title': 'Usage map',
-                 colorAxis: {
-                     colors: ['green', 'purple', 'red']
-                 }
-             },
-             'view': {
-                 'columns': [0, 2, 3]
-             }
-         });
-         geoChart.setDataTable(dt);
-         geoChart.draw();
-
-         var histogram = new google.visualization.ChartWrapper({
-             'chartType': 'Histogram',
-             'containerId': 'chart6',
-             'options': {
-                 'width': 300,
-                 'height': 300,
-             },
-             'title': 'Sites by load',
-             'view': {
-                 'columns': [1, 2]
-             }
-         });
-         histogram.setDataTable(dt);
-         histogram.draw();
-
-     }
-
-     function handleResponse(response) {
-         var timeSlider = new google.visualization.ControlWrapper({
-             'controlType': 'DateRangeFilter',
-             'containerId': 'control1',
-             'options': {
-                 'filterColumnLabel': 'Time',
-                 ui: {
-                     ticks: 10,
-                     step: "minute"
-                 }
-             }
-         });
-
-         // Define a bar chart
-         var barChart = new google.visualization.ChartWrapper({
-             'chartType': 'BarChart',
-             'containerId': 'chart1',
-             'options': {
-                 'width': 400,
-                 'height': 300,
-                 'hAxis': {
-                     'minValue': 0,
-                     'maxValue': 60
-                 },
-                 'chartArea': {
-                     top: 0,
-                     right: 0,
-                     bottom: 0
-                 }
-             }
-         });
-
-         var categoryPicker = new google.visualization.ControlWrapper({
-             'controlType': 'CategoryFilter',
-             'allowMultiple': true,
-             'containerId': 'control2',
-             'options': {
-                 'filterColumnLabel': 'site',
-                 'ui': {
-                     'labelStacking': 'vertical',
-                     'allowTyping': false
-                 }
-             }
-         });
-
-         var proxy = new google.visualization.ChartWrapper({
-             'chartType': 'Table',
-             'containerId': 'chart7',
-             'options': {
-                 'width': 800,
-                 'height': 300,
-                 pageSize: 5,
-                 page: 'enable',
-                 'legend': 'none',
-                 'title': 'Nodes'
-             },
-             'view': {
-                 'columns': [0, 1, 2, 3, 4, 5]
-             }
-         });
-
-         function avg_bandwidth(arr) {
-                var ret = 0;
-                for (var i = 0; i < arr.length; i++) {
-                        ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
-                }
-                if (arr.length==0) {
-                    return 0;
-                }
-                return ret/arr.length;
-         }
-
-         function sum_bytes_sent_as_bw(arr) {
-                var ret = 0;
-                for (var i = 0; i < arr.length; i++) {
-                        ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
-                }
-                return ret/60.0;
-         }
-
-         function sum_bytes_sent_as_GB(arr) {
-                var ret = 0;
-                for (var i = 0; i < arr.length; i++) {
-                        ret+=arr[i]/1024.0/1024.0/1024.0;
-                }
-                return ret;
-         }
-
-         function fixDate2(unixDate) {
-             // not completely sure why we have to do this, as the data was in
-             // javascript Date() objects to start with. If we don't do it,
-             // then the horizontal axis will be blank.
-             return new Date(unixDate);
-         }
-
-         var format0dp = new google.visualization.NumberFormat({fractionDigits:0});
-         var format2dp = new google.visualization.NumberFormat({fractionDigits:2});
-
-         // Create a group for charts that will have a horizontal axis that is
-         // time.
-
-         google.visualization.events.addListener(proxy, 'ready', function () {
-             var dt = proxy.getDataTable();
-             var groupedData1 = google.visualization.data.group(dt, [{
-                 column: TIME_COL,
-                 type: 'datetime',
-                 modifier: fixDate2,
-             }], [{
-                 column: CPU_COL,
-                 type: 'number',
-                 label: "avg cpu",
-                 aggregation: google.visualization.data.avg
-             }, {
-                 column: BANDWIDTH_COL,
-                 type: 'number',
-                 label: "Gbps",
-                 aggregation: sum_bytes_sent_as_bw
-             }]);
-
-             format0dp.format(groupedData1,1);
-             format2dp.format(groupedData1,2);
-
-             showSiteTimeAgg(groupedData1);
-         });
-
-         // Create a group for charts that will have a horizontal axis that is
-         // city or site.
-
-         google.visualization.events.addListener(proxy, 'ready', function () {
-             var dt = proxy.getDataTable();
-             var groupedData0 = google.visualization.data.group(dt, [CITY_COL, SITE_COL], [{
-                 column: CPU_COL,
-                 type: 'number',
-                 label: 'avg cpu',
-                 aggregation: google.visualization.data.avg
-             }, {
-                 column: BANDWIDTH_COL,
-                 type: 'number',
-                 label: "GB sent",
-                 aggregation: sum_bytes_sent_as_GB
-             }]);
-
-             format0dp.format(groupedData0,2);
-             format2dp.format(groupedData0,3);
-
-             showSiteAgg(groupedData0);
-         });
-
-         data = response.getDataTable();
-         new google.visualization.Dashboard(document.getElementById('dashboard')).
-         // Establish bindings, declaring the both the slider and the category
-         // picker will drive both charts.
-         bind([categoryPicker, timeSlider], [proxy]).
-         // Draw the entire dashboard.
-         draw(data);
-
-     }
-
-     function sendAndDraw(queryString) {
-         query = new google.visualization.Query(queryString)
-         query && query.abort();
-         query.send(function (response) {
-             handleResponse(response);
-         });
-     }
+}
+function sendAndDraw(queryString) {
+	query = new google.visualization.Query(queryString)
+	query && query.abort();
+	query.send(function(response) {handleResponse(response);});
+}
+      
 
     </script>
     <div id="dashboard" class="container">
-                <div class="row">
-                        <span><b>Slice Name:</b></span>
-                        <span><select id="historical_slicename">
-                        {% for slice in userSliceInfo %}
-                           <option value="{{ slice.slicename }}">{{ slice.slicename }}</option>
-                        {% endfor %}
-                        </select></span>
-                </div>
 		<div class="row">
 			<div class="col-md-8">
 				<div class="col-md-4" id="control2"></div>