first version of box chart (wash only)

rowers/templates/cumstats.html

@@ -5,6 +5,35 @@
 {% block title %}Workout Statistics{% endblock %}
 
 {% block content %}
+
+	<script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>
+	<script async="true" type="text/javascript">
+    Bokeh.set_log_level("info");
+	</script>
+
+	{{ plotscript |safe }}
+
+    <script>
+    // Set things up to resize the plot on a window resize. You can play with
+    // the arguments of resize_width_height() to change the plot's behavior.
+    var plot_resize_setup = function () {
+        var plotid = Object.keys(Bokeh.index)[0]; // assume we have just one plot
+        var plot = Bokeh.index[plotid];
+        var plotresizer = function() {
+            // arguments: use width, use height, maintain aspect ratio
+            plot.resize_width_height(true, true, true);
+        };
+        window.addEventListener('resize', plotresizer);
+        plotresizer();
+    };
+    window.addEventListener('load', plot_resize_setup);
+    </script>
+    <style>
+    /* Need this to get the page in "desktop mode"; not having an infinite height.*/
+    html, body {height: 100%; margin:5px;}
+    </style>
+
+
 <div class="grid_12 alpha">
   <h1>Workout Statistics</h1>
   <p>
@@ -97,6 +126,7 @@
 </div>
 <div class="grid_8 omega">
   {% if cordict %}
+  <div class="grid_8">
   <h2> Correlation Matrix</h2>
   <p>This matrix indicates a positive (+) or negative (-) correlation between two parameters. The Spearman correlation coefficient has values between +1 and -1. Positive correlation between two metrics means that if one metric increases, the other value is also likely to increase. Negative is the opposite. The further from zero, the higher the likelyhood.
   </p>
@@ -132,8 +162,13 @@
       {% endfor %}
     </tbody>
   </table>  
+  <div class="grid_8">
   
   {% endif %}
-</div>
+
+  <div class="grid_8">
+    {{ plotdiv|safe }}
+  </div>
+  </div>
 </div>
 {% endblock %}