CIRCL
/
AIL-framework
mirror of https://github.com/CIRCL/AIL-framework
2
1
Fork 0
Code Issues Releases Wiki Activity

Added bar chart hover binder in trending charts

pull/65/head
Mokaddem 2016-08-10 11:16:56 +02:00
parent 24318f6a86
commit 0ba5637e06
6 changed files with 71 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
var/www/static/js/moduleTrending.js
View File

@ -315,6 +315,3 @@ function binder(module_name){
}
});
}
function plot_finished(module_name){
}

40
var/www/static/js/trendingchart.js
View File

@ -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 + " = <b>" + y+"</b>")
.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 + " = <b>" + y+"</b>")
.css({padding: "2px", width: 'auto', 'background': color_opac , 'border': "3px solid "+color})
.fadeIn(200);
}
});
}

3
var/www/templates/Trending.html
View File

@ -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 }};
<script>
$(document).ready(function(){
$("[align]").css({padding: "2px", width: 'auto', 'background': "rgba(102, 102, 102, 0.15)" , 'border': "3px solid rgb(102, 102, 102)"})
// Create the graph when the page has just loaded
create_and_plot("TldTrending", '../static//csv/tldstrendingdata.csv')
//Top progression chart

12
var/www/templates/trending_graphs/Domainstrending.html
View File

@ -7,9 +7,12 @@
<i id="flash-domain" class="glyphicon glyphicon-flash " flash-domain=""></i> Top Progression for the last 5 days
</div>
<div class="panel-body">
<div class="">
<div class="col-lg-12">
<div class="flot-chart-content pull-right" id='tooltip_graph1-domain' align="right">No bar hovered</div>
</div>
<div class="row">
<div class="flot-chart-content col-lg-3" id="flot-pie-chart1-domain" style="height:250px; width:48%;"></div>
<div class="flot-chart-content col-lg-3" id="flot-bar-chart1-domain" style="height:250px; width:48%;"><div class="alert alert-info">Click on a part</div></div>
<div class="flot-chart-content col-lg-3" id="flot-bar-chart1-domain" style="height:250px; width:48%; margin: 5px;"><div class="alert alert-info">Click on a part</div></div>
</div>
<!-- /.row -->
</div>
@ -23,8 +26,11 @@
<i id="flash-domain" class="glyphicon glyphicon-flash " flash-domain=""></i> Top Progression for the last 15 days
</div>
<div class="panel-body">
<div class="col-lg-12">
<div class="flot-chart-content pull-right" id='tooltip_graph2-domain' align="right">No bar hovered</div>
</div>
<div class="">
<div class="flot-chart-content col-lg-3" id="flot-bar-chart2-domain" style="height:250px; width:100%;"><div class="alert alert-info">Click on a part</div></div>
<div class="flot-chart-content col-lg-3" id="flot-bar-chart2-domain" style="height:250px; width:100%; margin:5px;"><div class="alert alert-info">Click on a part</div></div>
</div>
<!-- /.row -->
</div>

12
var/www/templates/trending_graphs/Protocolstrending.html
View File

@ -7,9 +7,12 @@
<i id="flash-scheme" class="glyphicon glyphicon-flash " flash-scheme=""></i> Top Progression for the last 5 days
</div>
<div class="panel-body">
<div class="">
<div class="col-lg-12">
<div class="flot-chart-content pull-right" id='tooltip_graph1-scheme' align="right">No bar hovered</div>
</div>
<div class="row">
<div class="flot-chart-content col-lg-3" id="flot-pie-chart1-scheme" style="height:250px; width:48%;"></div>
<div class="flot-chart-content col-lg-3" id="flot-bar-chart1-scheme" style="height:250px; width:48%;"><div class="alert alert-info">Click on a part</div></div>
<div class="flot-chart-content col-lg-3" id="flot-bar-chart1-scheme" style="height:250px; width:48%; margin:5px;"><div class="alert alert-info">Click on a part</div></div>
</div>
<!-- /.row -->
</div>
@ -23,8 +26,11 @@
<i id="flash-scheme" class="glyphicon glyphicon-flash " flash-scheme=""></i> Top Progression for the last 15 days
</div>
<div class="panel-body">
<div class="col-lg-12">
<div class="flot-chart-content pull-right" id='tooltip_graph2-scheme' align="right">No bar hovered</div>
</div>
<div class="">
<div class="flot-chart-content col-lg-3" id="flot-bar-chart2-scheme" style="height:250px; width:100%;"><div class="alert alert-info">Click on a part</div></div>
<div class="flot-chart-content col-lg-3" id="flot-bar-chart2-scheme" style="height:250px; width:100%; margin:5px;"><div class="alert alert-info">Click on a part</div></div>
</div>
<!-- /.row -->
</div>

14
var/www/templates/trending_graphs/Tldstrending.html
View File

@ -7,9 +7,14 @@
<i id="flash-tld" class="glyphicon glyphicon-flash " flash-tld=""></i> Top Progression for the last 5 days
</div>
<div class="panel-body">
<div class="">
<div class="col-lg-12">
<div class="flot-chart-content pull-right" id='tooltip_graph1-tld' align="right">No bar hovered</div>
</div>
<div class="row">
<div class="flot-chart-content col-lg-3" id="flot-pie-chart1-tld" style="height:250px; width:48%;"></div>
<div class="flot-chart-content col-lg-3" id="flot-bar-chart1-tld" style="height:250px; width:48%;"><div class="alert alert-info">Click on a part</div></div>
<div class="flot-chart-content col-lg-3" id="flot-bar-chart1-tld" style="height:250px; width:48%; margin-top: 5px;"><div class="alert alert-info">Click on a part</div></div>
</div>
<div class="">
</div>
<!-- /.row -->
</div>
@ -23,8 +28,11 @@
<i class="glyphicon glyphicon-flash " flash-tld=""></i> Top Progression for the last 15 days
</div>
<div id="flash-tld" class="panel-body">
<div class="col-lg-12">
<div class="flot-chart-content pull-right" id='tooltip_graph2-tld' align="right">No bar hovered</div>
</div>
<div class="">
<div class="flot-chart-content col-lg-3" id="flot-bar-chart2-tld" style="height:250px; width:100%;"><div class="alert alert-info">Click on a part</div></div>
<div class="flot-chart-content col-lg-3" id="flot-bar-chart2-tld" style="height:250px; width:100%; margin-top: 5px;"><div class="alert alert-info">Click on a part</div></div>
</div>
<!-- /.row -->
</div>