Show value tooltip when hovering over chart.

1 files changed, 65 insertions, 12 deletions

diff --git a/lib/postrunner/ChartView.rb b/lib/postrunner/ChartView.rb
index 5a68f0b..c0aac30 100644
--- a/lib/postrunner/ChartView.rb
+++ b/lib/postrunner/ChartView.rb
@@ -91,22 +91,23 @@ EOT
     def java_script
       s = "$(function() {\n"
 
-      s << line_graph('pace', 'min/km', '#0A7BEE' )
-      s << line_graph('altitude', 'm', '#5AAA44')
-      s << line_graph('heart_rate', 'bpm', '#900000')
-      s << point_graph('run_cadence', 'spm',
+      s << tooltip_div
+      s << line_graph('pace', 'Pace', 'min/km', '#0A7BEE' )
+      s << line_graph('altitude', 'Elevation', 'm', '#5AAA44')
+      s << line_graph('heart_rate', 'Heart Rate', 'bpm', '#900000')
+      s << point_graph('run_cadence', 'Run Cadence', 'spm',
                        [ [ '#EE3F2D', 151 ],
                          [ '#F79666', 163 ],
                          [ '#A0D488', 174 ],
                          [ '#96D7DE', 185 ],
                          [ '#A88BBB', nil ] ])
-      s << point_graph('vertical_oscillation', 'cm',
+      s << point_graph('vertical_oscillation', 'Vertical Oscillation', 'cm',
                        [ [ '#A88BBB', 67 ],
                          [ '#96D7DE', 84 ],
                          [ '#A0D488', 101 ],
                          [ '#F79666', 118 ],
                          [ '#EE3F2D', nil ] ])
-      s << point_graph('stance_time', 'ms',
+      s << point_graph('stance_time', 'Ground Contact Time', 'ms',
                        [ [ '#A88BBB', 208 ],
                          [ '#96D7DE', 241 ],
                          [ '#A0D488', 273 ],
@@ -118,7 +119,35 @@ EOT
       s
     end
 
-    def line_graph(field, unit, color = nil)
+    def tooltip_div
+      <<"EOT"
+        function timeToHMS(usecs) {
+           var secs = parseInt(usecs / 1000.0);
+           var s = secs % 60;
+           var mins = parseInt(secs / 60);
+           var m = mins % 60;
+           var h = parseInt(mins / 60);
+           s = (s < 10) ? "0" + s : s;
+           if (h == 0) {
+             return ("" + m + ":" + s);
+           } else {
+             m = (m < 10) ? "0" + m : m;
+             return ("" + h + ":" + m + ":" + s);
+           }
+        };
+        $("<div id='tooltip'></div>").css({
+                position: "absolute",
+                display: "none",
+                border: "1px solid #888",
+                padding: "2px",
+                "background-color": "#EEE",
+                opacity: 0.90,
+                "font-size": "8pt"
+        }).appendTo("body");
+EOT
+    end
+
+    def line_graph(field, y_label, unit, color = nil)
       s = "var #{field}_data = [\n"
 
       data_set = []
@@ -144,15 +173,17 @@ EOT
         "[ #{set[0]}, #{set[1] ? set[1] : 'null'} ]"
       end.join(', ')
 
+      chart_id = "#{field}_chart"
       s << <<"EOT"
 	  	];
 
-	  	$.plot("##{field}_chart",
+	  	$.plot(\"##{chart_id}\",
              [ { data: #{field}_data,
                  #{color ? "color: \"#{color}\"," : ''}
                  lines: { show: true#{field == 'pace' ? '' :
                                       ', fill: true'} } } ],
-             { xaxis: { mode: "time" }
+             { xaxis: { mode: "time" },
+               grid: { hoverable: true }
 EOT
       if field == 'pace'
         s << ", yaxis: { mode: \"time\",\n" +
@@ -160,9 +191,10 @@ EOT
              "           inverseTransform: function (v) { return -v; } }"
       end
       s << "});\n"
+      s << hover_function(chart_id, y_label, unit) + "\n"
     end
 
-    def point_graph(field, unit, colors)
+    def point_graph(field, y_label, unit, colors)
       # We need to split the field values into separate data sets for each
       # color. The max value for each color determines which set a data point
       # ends up in.
@@ -207,14 +239,17 @@ EOT
         s << " ];\n"
       end
 
-      s << "$.plot(\"##{field}_chart\", [\n"
+      chart_id = "#{field}_chart"
+      s << "$.plot(\"##{chart_id}\", [\n"
       s << data_sets.map do |index, ds|
              "{ data: #{field}_data_#{index},\n" +
              "  color: \"#{colors[index][0]}\",\n" +
              "  points: { show: true, fillColor: \"#{colors[index][0]}\", " +
              "            fill: true, radius: 2 } }"
            end.join(', ')
-      s << "], { xaxis: { mode: \"time\" } });\n"
+      s << "], { xaxis: { mode: \"time\" },
+                 grid: { hoverable: true } });\n"
+      s << hover_function(chart_id, y_label, unit)
 
       s
     end
@@ -228,6 +263,24 @@ EOT
       }
     end
 
+    def hover_function(chart_id, y_label, y_unit)
+      <<"EOT"
+        $("##{chart_id}").bind("plothover", function (event, pos, item) {
+         if (item) {
+           var x = timeToHMS(item.datapoint[0]);
+           var y = #{y_label == 'Pace' ? 'timeToHMS(item.datapoint[1] / 60)' :
+                                         'item.datapoint[1].toFixed(0)'};
+           $("#tooltip").html("<b>#{y_label}:</b> " + y + " #{y_unit}<br/>" +
+                              "<b>Time:</b> " + x + " h:m:s")
+             .css({top: item.pageY-20, left: item.pageX+15})
+             .fadeIn(200);
+         } else {
+           $("#tooltip").hide();
+         }
+       });
+EOT
+    end
+
   end
 
 end