function Graph(id_pannel, path){ this.path = path; this.id_pannel = id_pannel; 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; } } }); 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 }); } }