Got a basic, working graph of the scores

--HG--
branch : profiledev

profile.html

@@ -104,29 +104,84 @@ $(function() {
     
     <script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.min.js"></script>
     <script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.stack.js"></script>
+    <script language="javascript" type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.symbol.js"></script>
     <script>
     $(function () {
+      var ticks = [];
+      var tooltips = {};
+      var homeworkData = ${ json.dumps( [[i + 1, score['percentage']] for i,score in enumerate(homework_percentages)] ) };
+      tooltips["Homework"] = ${ json.dumps( ["Homework {} - {}".format(str(i + 1), score['summary']) for i,score in enumerate(homework_percentages)] ) };
+      ticks = ticks.concat( ${ json.dumps( [[i + 1, str(i + 1)] for i,score in enumerate(homework_percentages)] ) } );
       
-
-      var homeworkData = ${ json.dumps( [[i + 1, percentage] for i,percentage in enumerate(homework_percentages)] ) };
-      var labData = ${ json.dumps( [[i + 13, percentage] for i,percentage in enumerate(lab_percentages)] ) };
+      var labData = ${ json.dumps( [[i + 13, score['percentage'], score['summary']] for i,score in enumerate(lab_percentages)] ) };
+      ticks = ticks.concat( ${ json.dumps( [[i + 13, str(i + 1)] for i,score in enumerate(lab_percentages)] ) } );
+      
+      var droppedScores = ${ json.dumps( [[1 + index, 0.05] for index in homework_dropped_indices] +  [[13 + index, 0.05] for index in homework_dropped_indices]) };
+      //var midtermData = ${ json.dumps( [ [i + 25, ] ] ) };
       
       var data = [
-        //{label: 'Homework Total', data: [ [0.5,0.8] ], bars: {barWidth: 12, align: 'left'} },
+        {label: 'Homework Total', data: [ [0.5, ${homework_total} ] ], bars: {barWidth: 12, align: 'left'} },
         {label: 'Homework', data: homeworkData, color: 0},
-        //{label: 'Lab Total', data: [ [12.5,0.9] ], bars: {barWidth: 12, align: 'left'}},
+        {label: 'Lab Total', data: [ [12.5, ${lab_total} ]], bars: {barWidth: 12, align: 'left'}},
         {label: 'Labs', data: labData, color: 1},
         {label: 'Midterm', data: [[25,0.87]], color: 2},
         {label: 'Final', data: [[26,0.65]], color: 3},
+        {label: 'Dropped Scores', data: droppedScores, points: {symbol: "cross", show: true, radius: 3}, bars: {show: false} },
       ];
       var options = {
         series: {lines: {show: false, steps: false },
-        bars: {show: true, barWidth: 0.6, align: 'center',},},
-        xaxis: {ticks: [[1,'1'], [2,'2'], [3,'3'], [4,'4'], [5,'5']]},
+        bars: {show: true, barWidth: 0.6, align: 'center', lineWidth: 1},},
+        xaxis: {ticks: ticks, tickLength: 0},
+        yaxis: {ticks: [[1, "100%"], [0.87, "A 87%"], [0.7, "B 70%"], [0.6, "C 60%"], [0, "0%"]], min: 0.0, max: 1.0, labelWidth: 50},
+        grid: { hoverable: true, clickable: true, borderWidth: 1,
+        markings: [ {yaxis: {from: 0.87, to: 1 }, color: "#EBFFD5"}, {yaxis: {from: 0.7, to: 0.87 }, color: "#FFF2E3"}, {yaxis: {from: 0.6, to: 0.7 }, color: "#E6FFFF"}, ] },
+        legend: {show: false},
       };
 
       $.plot($("#homework-detail-graph"), data, options);
       
+      
+      function showTooltip(x, y, contents) {
+        $('<div id="tooltip">' + contents + '</div>').css( {
+          position: 'absolute',
+          display: 'none',
+          top: y + 5,
+          left: x + 5,
+          border: '1px solid #fdd',
+          padding: '2px',
+          'background-color': '#fee',
+          opacity: 0.80
+        }).appendTo("body").fadeIn(200);
+      }
+      
+      var previousPoint = null;
+      $("#homework-detail-graph").bind("plothover", function (event, pos, item) {
+        $("#x").text(pos.x.toFixed(2));
+        $("#y").text(pos.y.toFixed(2));
+        if (item) {
+          if (previousPoint != item.dataIndex) {
+            previousPoint = item.dataIndex;
+            
+            
+            $("#tooltip").remove();
+            if (item.series.label in tooltips) {
+
+              var series_tooltips = tooltips[item.series.label];
+              if (item.dataIndex < series_tooltips.length) {
+                var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
+                
+                showTooltip(item.pageX, item.pageY, series_tooltips[item.dataIndex]);
+              }
+            }
+
+          }
+        } else {
+          $("#tooltip").remove();
+          previousPoint = null;            
+        }
+      });
+      
+      
     });
     </script>