diff --git a/static/js/trendings.js b/static/js/trendings.js
index e4a3213..1f28ada 100644
--- a/static/js/trendings.js
+++ b/static/js/trendings.js
@@ -30,7 +30,10 @@ var lineChartOption = {
mode: "time",
minTickSize: [1, "day"],
},
- legend: { show: false }
+ legend: { show: false },
+ grid: {
+ hoverable: true
+ }
};
var pieChartOption = {
series: {
@@ -47,6 +50,9 @@ var pieChartOption = {
legend: {
show: true,
labelFormatter: legendFormatter
+ },
+ grid: {
+ hoverable: true
}
};
@@ -86,7 +92,7 @@ function legendFormatter(label, series) {
+ '';
} catch(err) {
return '
' + label
+ + '
' + label
+ '';
}
}
@@ -124,6 +130,15 @@ function updatePie(pie, data) {
} else {
pieWidget = $.plot(pieID, toPlot, pieChartOption);
pie.push(pieWidget);
+ $(pieID).bind("plothover", function (event, pos, item) {
+ if (item) {
+ $("#tooltip").html(legendFormatter(item.series.label))
+ .css({top: pos.pageY+5, left: pos.pageX+5})
+ .fadeIn(200);
+ } else {
+ $("#tooltip").hide();
+ }
+ });
}
}
@@ -171,6 +186,15 @@ function updateLine(line, data) {
} else {
lineWidget = $.plot(lineID, toPlot, lineChartOption);
line.push(lineWidget);
+ $(lineID).bind("plothover", function (event, pos, item) {
+ if (item) {
+ $("#tooltip").html(legendFormatter(item.series.label))
+ .css({top: item.pageY+5, left: item.pageX+5})
+ .fadeIn(200);
+ } else {
+ $("#tooltip").hide();
+ }
+ });
}
}
@@ -204,4 +228,9 @@ $(document).ready(function () {
updatePieLine(categPie, categLine, url_getTrendingCateg)
updatePieLine(tagPie, tagLine, url_getTrendingTag)
+
+ $("
").css({
+ position: "absolute",
+ display: "none",
+ }).appendTo("body");
});