From e59b7c4e47ec0ad932b87e57770bc94f50175bcb Mon Sep 17 00:00:00 2001
From: Mokaddem <mokaddem.sami@gmail.com>
Date: Tue, 23 Aug 2016 12:03:23 +0200
Subject: [PATCH] Added tooltip in graph for terms-plot-tool

---
 var/www/templates/terms_plot_tool.html | 18 ++++++++++++++++++
 var/www/templates/terms_plot_top.html  |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/var/www/templates/terms_plot_tool.html b/var/www/templates/terms_plot_tool.html
index def0e9d2..6108eb91 100644
--- a/var/www/templates/terms_plot_tool.html
+++ b/var/www/templates/terms_plot_tool.html
@@ -119,6 +119,9 @@
 </div>
 
 
+<div style="position: absolute; border: 1px solid rgb(255, 221, 221); padding: 2px; background-color: #333; color:white; opacity: 0.8; top: 423px; left: 616px; display: none;" id="tooltip"></div>
+
+
 <!-- import graph function -->
 <script>
     $(document).ready(function(){
@@ -204,6 +207,21 @@ function plotData() {
         to_plot.push({ data: curr_data, label: term}); 
         graph_data.push({ data: curr_data, label: term});
         plot = $.plot($("#graph"), to_plot, graph_options);
+
+        $("#graph").bind("plothover", function (event, pos, item) {
+            if (item) {
+                var date = new Date(item.datapoint[0]);
+                var x = parseInt(date.getUTCMonth())+1 + "/" + date.getUTCDate();
+                var y = item.datapoint[1];
+    
+                $("#tooltip").html(item.series.label + " for "+x + " = " + y)
+                    .css({top: item.pageY-15, left: item.pageX+5})
+                    .fadeIn(200);
+            } else {
+                $("#tooltip").hide();
+            }
+        });
+
         $("#TermInput").val("");
     })
 }
diff --git a/var/www/templates/terms_plot_top.html b/var/www/templates/terms_plot_top.html
index c7941b48..42198391 100644
--- a/var/www/templates/terms_plot_top.html
+++ b/var/www/templates/terms_plot_top.html
@@ -294,7 +294,7 @@ var graph_options = {
                             borderWidth: 0
                         },
                         legend: { show: true,
-                                  noColumns: 0,
+                                  noColumns: 1,
                                   position: "nw"
                         },
                         xaxis: {