Graphs now displayed the highest value. Plotting and filtering is done in its own script.

pull/57/head
Mokaddem 2016-07-11 15:05:04 +02:00
parent 880359265c
commit f6c7917149
2 changed files with 75 additions and 29 deletions

View File

@ -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);
}
}
}

View File

@ -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>