From d99b4db0ac807f977d01a03c4d24f2bb3aaa895f Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Wed, 14 Mar 2012 23:12:39 +0000
Subject: [PATCH] [#58,flot][s]: tooltips for flot graphs (fixes #58).

---
 src/view-flot-graph.js | 44 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/src/view-flot-graph.js b/src/view-flot-graph.js
index 9555ab70..5429eed4 100644
--- a/src/view-flot-graph.js
+++ b/src/view-flot-graph.js
@@ -151,6 +151,9 @@ my.FlotGraph = Backbone.View.extend({
     var series = this.createSeries();
     var options = this.graphOptions[this.chartConfig.graphType];
     this.plot = $.plot(this.$graph, series, options);
+    if (this.chartConfig.graphType in { 'points': '', 'lines-and-points': '' }) {
+      this.setupTooltips();
+    }
     // create this.plot and cache it
 //    if (!this.plot) {
 //      this.plot = $.plot(this.$graph, series, options);
@@ -199,6 +202,47 @@ my.FlotGraph = Backbone.View.extend({
     }
   },
 
+  setupTooltips: function() {
+    var self = this;
+    function showTooltip(x, y, contents) {
+      $('<div id="flot-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;
+    this.$graph.bind("plothover", function (event, pos, item) {
+      if (item) {
+        if (previousPoint != item.dataIndex) {
+          previousPoint = item.dataIndex;
+          
+          $("#flot-tooltip").remove();
+          var x = item.datapoint[0].toFixed(2),
+              y = item.datapoint[1].toFixed(2);
+          
+          var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
+            group: self.chartConfig.group,
+            x: x,
+            series: item.series.label,
+            y: y
+          });
+          showTooltip(item.pageX, item.pageY, content);
+        }
+      }
+      else {
+        $("#flot-tooltip").remove();
+        previousPoint = null;            
+      }
+    });
+  },
+
   createSeries: function () {
     var self = this;
     var series = [];