From 4baac0b994af6d376c315873723df92446d60053 Mon Sep 17 00:00:00 2001
From: Mokaddem <mokaddem.sami@gmail.com>
Date: Tue, 16 Aug 2016 10:31:18 +0200
Subject: [PATCH] Tool-plot for sentiment working + Splitted script and webpage

---
 var/www/static/js/sentiment_plot.js           | 95 +++++++++++++++++++
 .../sentiment_analysis_plot_tool.html         | 91 +-----------------
 2 files changed, 98 insertions(+), 88 deletions(-)
 create mode 100644 var/www/static/js/sentiment_plot.js

diff --git a/var/www/static/js/sentiment_plot.js b/var/www/static/js/sentiment_plot.js
new file mode 100644
index 00000000..c9c2b7ef
--- /dev/null
+++ b/var/www/static/js/sentiment_plot.js
@@ -0,0 +1,95 @@
+var li_text = "<li><div class='checkbox'></div><label class='provider'><input value='" 
+var li_text_mid = "' type='checkbox'></input> "
+var li_text_end = "</label></li>"
+
+
+/* Get Providers List and display them by row */
+$.getJSON('/sentiment_analysis_plot_tool_getdata/?getProviders=True', function(data){
+    for(i=0; i<data.length; i++){
+        var providerList = i%2 == 0 ? '#providerList1' : '#providerList2';
+        $(providerList).append(li_text + data[i] + li_text_mid + data[i] + li_text_end);
+    }
+});
+
+
+/* Create the slider and button*/
+var today = Date.now();
+var old_day = today - (31*24*60*60)*1000;
+$( ".sliderRange" ).slider({
+    range: true,
+    min: old_day,
+    max: today,
+    values: [ today - (7*24*60*60)*1000, today ],
+    step: 24*60*60*1000,
+    slide: function( event, ui ) {
+        $( "#amount" ).val( new Date(ui.values[ 0 ]).toLocaleDateString() + " - " + new Date(ui.values[ 1 ]).toLocaleDateString() );
+    }
+});
+
+$( "#amount" ).val( new Date($( ".sliderRange" ).slider( "values", 0 )).toLocaleDateString() +
+  " - " + new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString() );
+
+$('#plot_btn').click(plotData); 
+
+
+/* Plot the requested data (if available) stored in slider and checkboxes */
+
+function plotData(){
+    var graph_options = {
+                            series: {
+            	                stack: true,
+                                lines: { show: false,
+                                lineWidth: 2,
+                                fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
+                                },
+                                bars: {show: true, barWidth: 60*60*1000},
+                                shadowSize: 0
+                            },
+                            grid: { 
+                                hoverable: true, 
+                                clickable: true, 
+                                tickColor: "#f9f9f9",
+                                borderWidth: 0
+                            },
+                            xaxis: {
+                                  mode: "time",
+                                  timeformat: "%m/%d:%Hh",
+                                  minTickSize: [1, "hour"]
+                            },
+                            yaxis: {
+                                autoscaleMargin: 0.1,
+                            },
+                        }
+    var query = $( "input:checked" ).map(function () {return this.value;}).get().join(",");
+    var Qdate = new Date($( ".sliderRange" ).slider( "values", 0 )).toLocaleDateString() +'-'+ new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString()
+        
+
+    // retreive the data from the server
+    $.getJSON('/sentiment_analysis_plot_tool_getdata/?getProviders=False&query='+query+'&Qdate='+Qdate, function(data){
+        var to_plot = [];
+        for (provider in data){
+            var nltk_data = Object.keys(data[provider]).map(function (key) { return data[provider][key]; });
+            var nltk_key = Object.keys(data[provider]).map(function (key) { return key; });
+
+            var pos = 0.0;
+            var neg = 0.0;
+            var XY_data = [];
+            for (i=0; i<nltk_data.length; i++){
+                if (nltk_data[i].length == 0)
+                    continue;
+                else {
+                    for (j=0; j<nltk_data[i].length; j++){
+                        var curr_data = jQuery.parseJSON(nltk_data[i][j].replace(/\'/g, '\"'));
+                        pos += curr_data['pos'];
+                        neg += curr_data['neg'];
+                    }
+                    pos = pos/nltk_data.length;
+                    neg = neg/nltk_data.length;
+                }
+                XY_data.push([nltk_key[i]*1000, pos-neg]);
+            }
+        to_plot.push({ data: XY_data, label: provider}); 
+        }
+	var plot = $.plot($("#graph"), to_plot, graph_options);
+    });
+}
diff --git a/var/www/templates/sentiment_analysis_plot_tool.html b/var/www/templates/sentiment_analysis_plot_tool.html
index 63f2cec2..713d0f71 100644
--- a/var/www/templates/sentiment_analysis_plot_tool.html
+++ b/var/www/templates/sentiment_analysis_plot_tool.html
@@ -19,6 +19,8 @@
   <script src="{{ url_for('static', filename='js/dataTables.bootstrap.js') }}"></script>
   <script src="{{ url_for('static', filename='js/jquery-ui.min.js') }}"></script>
   <script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/jquery.flot.time.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/jquery.flot.stack.js') }}"></script>
 
   <style>
       .sparkLineStats ul {
@@ -139,96 +141,9 @@
     $(document).ready(function(){
         activePage = $('h1.page-header').attr('data-page');
         $("#"+activePage).addClass("active");
-        var li_text = "<li><div class='checkbox'></div><label class='provider'><input value='" 
-        var li_text_mid = "' type='checkbox'></input> "
-        var li_text_end = "</label></li>"
-
-        $.getJSON('/sentiment_analysis_plot_tool_getdata/?getProviders=True', function(data){
-            for(i=0; i<data.length; i++){
-                var providerList = i%2 == 0 ? '#providerList1' : '#providerList2';
-                $(providerList).append(li_text + data[i] + li_text_mid + data[i] + li_text_end);
-            }
-        });
-
-
-        var today = Date.now();
-        var old_day = today - (31*24*60*60)*1000;
-        $( ".sliderRange" ).slider({
-            range: true,
-            min: old_day,
-            max: today,
-            values: [ today - (7*24*60*60)*1000, today ],
-            step: 24*60*60*1000,
-            slide: function( event, ui ) {
-                $( "#amount" ).val( new Date(ui.values[ 0 ]).toLocaleDateString() + " - " + new Date(ui.values[ 1 ]).toLocaleDateString() );
-            }
-        });
-
-        $( "#amount" ).val( new Date($( ".sliderRange" ).slider( "values", 0 )).toLocaleDateString() +
-          " - " + new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString() );
-
-
-        $('#plot_btn').click(plotData); 
-
-
-        function plotData(){
-            var query = $( "input:checked" ).map(function () {return this.value;}).get().join(",");
-            var Qdate = new Date($( ".sliderRange" ).slider( "values", 0 )).toLocaleDateString() +'-'+ new Date($( ".sliderRange" ).slider( "values", 1 )).toLocaleDateString()
-                
-            $.getJSON('/sentiment_analysis_plot_tool_getdata/?getProviders=False&query='+query+'&Qdate='+Qdate, function(data){
-                console.log(data);
-            });
-        }
-
-
-
-
-
-
-
-
-
-
-    function randNum(){
-        return ((Math.floor( Math.random()* (1+40-20) ) ) + 20)* 1200;
-    }
-
-
-
-
-var likes = [[1, 5+randNum()], [2, 10+randNum()], [3, 15+randNum()], [4, 20+randNum()],[5, 25+randNum()],[6, 30+randNum()],[7, 35+randNum()],[8, 40+randNum()],[9, 45+randNum()],[10, 50+randNum()],[11, 55+randNum()],[12, 60+randNum()],[13, 65+randNum()],[14, 70+randNum()],[15, 75+randNum()],[16, 80+randNum()],[17, 85+randNum()],[18, 90+randNum()],[19, 85+randNum()],[20, 80+randNum()],[21, 75+randNum()],[22, 80+randNum()],[23, 75+randNum()],[24, 70+randNum()],[25, 65+randNum()],[26, 75+randNum()],[27,80+randNum()],[28, 85+randNum()],[29, 90+randNum()], [30, 95+randNum()]];
-var likes2 = [[1, 5+randNum()], [2, 10+randNum()], [3, 15+randNum()], [4, 20+randNum()],[5, 25+randNum()],[6, 30+randNum()],[7, 35+randNum()],[8, 40+randNum()],[9, 45+randNum()],[10, 50+randNum()],[11, 55+randNum()],[12, 60+randNum()],[13, 65+randNum()],[14, 70+randNum()],[15, 75+randNum()],[16, 80+randNum()],[17, 85+randNum()],[18, 90+randNum()],[19, 85+randNum()],[20, 80+randNum()],[21, 75+randNum()],[22, 80+randNum()],[23, 75+randNum()],[24, 70+randNum()],[25, 65+randNum()],[26, 75+randNum()],[27,80+randNum()],[28, 85+randNum()],[29, 90+randNum()], [30, 95+randNum()]];
-
-		var plot = $.plot($("#graph"),
-			   [ { data: likes, label: "Fans"}, { data: likes2, label: "Fans"} ], {
-				   series: {
-					   lines: { show: true,
-								lineWidth: 2,
-								fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
-							 },
-					   points: { show: true, 
-								 lineWidth: 2 
-							 },
-					   shadowSize: 0
-				   },
-				   grid: { hoverable: true, 
-						   clickable: true, 
-						   tickColor: "#f9f9f9",
-						   borderWidth: 0
-						 },
-				   colors: ["#3B5998"],
-					xaxis: {ticks:6, tickDecimals: 0},
-					yaxis: {ticks:3, tickDecimals: 0},
-				 });
-
-
-
-
-
-
-
    });
 </script>
+<script src="{{ url_for('static', filename='js/sentiment_plot.js') }}"></script>
 
 </body>
 </html>