Add graph legend

modules/distribution/src/repository/jaggeryapps/iotserver/units/analiytics-graphs/public/css/legend.css

@@ -7,6 +7,7 @@
     padding: 12px 5px;
     border-radius: 2px;
     position: relative;
+    float: right;
 }
 .rickshaw_legend:hover {
     z-index: 10;
@@ -71,3 +72,16 @@
     background: rgba(255, 255, 255, 0.2);
     border-radius: 3px;
 }
+.legend {
+    display: inline-block;
+    position: relative;
+    left: 8px;
+}
+.legend_container {
+    float: right;
+    padding-right: 10px;
+    width: 0;
+    z-index: 999;
+    position: relative;
+    opacity: 0.7;
+}

modules/distribution/src/repository/jaggeryapps/iotserver/units/analytics/public/js/graph_util.js

@@ -25,7 +25,9 @@ Rickshaw.Graph.Renderer.BinaryBar = Rickshaw.Class.create(Rickshaw.Graph.Rendere
         var barWidth = this.barWidth(series.active()[0]);
         var barXOffset = 0;
 
-        var activeSeriesCount = series.filter( function(s) { return !s.disabled; } ).length;
+        var activeSeriesCount = series.filter(function (s) {
+            return !s.disabled;
+        }).length;
         var seriesBarWidth = this.unstack ? barWidth / activeSeriesCount : barWidth;
 
         var transform = function (d) {
@@ -39,12 +41,20 @@ Rickshaw.Graph.Renderer.BinaryBar = Rickshaw.Class.create(Rickshaw.Graph.Rendere
             if (series.disabled) return;
 
             var nodes = vis.selectAll("path")
-                .data(series.stack.filter( function(d) { return d.y !== null } ))
+                .data(series.stack.filter(function (d) {
+                    return d.y !== null
+                }))
                 .enter().append("svg:rect")
-                .attr("x", function(d) { return graph.x(d.x) + barXOffset })
+                .attr("x", function (d) {
-                .attr("y", function(d) { return ((graph.y(index + Math.abs(d.y))) * (d.y < 0 ? -1 : 1 )) })
+                    return graph.x(d.x) + barXOffset
+                })
+                .attr("y", function (d) {
+                    return ((graph.y(index + Math.abs(d.y))) * (d.y < 0 ? -1 : 1 ))
+                })
                 .attr("width", seriesBarWidth)
-                .attr("height", function(d) { return graph.y.magnitude(Math.abs(d.y)) })
+                .attr("height", function (d) {
+                    return graph.y.magnitude(Math.abs(d.y))
+                })
                 .attr("transform", transform);
 
             index++;
@@ -280,7 +290,9 @@ function drawLineGraph(graphId, chartDataRaw){
     var x_axis = "x_axis" + graphId;
     var y_axis = "y_axis" + graphId;
     $(chartWrapperElmId).html("").html('<div id = "' + y_axis
-        + '" class="custom_y_axis"></div><div id="' + chartDiv
+        + '" class="custom_y_axis"></div><div class="legend_container" id="legend_container'
+        + graphId + '"><div id="smoother' + graphId + '" title="Smoothing"></div><div class="legend" id="legend'
+        + graphId + '"></div></div><div id="' + chartDiv
         + '" class="custom_rickshaw_graph"></div><div id="' + x_axis
         + '" class="custom_x_axis"></div><div id="' + sliderDiv
         + '" class="custom_slider"></div>');
@@ -289,7 +301,7 @@ function drawLineGraph(graphId, chartDataRaw){
         element: document.getElementById(chartDiv),
         width: graphWidth,
         height: 400,
-        strokeWidth: 1,
+        strokeWidth: 2,
         renderer: 'line',
         unstack: true,
         stack: false,
@@ -348,6 +360,12 @@ function drawLineGraph(graphId, chartDataRaw){
         graph: graph,
         element: document.getElementById(sliderDiv)
     });
+
+    var legend = new Rickshaw.Graph.Legend( {
+        graph: graph,
+        element: document.getElementById('legend' + graphId)
+
+    } );
 }
 
 
@@ -364,7 +382,9 @@ function drawBarGraph(graphId, chartDataRaw){
     var x_axis = "x_axis" + graphId;
     var y_axis = "y_axis" + graphId;
     $(chartWrapperElmId).html("").html('<div id = "' + y_axis
-        + '" class="custom_y_axis"></div><div id="' + chartDiv
+        + '" class="custom_y_axis"></div><div class="legend_container" id="legend_container'
+        + graphId + '"><div id="smoother' + graphId + '" title="Smoothing"></div><div class="legend" id="legend'
+        + graphId + '"></div></div><div id="' + chartDiv
         + '" class="custom_rickshaw_graph"></div><div id="' + x_axis
         + '" class="custom_x_axis"></div><div id="' + sliderDiv
         + '" class="custom_slider"></div>');
@@ -372,7 +392,7 @@ function drawBarGraph(graphId, chartDataRaw){
     var graphConfig = {
         element: document.getElementById(chartDiv),
         width: graphWidth,
-        height: 150,
+        height: 50 * chartDataRaw.length,
         strokeWidth: 0.5,
         renderer: 'binary_bar',
         offset: 'zero',
@@ -420,7 +440,7 @@ function drawBarGraph(graphId, chartDataRaw){
         orientation: 'left',
         element: document.getElementById(y_axis),
         width: 40,
-        height: 160,
+        height: 55 * chartDataRaw.length,
         tickFormat: function (y) {
             return '';
         }
@@ -432,6 +452,12 @@ function drawBarGraph(graphId, chartDataRaw){
         graph: graph,
         element: document.getElementById(sliderDiv)
     });
+
+    var legend = new Rickshaw.Graph.Legend( {
+        graph: graph,
+        element: document.getElementById('legend' + graphId)
+
+    } );
 }
 
 function scaleGraphs() {