Renamed tldstrending into trending and added graphics into their respective pannels. Separated graph generation from html source code for wordtrending and protocoltrending

var/www/Flask_server.py

@@ -141,9 +141,9 @@ def protocolstrending():
     return render_template("Protocolstrending.html")
 
 
-@app.route("/tldstrending/")
+@app.route("/trending/")
-def tldstrending():
+def trending():
-    return render_template("Tldstrending.html")
+    return render_template("Trending.html")
 
 
 @app.route("/showsavedpaste/") #completely shows the paste in a new tab

var/www/templates/Protocolstrending.html

@@ -24,7 +24,7 @@
       <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
           <div class="navbar-header">
           <ul class="nav navbar-nav">
-            <li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('tldstrending') }}"><i class="glyphicon glyphicon-stats"></i> Top Level Domain Trending</a></li></ul>
+            <li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li></ul>
          </div>
           <!-- /.navbar-top-links -->
           <div class="navbar-default sidebar" role="navigation">
@@ -93,102 +93,16 @@
             <!-- /.row -->
         </div>
         <!-- /#page-wrapper -->
-            <script type="text/javascript">
-g2 = new Dygraph(
-    document.getElementById("ProtocolsTrending"),
-    // path to CSV file
-    "{{ url_for('static', filename='csv/protocolstrendingdata.csv') }}",
-    //"../csv/wordstrendingdata.csv",
-    //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) {
+        <!-- import graph function -->
-        var canvas_left_x = g.toDomXCoord(x_start);
+        <script src="{{ url_for('static', filename='js/plot-graph.js') }}"></script>
-        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);
+        <script>
-    var max_data_x = g.getValue(g.numRows()-1,0);
+            $(document).ready(function(){
-
+                var graph_tld = new Graph("ProtocolsTrending", "../static//csv/protocolstrendingdata.csv");
-    // 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
             });
-}
+        </script>
-</script>
+
     </div>
     <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
 </body>

var/www/templates/Tldstrending.html

@@ -24,7 +24,7 @@
       <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
           <div class="navbar-header">
           <ul class="nav navbar-nav">
-              <li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('tldstrending') }}"><i class="glyphicon glyphicon-stats"></i> Top Level Domain Trending</a></li></ul>
+              <li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li></ul>
           </div>
           <!-- /.navbar-top-links -->
           <div class="navbar-default sidebar" role="navigation">
@@ -52,13 +52,22 @@
         <div id="page-wrapper">
           <div class="row">
               <div class="col-lg-12">
-                  <h1 class="page-header">Top Level Domain Trending</h1>
+                  <h1 class="page-header">Trending charts</h1>
               </div>
               <!-- /.col-lg-12 -->
           </div>
             <!-- /.row -->
             <div class="row">
-                <div class="col-lg-12">
+            
+            <!-- /.nav-tabs -->
+            <ul class="nav nav-tabs">
+                <li class="active"><a data-toggle="tab" href="#tld-tab" data-pannel="TldsTrending" data-path="../static//csv/tldstrendingdata.csv">Top level domains</a></li>
+                <li><a data-toggle="tab" href="#domain-tab" data-pannel="DomainTrending" data-path="../static//csv/domainstrendingdata.csv">Domains</a></li>
+            </ul>
+            </br>
+              
+            <div class="tab-content">  
+                <div class="col-lg-12 tab-pane fade in active" id="tld-tab" >
                     <div class="panel panel-default">
                         <div class="panel-heading">
                             <i class="fa fa-bar-chart-o fa-fw"></i> Top Level Domain Trending
@@ -90,7 +99,7 @@
                         <!-- /.panel-body -->
                     </div>
                 </div>
-		<div class="col-lg-12">
+                <div class="col-lg-12 tab-pane fade" id="domain-tab">
                     <div class="panel panel-default">
                         <div class="panel-heading">
                             <i class="fa fa-bar-chart-o fa-fw"></i> Top Domain Trending 
@@ -122,16 +131,29 @@
                         <!-- /.panel-body -->
                     </div>
                 </div>
+            </div> <!-- tab-content -->
             <!-- /.row -->
         </div>
         <!-- /#page-wrapper -->
+
         <!-- import graph function -->
         <script src="{{ url_for('static', filename='js/plot-graph.js') }}"></script>
+
         <!-- instanciate and plot graphs -->
         <script type="text/javascript">
-		var graph_tld = new Graph("TldsTrending", "../static//csv/tldstrendingdata.csv");
+            $('.nav-tabs a').on('shown.bs.tab', function(event){
-		var graph_domain = new Graph("DomainTrending", "../static//csv/domainstrendingdata.csv");
+                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'));
+            });
         </script>
+
+        <script>
+            $(document).ready(function(){
+                var graph_tld = new Graph("TldsTrending", "../static//csv/tldstrendingdata.csv");
+            });
+        </script>
+
     </div>
     <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
 </body>

var/www/templates/Wordstrending.html

@@ -24,7 +24,7 @@
       <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
           <div class="navbar-header">
           <ul class="nav navbar-nav">
-             <li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('tldstrending') }}"><i class="glyphicon glyphicon-stats"></i> Top Level Domain Trending</a></li></ul>
+             <li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li></ul>
           </div>
           <!-- /.navbar-top-links -->
           <div class="navbar-default sidebar" role="navigation">
@@ -93,101 +93,16 @@
             <!-- /.row -->
         </div>
         <!-- /#page-wrapper -->
-            <script type="text/javascript">
-g2 = new Dygraph(
-    document.getElementById("WordTrending"),
-    // path to CSV file
-    "{{ url_for('static', filename='csv/wordstrendingdata.csv') }}",
-    //"../csv/wordstrendingdata.csv",
-    //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) {
+        <!-- import graph function -->
-        var canvas_left_x = g.toDomXCoord(x_start);
+        <script src="{{ url_for('static', filename='js/plot-graph.js') }}"></script>
-        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);
+        <script>
-    var max_data_x = g.getValue(g.numRows()-1,0);
+            $(document).ready(function(){
-
+                var graph_tld = new Graph("WordTrending", "../static//csv/wordstrendingdata.csv");
-    // 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
             });
-}
+        </script>
+
 </script>
     </div>
     <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

var/www/templates/index.html

@@ -35,7 +35,7 @@
       <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
           <div class="navbar-header">
            <ul class="nav navbar-nav">
-           <li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('tldstrending') }}"><i class="glyphicon glyphicon-stats"></i> Top Level Domain Trending</a></li></ul>
+           <li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li></ul>
         </div>
           <!-- /.navbar-top-links -->
           <div class="navbar-default sidebar" role="navigation">

var/www/templates/search.html

@@ -45,7 +45,7 @@
       <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
           <div class="navbar-header">
           <ul class="nav navbar-nav">
-               <li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('tldstrending') }}"><i class="glyphicon glyphicon-stats"></i> Top Level Domain Trending</a></li></ul>
+               <li class="active"><a href="{{ url_for('index') }}"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a></li><li><a href="{{ url_for('wordstrending') }}"><i class="glyphicon glyphicon-stats"></i> WordsTrendings</a></li><li><a href="{{ url_for('protocolstrending') }}"><i class="glyphicon glyphicon-stats"></i> ProtocolsTrendings</a></li><li><a href="{{ url_for('trending') }}"><i class="glyphicon glyphicon-stats"></i> Trending charts</a></li></ul>
           </div>
           <!-- /.navbar-top-links -->
           <div class="navbar-default sidebar" role="navigation">