Added histogram graph for courseware administrators.

djangoapps/courseware/module_render.py

@@ -144,12 +144,17 @@ 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:
         content=content+render_to_string("staff_problem_info.html", {'xml':etree.tostring(xml_module), 
-                                                                     'histogram':grade_histogram(module_id)})
+                                                                     'module_id' : module_id})
+        init_js = init_js+render_to_string("staff_problem_histogram.js", {'histogram' : grade_histogram(module_id),
+                                                                          '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

@@ -1,7 +1,12 @@
 <%inherit file="main.html" />
 <%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

@@ -0,0 +1,38 @@
+<%!
+  import json
+  import math
+%>
+
+<%
+data = []
+xticks = []
+yticks = []
+maxx = 1
+maxy = 1.5
+for score, count in histogram:
+    score = score or 0 #Sometimes score is None. This fixes that
+        
+    log_count = math.log(count + 1)
+    
+    data.append( [score, log_count] )
+    
+    yticks.append( [log_count, str(count)] )
+    xticks.append( [score, str(int(score))] )
+    
+    maxx = max( score + 1, maxx )
+    maxy = max( log_count*1.1, maxy  )
+%>
+
+
+$.plot($("#histogram_${module_id}"), [{
+    data: ${ json.dumps(data) },
+    bars: { show: true,
+            align: 'center',
+            lineWidth: 0, 
+            fill: 1.0 },
+    color: "#600101",
+  }],
+  {
+    xaxis: {min: -1, max: ${maxx}, ticks: ${ json.dumps(xticks) }},
+    yaxis: {min: 0.0, max: ${maxy}, ticks: ${ json.dumps(yticks) }, labelWidth: 50},
+  });

templates/staff_problem_info.html

@@ -1,6 +1,4 @@
 <div class="staff_info">
 ${xml | h}
 </div>
-<div>
-${ str(histogram) }
-</div>
+<div id="histogram_${module_id}" style="width:200px;height:150px"></div>