diff --git a/djangoapps/courseware/module_render.py b/djangoapps/courseware/module_render.py
index 2463e31d9b..510d26033c 100644
--- a/djangoapps/courseware/module_render.py
+++ b/djangoapps/courseware/module_render.py
@@ -1,3 +1,4 @@
+import json
 import logging
 
 from lxml import etree
@@ -137,6 +138,7 @@ def render_x_module(user, request, xml_module, module_object_preload):
         render_histogram = len(histogram) > 0
         content=content+render_to_string("staff_problem_info.html", {'xml':etree.tostring(xml_module), 
                                                                      'module_id' : module_id,
+                                                                     'histogram': json.dumps(histogram),
                                                                      'render_histogram' : render_histogram})
 
     content = {'content':content,
diff --git a/static/coffee/spec/calculator_spec.js b/static/coffee/spec/calculator_spec.js
index 9ea57f3aef..66033964de 100644
--- a/static/coffee/spec/calculator_spec.js
+++ b/static/coffee/spec/calculator_spec.js
@@ -66,7 +66,7 @@
         return this.calculator.calculate();
       });
       it('send data to /calculate', function() {
-        return expect($.getJSON).toHaveBeenCalledWith('/calculate', {
+        return expect($.getWithPrefix).toHaveBeenCalledWith('/calculate', {
           equation: '1+2'
         }, jasmine.any(Function));
       });
diff --git a/static/coffee/spec/feedback_form_spec.js b/static/coffee/spec/feedback_form_spec.js
index 9824915d03..4a02b4d541 100644
--- a/static/coffee/spec/feedback_form_spec.js
+++ b/static/coffee/spec/feedback_form_spec.js
@@ -18,7 +18,7 @@
         $('#feedback_subject').val('Awesome!');
         $('#feedback_message').val('This site is really good.');
         $('#feedback_button').click();
-        return expect($.post).toHaveBeenCalledWith('/send_feedback', {
+        return expect($.postWithPrefix).toHaveBeenCalledWith('/send_feedback', {
           subject: 'Awesome!',
           message: 'This site is really good.',
           url: window.location.href
diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee
index b495e14bc2..697aff8af4 100644
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -22,3 +22,7 @@ class @Courseware
     $('.course-content .problems-wrapper').each ->
       id = $(this).attr('id').replace(/problem_/, '')
       new Problem id, $(this).data('url')
+    $('.course-content .histogram').each ->
+      id = $(this).attr('id').replace(/histogram_/, '')
+      new Histogram id, $(this).data('histogram')
+
diff --git a/static/sass/courseware/_courseware.scss b/static/sass/courseware/_courseware.scss
index bd707e1b80..44d54492ea 100644
--- a/static/sass/courseware/_courseware.scss
+++ b/static/sass/courseware/_courseware.scss
@@ -202,6 +202,10 @@ div.course-wrapper {
           padding-bottom: 0;
         }
 
+        .histogram {
+          width: 200px;
+          height: 150px;
+        }
 
         ul {
           list-style: disc outside none;
diff --git a/templates/coffee/spec/navigation_spec.js b/templates/coffee/spec/navigation_spec.js
index 3ba6508eec..cb51aacbf8 100644
--- a/templates/coffee/spec/navigation_spec.js
+++ b/templates/coffee/spec/navigation_spec.js
@@ -1,4 +1,3 @@
-// Generated by CoffeeScript 1.3.2-pre
 (function() {
 
   describe('Navigation', function() {
diff --git a/templates/coffee/src/histogram.coffee b/templates/coffee/src/histogram.coffee
new file mode 100644
index 0000000000..0ef2d64764
--- /dev/null
+++ b/templates/coffee/src/histogram.coffee
@@ -0,0 +1,35 @@
+class @Histogram
+  constructor: (@id, @rawData) ->
+    @xTicks = []
+    @yTicks = []
+    @data = []
+    @calculate()
+    @render()
+
+  calculate: ->
+    for [score, count] in @rawData
+      log_count = Math.log(count + 1)
+      @data.push [score, log_count]
+      @xTicks.push [score, score.toString()]
+      @yTicks.push [log_count, count.toString()]
+
+  render: ->
+    $.plot $("#histogram_#{@id}"), [
+      data: @data
+      bars:
+        show: true
+        align: 'center'
+        lineWidth: 0
+        fill: 1.0
+      color: "#b72121"
+    ],
+      xaxis:
+        min: -1
+        max: Math.max $.map(@xTicks, (data) -> data[0] + 1)
+        ticks: @xTicks
+        tickLength: 0
+      yaxis:
+        min: 0.0
+        max: Math.max $.map(@yTicks, (data) -> data[0] * 1.1)
+        ticks: @yTicks
+        labelWidth: 50
diff --git a/templates/staff_problem_histogram.js b/templates/staff_problem_histogram.js
deleted file mode 100644
index 77ba59d490..0000000000
--- a/templates/staff_problem_histogram.js
+++ /dev/null
@@ -1,40 +0,0 @@
-<%!
-  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},
-  }
-);
diff --git a/templates/staff_problem_info.html b/templates/staff_problem_info.html
index 20370a9c81..24450c797a 100644
--- a/templates/staff_problem_info.html
+++ b/templates/staff_problem_info.html
@@ -2,5 +2,5 @@
 ${xml | h}
 </div>
 %if render_histogram:
-  <div id="histogram_${module_id}" style="width:200px;height:150px"></div>
+<div id="histogram_${module_id}" class="histogram" data-histogram="${histogram}"></div>
 %endif