diff --git a/var/www/static/js/plot-graph.js b/var/www/static/js/plot-graph.js
new file mode 100644
index 00000000..22f2c178
--- /dev/null
+++ b/var/www/static/js/plot-graph.js
@@ -0,0 +1,100 @@
+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
+ });
+ }
+}
diff --git a/var/www/templates/Tldstrending.html b/var/www/templates/Tldstrending.html
index e2706f21..6bc96cba 100644
--- a/var/www/templates/Tldstrending.html
+++ b/var/www/templates/Tldstrending.html
@@ -84,111 +84,54 @@
+
+
+
+
Top Domain Trending
+
+
+
+
+
+
+