From 0eba419651857f2a437c5dc588221cd1e8b99487 Mon Sep 17 00:00:00 2001
From: Mokaddem <mokaddem.sami@gmail.com>
Date: Tue, 23 Aug 2016 11:56:32 +0200
Subject: [PATCH] Added multiple terms plot in terms-plot-tool.

---
 var/www/templates/terms_plot_tool.html | 37 +++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/var/www/templates/terms_plot_tool.html b/var/www/templates/terms_plot_tool.html
index 7e20fe7a..def0e9d2 100644
--- a/var/www/templates/terms_plot_tool.html
+++ b/var/www/templates/terms_plot_tool.html
@@ -77,7 +77,8 @@
                             <div class="form-group input-group" style="margin-top: 30px;">
                                 <span class="input-group-addon"><span class="glyphicon glyphicon-stats"></span></span>
                                 <input id="TermInput" class="form-control" placeholder="Term to plot" type="text" style="max-width: 400px;" data-init-plot="{{ term }}">
-                                <button id="plot-btn" class="btn btn-info btn-interaction" style="margin-left: 10px;" data-section="followTerm" data-action="add"> Plot a term</button>
+                                <button id="plot-btn" class="btn btn-info" style="margin-left: 10px;"><span class="fa fa-caret-down"> Plot a term</button>
+                                <button id="plot-btn-add" class="btn btn-success" style="margin-left: 6px;"><span class="fa fa-plus"></span> Add the term to the chart</button>
                             </div>
 
                         </div>
@@ -143,6 +144,7 @@
           " - " + new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString() );
         
         $('#plot-btn').click(plotData); 
+        $('#plot-btn-add').click(addData); 
 
         $("#TermInput").val($("#TermInput").attr("data-init-plot"));
         $("#plot-btn").click();
@@ -158,6 +160,8 @@
 </script>
 
 <script>
+var plot;
+var graph_data = [];
 var graph_options = {
                         series: {
                             lines: { 
@@ -184,7 +188,28 @@ var graph_options = {
                     }
 
 
-function plotData(){
+function plotData() {
+    var curthis = $(this);
+    var term = $('#TermInput').val();
+    var range_start = new Date($( ".sliderRange" ).slider( "values", 0 )).getTime() / 1000;
+    var range_end = new Date($( ".sliderRange" ).slider( "values", 1 )).getTime() / 1000;
+
+    $.getJSON("{{ url_for('terms_plot_tool_data') }}", { range_start: range_start, range_end: range_end, term: term }, function(data, status){
+        graph_data = [];
+        var to_plot = [];
+        var curr_data = [];
+        for(i=0; i<data.length; i++) {
+                curr_data.push([data[i][0]*1000, data[i][1]]);
+        }
+        to_plot.push({ data: curr_data, label: term}); 
+        graph_data.push({ data: curr_data, label: term});
+        plot = $.plot($("#graph"), to_plot, graph_options);
+        $("#TermInput").val("");
+    })
+}
+
+
+function addData() {
     var curthis = $(this);
     var term = $('#TermInput').val();
     var range_start = new Date($( ".sliderRange" ).slider( "values", 0 )).getTime() / 1000;
@@ -192,17 +217,17 @@ function plotData(){
 
     $.getJSON("{{ url_for('terms_plot_tool_data') }}", { range_start: range_start, range_end: range_end, term: term }, function(data, status){
         var to_plot = [];
-        console.log(data);
         var curr_data = [];
         for(i=0; i<data.length; i++) {
                 curr_data.push([data[i][0]*1000, data[i][1]]);
         }
         to_plot.push({ data: curr_data, label: term}); 
-        var plot = $.plot($("#graph"), to_plot, graph_options);
+        graph_data.push({ data: curr_data, label: term});
+        plot = $.plot($("#graph"), graph_data, graph_options);
+        $("#TermInput").val("");
     })
-
-
 }
+
 </script>