diff --git a/templates/staff_problem_histogram.js b/templates/staff_problem_histogram.js
index 8f7012cbc8..77ba59d490 100644
--- a/templates/staff_problem_histogram.js
+++ b/templates/staff_problem_histogram.js
@@ -3,30 +3,30 @@
   import math
 %>
 
-<%
-data = []
-xticks = []
-yticks = []
-maxx = 1
-maxy = 1.5
-#Here we change the y-axis (count) to be logorithmic. We also define better ticks
-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  )
-%>
 
+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: ${ json.dumps(data) },
+    data: data,
     bars: { show: true,
             align: 'center',
             lineWidth: 0, 
@@ -34,6 +34,7 @@ $.plot($("#histogram_${module_id}"), [{
     color: "#b72121",
   }],
   {
-    xaxis: {min: -1, max: ${maxx}, ticks: ${ json.dumps(xticks) }, tickLength: 0},
-    yaxis: {min: 0.0, max: ${maxy}, ticks: ${ json.dumps(yticks) }, labelWidth: 50},
-  });
+    xaxis: {min: -1, max: maxx, ticks: xticks, tickLength: 0},
+    yaxis: {min: 0.0, max: maxy, ticks: yticks, labelWidth: 50},
+  }
+);