From 0ba5637e06442e113c8626c77367d7e03daf11ad Mon Sep 17 00:00:00 2001 From: Mokaddem Date: Wed, 10 Aug 2016 11:16:56 +0200 Subject: [PATCH] Added bar chart hover binder in trending charts --- var/www/static/js/moduleTrending.js | 3 -- var/www/static/js/trendingchart.js | 40 ++++++++++++++++++- var/www/templates/Trending.html | 3 ++ .../trending_graphs/Domainstrending.html | 12 ++++-- .../trending_graphs/Protocolstrending.html | 12 ++++-- .../trending_graphs/Tldstrending.html | 14 +++++-- 6 files changed, 71 insertions(+), 13 deletions(-) diff --git a/var/www/static/js/moduleTrending.js b/var/www/static/js/moduleTrending.js index 1a10e616..a872ebaf 100644 --- a/var/www/static/js/moduleTrending.js +++ b/var/www/static/js/moduleTrending.js @@ -315,6 +315,3 @@ function binder(module_name){ } }); } -function plot_finished(module_name){ - - } diff --git a/var/www/static/js/trendingchart.js b/var/www/static/js/trendingchart.js index 793a9779..4c31fe26 100644 --- a/var/www/static/js/trendingchart.js +++ b/var/www/static/js/trendingchart.js @@ -74,7 +74,7 @@ function plot_top_graph(trendingName, init){ // flot bar char - function update_bar_chart(chartID, involved_item, serie_color, num_day, timeformat){ + function update_bar_chart(chartID, involved_item, serie_color, num_day, timeformat, can_bind){ var barOptions = { series: { bars: { show: true, barWidth: 82800000 } @@ -171,3 +171,41 @@ function plot_top_graph(trendingName, init){ }// end else }; }; + + +// Bar chart hover binder for the 2 graphs +function binder(module_name){ + $("#flot-bar-chart1-"+module_name).bind("plothover.customHandler", function (event, pos, item) { + if (item) { // a correct item is hovered + var x = item.datapoint[0] + var y = item.datapoint[1] + var date = new Date(parseInt(x)); + var formated_date = date.getMonth()+'/'+date.getDate(); + var color = item.series.color; + var color_opac = "rgba" + color.slice(3, color.length-1)+",0.15)"; + + // display the hovered value in the chart div + $("#tooltip_graph1-"+module_name).html(item.series.label + " of " + formated_date + " = " + y+"") + .css({padding: "2px", width: 'auto', 'background': color_opac , 'border': "3px solid "+color}) + .fadeIn(200); + + } + }); + + $("#flot-bar-chart2-"+module_name).bind("plothover.customHandler", function (event, pos, item) { + if (item) { // a correct item is hovered + var x = item.datapoint[0] + var y = item.datapoint[1] + var date = new Date(parseInt(x)); + var formated_date = date.getMonth()+'/'+date.getDate(); + var color = item.series.color; + var color_opac = "rgba" + color.slice(3, color.length-1)+",0.15)"; + + // display the hovered value in the chart div + $("#tooltip_graph2-"+module_name).html(item.series.label + " of " + formated_date + " = " + y+"") + .css({padding: "2px", width: 'auto', 'background': color_opac , 'border': "3px solid "+color}) + .fadeIn(200); + + } + }); +} diff --git a/var/www/templates/Trending.html b/var/www/templates/Trending.html index f8dd8fc0..92c31e49 100644 --- a/var/www/templates/Trending.html +++ b/var/www/templates/Trending.html @@ -110,6 +110,7 @@ $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; function refresh_top_chart(attr_name, immediate){ if (immediate){ plot_top_graph(attr_name, true); + binder(active_tab_name); } setTimeout(function() { $("[flash-"+attr_name+"]").css('color', '#fece00'); @@ -149,6 +150,8 @@ $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};