Merge pull request #19 from MITx/pmitros/histogram

Draws histogram for scores

djangoapps/courseware/module_render.py

@@ -103,8 +103,9 @@ def grade_histogram(module_id):
     cursor.execute("select courseware_studentmodule.grade,COUNT(courseware_studentmodule.student_id) from courseware_studentmodule where courseware_studentmodule.module_id=%s group by courseware_studentmodule.grade", [module_id])
 
     grades = list(cursor.fetchall())
-    print grades
     grades.sort(key=lambda x:x[0]) # Probably not necessary
+    if (len(grades) == 1 and grades[0][0] == None):
+        return []
     return grades
 
 def render_x_module(user, request, xml_module, module_object_preload):
@@ -144,12 +145,21 @@ def render_x_module(user, request, xml_module, module_object_preload):
         module_object_preload.append(smod)
     # Grab content
     content = instance.get_html()
+    init_js = instance.get_init_js()
+    destory_js = instance.get_destroy_js()
     if user.is_staff:
+        histogram = grade_histogram(module_id)
+        render_histogram = len(histogram) > 0
         content=content+render_to_string("staff_problem_info.html", {'xml':etree.tostring(xml_module), 
-                                                                     'histogram':grade_histogram(module_id)})
+                                                                     'module_id' : module_id,
+                                                                     'render_histogram' : render_histogram})
+        if render_histogram:
+            init_js = init_js+render_to_string("staff_problem_histogram.js", {'histogram' : histogram,
+                                                                              'module_id' : module_id})
+        
     content = {'content':content, 
-               "destroy_js":instance.get_destroy_js(),
-               'init_js':instance.get_init_js(), 
+               "destroy_js":destory_js,
+               'init_js':init_js, 
                'type':module_type}
 
     return content

templates/courseware.html

@@ -2,7 +2,12 @@
 <%block name="bodyclass">courseware</%block>
 <%block name="title"><title>Courseware – MITx 6.002x</title></%block>
 
+<%block name="headextra">
+<script type="text/javascript" src="/static/js/flot/jquery.flot.js"></script>
+</%block>
+
 <%block name="js_extra">
+##Is there a reason this isn't in header_extra? Is it important that the javascript is at the bottom of the generated document?
 <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
 <script type="text/javascript">
   $(function() {

templates/staff_problem_histogram.js

+<%!
+  import json
+  import math
+%>
+
+
+var rawData = ${json.dumps(histogram)};
+
+var maxx = 1;
+var maxy = 1.5;
+var xticks = Array();
+var yticks = Array();
+var data = Array();
+for (var i = 0; i < rawData.length; i++) {
+  var score = rawData[i][0];
+  var count = rawData[i][1];
+  var log_count = Math.log(count + 1);
+  
+  data.push( [score, log_count] );
+  
+  xticks.push( [score, score.toString()] );
+  yticks.push( [log_count, count.toString()] );
+  
+  maxx = Math.max( score + 1, maxx );
+  maxy = Math.max(log_count*1.1, maxy );
+}
+
+$.plot($("#histogram_${module_id}"), [{
+    data: data,
+    bars: { show: true,
+            align: 'center',
+            lineWidth: 0, 
+            fill: 1.0 },
+    color: "#b72121",
+  }],
+  {
+    xaxis: {min: -1, max: maxx, ticks: xticks, tickLength: 0},
+    yaxis: {min: 0.0, max: maxy, ticks: yticks, labelWidth: 50},
+  }
+);

templates/staff_problem_info.html

 <div class="staff_info">
 ${xml | h}
 </div>
-<div>
-${ str(histogram) }
-</div>
+%if render_histogram:
+  <div id="histogram_${module_id}" style="width:200px;height:150px"></div>
+%endif