ail-framework/var/www/static/js/plot-graph.js

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
	    //"{{ url_for('static', filename='csv/tldstrendingdata.csv') }}",
	    //"../static//csv/tldstrendingdata.csv",
	    this.path,
	    //window.csv,
	    {
	    rollPeriod: 1,
	    showRoller: true,
	    //drawPoints: true,
	    //fillGraph: true,
	    logscale: true,
            
	    animatedZooms: true,
	    labelsKMB: true,
	    highlightCircleSize: 3,
	    highlightSeriesOpts: {
		strokeWidth: 3,
		strokeBorderWidth: 1,
		highlightCircleSize: 5,
	    },
	    underlayCallback: function(canvas, area, g) {
	    canvas.fillStyle = "rgba(255, 193, 37, 0.5)";

	    function highlight_period(x_start, x_end) {
		var canvas_left_x = g.toDomXCoord(x_start);
		var canvas_right_x = g.toDomXCoord(x_end);
		var canvas_width = canvas_right_x - canvas_left_x;
		canvas.fillRect(canvas_left_x, area.y, canvas_width, area.h);
	    }

	    var min_data_x = g.getValue(0,0);
	    var max_data_x = g.getValue(g.numRows()-1,0);

	    // get day of week
	    var d = new Date(min_data_x);
	    var dow = d.getUTCDay();
	    var ds = d.toUTCString();

	    var w = min_data_x;
	    // starting on Sunday is a special case
	    if (dow == 0) {
		highlight_period(w,w+12*3600*1000);
	    }
	    // find first saturday
	    while (dow != 5) {
		w += 24*3600*1000;
		d = new Date(w);
		dow = d.getUTCDay();
	    }

	    // shift back 1/2 day to center highlight around the point for the day
	    w -= 12*3600*1000;
	    while (w < max_data_x) {
		var start_x_highlight = w;
		var end_x_highlight = w + 2*24*3600*1000;
		// make sure we don't try to plot outside the graph
		if (start_x_highlight < min_data_x) {
		    start_x_highlight = min_data_x;
		}
		if (end_x_highlight > max_data_x) {
		    end_x_highlight = max_data_x;
		}
		highlight_period(start_x_highlight,end_x_highlight);
		// calculate start of highlight for next Saturday
		w += 7*24*3600*1000;
	    }
	    },
            visibility: false_tab
	});
        this.graph = g2;
        this.set_Visibility = setVis;
        this.set_Visibility_andHide = setVis_andHide;

	onclick = function(ev) {
	    if (g2.isSeriesLocked()) {
		g2.clearSelection();
	    }
	    else {
		g2.setSelection(g2.getSelection(), g2.getHighlightSeries(), true);
	    }
	};
	g2.updateOptions({clickCallback: onclick}, true);

	var linear = document.getElementById("linear");
	var log = document.getElementById("log");
	linear.onclick = function() { setLog(false); }
	log.onclick = function() { setLog(true); }
	var setLog = function(val) {
	    g2.updateOptions({ logscale: val });
	    linear.disabled = !val;
	    log.disabled = val;
	    }
	function unzoomGraph() {
	    g2.updateOptions({
		dateWindow:null,
		valueRange:null
	    });
	}

        // display the top headers
        function setVis(max_display){
            var headings = this.graph.getLabels();
            headings.splice(0,1);
            var sorted_list = new Array();
            var today = new Date().getDate();
            //today = new Date().getDate()-1; // Could take the top from yesterday so that we can see the current evolution
            for( i=0; i<headings.length; i++){
                var the_heading = headings[i];
                //console.log('heading='+the_heading+' tab['+(today)+']['+(parseInt(i)+1)+']='+this.graph.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 display_list = sorted_list.slice(0, max_display);
            for( i=0; i<display_list.length; i++){
                this.graph.setVisibility(display_list[i].index, true);
            }
            return sorted_list.slice(0, sorted_list.length);
       }
       function setVis_andHide(max_display, old_display){
           display_list = this.set_Visibility(max_display);
           for(i=max_display; i<old_display; i++) {
               this.graph.setVisibility(display_list[i].index, false);
           } 
       }

}