AIL/ail-framework
7
0
Fork 0
mirror of https://github.com/ail-project/ail-framework.git synced 2024-11-10 08:38:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added bar chart hover binder in trending charts

Browse source
This commit is contained in:
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 // 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 = { var barOptions = {
series: { series: {
bars: { show: true, barWidth: 82800000 } bars: { show: true, barWidth: 82800000 }
@ -171,3 +171,41 @@ function plot_top_graph(trendingName, init){
}// end else }// 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){ function refresh_top_chart(attr_name, immediate){
if (immediate){ if (immediate){
plot_top_graph(attr_name, true); plot_top_graph(attr_name, true);
binder(active_tab_name);
} }
setTimeout(function() { setTimeout(function() {
$("[flash-"+attr_name+"]").css('color', '#fece00'); $("[flash-"+attr_name+"]").css('color', '#fece00');
@ -149,6 +150,8 @@ $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
<script> <script>
$(document).ready(function(){ $(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 the graph when the page has just loaded
create_and_plot("TldTrending", '../static//csv/tldstrendingdata.csv') create_and_plot("TldTrending", '../static//csv/tldstrendingdata.csv')
//Top progression chart //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 <i id="flash-domain" class="glyphicon glyphicon-flash " flash-domain=""></i> Top Progression for the last 5 days
</div> </div>
<div class="panel-body"> <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-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> </div>
<!-- /.row --> <!-- /.row -->
</div> </div>
@ -23,8 +26,11 @@
<i id="flash-domain" class="glyphicon glyphicon-flash " flash-domain=""></i> Top Progression for the last 15 days <i id="flash-domain" class="glyphicon glyphicon-flash " flash-domain=""></i> Top Progression for the last 15 days
</div> </div>
<div class="panel-body"> <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="">
<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> </div>
<!-- /.row --> <!-- /.row -->
</div> </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 <i id="flash-scheme" class="glyphicon glyphicon-flash " flash-scheme=""></i> Top Progression for the last 5 days
</div> </div>
<div class="panel-body"> <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-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> </div>
<!-- /.row --> <!-- /.row -->
</div> </div>
@ -23,8 +26,11 @@
<i id="flash-scheme" class="glyphicon glyphicon-flash " flash-scheme=""></i> Top Progression for the last 15 days <i id="flash-scheme" class="glyphicon glyphicon-flash " flash-scheme=""></i> Top Progression for the last 15 days
</div> </div>
<div class="panel-body"> <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="">
<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> </div>
<!-- /.row --> <!-- /.row -->
</div> </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 <i id="flash-tld" class="glyphicon glyphicon-flash " flash-tld=""></i> Top Progression for the last 5 days
</div> </div>
<div class="panel-body"> <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-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> </div>
<!-- /.row --> <!-- /.row -->
</div> </div>
@ -23,8 +28,11 @@
<i class="glyphicon glyphicon-flash " flash-tld=""></i> Top Progression for the last 15 days <i class="glyphicon glyphicon-flash " flash-tld=""></i> Top Progression for the last 15 days
</div> </div>
<div id="flash-tld" class="panel-body"> <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="">
<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> </div>
<!-- /.row --> <!-- /.row -->
</div> </div>