mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-10 00:28:22 +00:00
Graphs now displayed the highest value. Plotting and filtering is done in its own script.
This commit is contained in:
parent
880359265c
commit
f6c7917149
2 changed files with 75 additions and 29 deletions
|
@ -1,7 +1,14 @@
|
|||
function Graph(id_pannel, path){
|
||||
function Graph(id_pannel, path, header_size){
|
||||
this.path = path;
|
||||
this.id_pannel = id_pannel;
|
||||
|
||||
// Hide every header during initialisation
|
||||
var false_tab = [];
|
||||
for(i=0; i<header_size; i++){
|
||||
false_tab[i] = false;
|
||||
}
|
||||
this.false_tab = false_tab;
|
||||
|
||||
g2 = new Dygraph(
|
||||
document.getElementById(this.id_pannel),
|
||||
// path to CSV file
|
||||
|
@ -15,6 +22,7 @@ function Graph(id_pannel, path){
|
|||
//drawPoints: true,
|
||||
//fillGraph: true,
|
||||
logscale: true,
|
||||
|
||||
animatedZooms: true,
|
||||
labelsKMB: true,
|
||||
highlightCircleSize: 3,
|
||||
|
@ -69,8 +77,11 @@ function Graph(id_pannel, path){
|
|||
// calculate start of highlight for next Saturday
|
||||
w += 7*24*3600*1000;
|
||||
}
|
||||
}
|
||||
},
|
||||
visibility: false_tab
|
||||
});
|
||||
this.graph = g2;
|
||||
this.setVisibility = setVis;
|
||||
|
||||
onclick = function(ev) {
|
||||
if (g2.isSeriesLocked()) {
|
||||
|
@ -97,4 +108,27 @@ function Graph(id_pannel, path){
|
|||
valueRange:null
|
||||
});
|
||||
}
|
||||
|
||||
// display the top headers
|
||||
function setVis(max_display){
|
||||
headings = this.graph.getLabels();
|
||||
headings.splice(0,1);
|
||||
var sorted_list = new Array();
|
||||
today = new Date().getDate();
|
||||
for( i=0; i<headings.length; i++){
|
||||
the_heading = headings[i];
|
||||
//console.log('heading='+the_heading+' tab['+(today-1)+']['+(parseInt(i)+1)+']='+g.getValue(today-1, parseInt(i)+1));
|
||||
sorted_list.push({dom: the_heading, val: this.graph.getValue(today-1, parseInt(i)+1), index: parseInt(i)});
|
||||
sorted_list.sort(function(a,b) {
|
||||
return b.val - a.val;
|
||||
});
|
||||
|
||||
}
|
||||
//var no_display_list = sorted_list.slice(10, sorted_list.length+1);
|
||||
var display_list = sorted_list.slice(0, max_display);
|
||||
for( i=0; i<display_list.length; i++){
|
||||
this.graph.setVisibility(display_list[i].index, true);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -141,17 +141,29 @@
|
|||
|
||||
<!-- instanciate and plot graphs -->
|
||||
<script type="text/javascript">
|
||||
// Create, plot and set the limit of displayed headers
|
||||
function create_and_plot(pannel, path){
|
||||
//var graph_domain = new Graph($(event.target).attr('data-pannel'), $(event.target).attr('data-path'));
|
||||
$.get(path, function(myContentFile) {
|
||||
var lines = myContentFile.split("\r\n");
|
||||
var header_size = lines[0].split(',').length-1;
|
||||
var graph_obj = new Graph(pannel, path, header_size);
|
||||
setTimeout(function() { graph_obj.setVisibility(10)}, 300);
|
||||
}, 'text');
|
||||
}
|
||||
|
||||
// When a pannel is shown, create_and_plot.
|
||||
$('.nav-tabs a').on('shown.bs.tab', function(event){
|
||||
console.log($(event.target).attr('data-pannel')); // active tab
|
||||
console.log($(event.target).attr('data-path')); // active tab
|
||||
var graph_domain = new Graph($(event.target).attr('data-pannel'), $(event.target).attr('data-path'));
|
||||
create_and_plot($(event.target).attr('data-pannel'), $(event.target).attr('data-path'));
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
var graph_tld = new Graph("TldsTrending", "../static//csv/tldstrendingdata.csv");
|
||||
// Create the graph when the page has just loaded
|
||||
create_and_plot("TldsTrending", '../static//csv/tldstrendingdata.csv')
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</div>
|
Loading…
Reference in a new issue