More or less finished the permutation histogram

4 files changed, 59 insertions, 17 deletions

diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
index ec428cfa..f3485a82 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -3,6 +3,9 @@ $ ->
         return a - b
 
     process_lrs_array = ->
+        # Put the data in a format needed for graphing 
+        # The permutation count for a particular integer range (10-11 or 12-13 for example)
+        # will be on the y-axis; LRS values will be on the x-axis
         lrs_array = js_data.lrs_array
         bars = {}
         for lrs in lrs_array
@@ -10,33 +13,56 @@ $ ->
             if floored not of bars
                 bars[floored] = 0
             bars[floored] += 1
-            
+
+        # Now we need to take the unordered hash
+        # And order the keys
         keys = []
         for key of bars
             keys.push(key)
+    
         keys.sort(sort_number)
         
+
+        # Now that we have the ordered keys above
+        # We can build an array of arrays that jqPlot will use
         bars_ordered = []
         for key in keys
             bars_ordered.push([parseInt(key), bars[key]])
-    
+
         console.log("bars is:", bars)
         console.log("keys are:", keys)
         console.log("bars_ordered are:", bars_ordered)
         return bars_ordered
-    
+
     display_permutation_histogram = (bars_ordered) ->
-        $.jqplot('permutation_histogram',  [bars_ordered], 
-            seriesDefaults: 
+        # Figure out the largest key, so we can make sure the x axis max is one larger later on
+        max_lrs = bars_ordered[bars_ordered.length-1][0]
+        console.log("max_key is:", max_lrs)
+    
+        $.jqplot('permutation_histogram',  [bars_ordered],
+            title: 'Permutation Histogram'     
+            seriesDefaults:
                 renderer:$.jqplot.BarRenderer
+                rendererOptions: 
+                    #barPadding: 30
+                    #barMargin: 30
+                    barWidth: 15
+                    #shadowOffset: 2
+                    #shadowDepth: 5
+                    #shadowAlpha: 0.8
+                pointLabels: 
+                    show: true
+            axesDefaults:
+                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
             axes: 
                 xaxis: 
                   min: 0
-                  label: "LRS",
-                  pad: 0
-                yaxis: 
-                  label: "Count",
-                  pad: 0
+                  #max: max_lrs + 2
+                  label: "LRS"
+                  pad: 1.1
+                yaxis:
+                  min: 0
+                  label: "Frequency"
         )
 
 
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js
index 0b186242..ac85dc3d 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -34,19 +34,32 @@
       return bars_ordered;
     };
     display_permutation_histogram = function(bars_ordered) {
+      var max_lrs;
+      max_lrs = bars_ordered[bars_ordered.length - 1][0];
+      console.log("max_key is:", max_lrs);
       return $.jqplot('permutation_histogram', [bars_ordered], {
+        title: 'Permutation Histogram',
         seriesDefaults: {
-          renderer: $.jqplot.BarRenderer
+          renderer: $.jqplot.BarRenderer,
+          rendererOptions: {
+            barWidth: 15
+          },
+          pointLabels: {
+            show: true
+          }
+        },
+        axesDefaults: {
+          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
         },
         axes: {
           xaxis: {
             min: 0,
             label: "LRS",
-            pad: 0
+            pad: 1.1
           },
           yaxis: {
-            label: "Count",
-            pad: 0
+            min: 0,
+            label: "Frequency"
           }
         }
       });
diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index 2a60d184..590f5789 100644
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -137,7 +137,7 @@
       </div>
     </footer>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
     <script src="/static/packages/bootstrap/js/bootstrap.min.js"></script>
     <script>
             //http://stackoverflow.com/questions/11521763/bootstrap-scrollspy-not-working
diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index 6464bc77..479464ab 100644
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -14,7 +14,7 @@
         </div>
     </header>
     
-    <div id="permutation_histogram" style="height:300px;width:600px; "></div>
+    <div id="permutation_histogram" style="height:400px;width:900px; "></div>
 
 
     <!-- End of body -->
@@ -29,7 +29,10 @@
     <!--[if lt IE 9]>
         <script language="javascript" type="text/javascript" src="/static/packages/jqplot/excanvas.js"></script>
     <![endif]-->
-    <script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.barRenderer.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/packages/jqplot/jquery.jqplot.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.pointLabels.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.barRenderer.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/javascript/marker_regression.js"></script>
 {% endblock %}
\ No newline at end of file