From aac8923fa299409b721df46d4ed732b96ea5f9a5 Mon Sep 17 00:00:00 2001 From: charithag Date: Mon, 3 Aug 2015 18:42:09 +0530 Subject: [PATCH] Add graph legend --- .../analiytics-graphs/public/css/legend.css | 14 +++ .../units/analytics/public/js/graph_util.js | 102 +++++++++++------- 2 files changed, 78 insertions(+), 38 deletions(-) diff --git a/modules/distribution/src/repository/jaggeryapps/iotserver/units/analiytics-graphs/public/css/legend.css b/modules/distribution/src/repository/jaggeryapps/iotserver/units/analiytics-graphs/public/css/legend.css index 29c7358a..25787686 100644 --- a/modules/distribution/src/repository/jaggeryapps/iotserver/units/analiytics-graphs/public/css/legend.css +++ b/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; @@ -70,4 +71,17 @@ .rickshaw_legend li:active { 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; } \ No newline at end of file diff --git a/modules/distribution/src/repository/jaggeryapps/iotserver/units/analytics/public/js/graph_util.js b/modules/distribution/src/repository/jaggeryapps/iotserver/units/analytics/public/js/graph_util.js index 3a5f51f7..3278f558 100644 --- a/modules/distribution/src/repository/jaggeryapps/iotserver/units/analytics/public/js/graph_util.js +++ b/modules/distribution/src/repository/jaggeryapps/iotserver/units/analytics/public/js/graph_util.js @@ -7,12 +7,12 @@ var endDate = new Date(currentDay.getTime()); var groupId; -var color = ['#c05020','#30c020', '#6060c0', '#170B3B','#5E610B', '#2F0B3A', '#FF4000', '#2F0B3A', 'steelblue']; +var color = ['#c05020', '#30c020', '#6060c0', '#170B3B', '#5E610B', '#2F0B3A', '#FF4000', '#2F0B3A', 'steelblue']; // create a custom bar renderer that shift bars Rickshaw.Graph.Renderer.BinaryBar = Rickshaw.Class.create(Rickshaw.Graph.Renderer.Bar, { name: 'binary_bar', - render: function(args) { + render: function (args) { args = args || {}; @@ -25,36 +25,46 @@ 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) { + var transform = function (d) { // add a matrix transform for negative values - var matrix = [ 1, 0, 0, (d.y < 0 ? -1 : 1), 0, (d.y < 0 ? graph.y.magnitude(Math.abs(d.y)) * 2 : 0) ]; + var matrix = [1, 0, 0, (d.y < 0 ? -1 : 1), 0, (d.y < 0 ? graph.y.magnitude(Math.abs(d.y)) * 2 : 0)]; return "matrix(" + matrix.join(',') + ")"; }; var index = 0; - series.forEach( function(series) { + series.forEach(function (series) { 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("y", function(d) { return ((graph.y(index + Math.abs(d.y))) * (d.y < 0 ? -1 : 1 )) }) + .attr("x", function (d) { + 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++; - Array.prototype.forEach.call(nodes[0], function(n) { + Array.prototype.forEach.call(nodes[0], function (n) { n.setAttribute('fill', series.color); - } ); + }); if (this.unstack) barXOffset += seriesBarWidth; - }, this ); + }, this); } }); @@ -267,7 +277,7 @@ function updateGraphs(stats) { scaleGraphs(); } -function drawLineGraph(graphId, chartDataRaw){ +function drawLineGraph(graphId, chartDataRaw) { var chartWrapperElmId = "#canvas-wrapper" + graphId; var graphWidth = $(chartWrapperElmId).width() - 50; if (chartDataRaw.length == 0) { @@ -279,8 +289,10 @@ function drawLineGraph(graphId, chartDataRaw){ var sliderDiv = "slider" + graphId; var x_axis = "x_axis" + graphId; var y_axis = "y_axis" + graphId; - $(chartWrapperElmId).html("").html('
'); @@ -289,25 +301,25 @@ function drawLineGraph(graphId, chartDataRaw){ element: document.getElementById(chartDiv), width: graphWidth, height: 400, - strokeWidth: 1, + strokeWidth: 2, renderer: 'line', unstack: true, stack: false, xScale: d3.time.scale(), padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0}, - series:[] + series: [] }; var k = 0; - for (var i = 0; i < chartDataRaw.length; i++){ + for (var i = 0; i < chartDataRaw.length; i++) { var chartData = []; - if (chartDataRaw[i].stats.length > 0){ - for (var j = 0; j < chartDataRaw[i].stats.length; j++){ - chartData.push({x:parseInt(chartDataRaw[i].stats[j].x), y:parseInt(chartDataRaw[i].stats[j].y)}); + if (chartDataRaw[i].stats.length > 0) { + for (var j = 0; j < chartDataRaw[i].stats.length; j++) { + chartData.push({x: parseInt(chartDataRaw[i].stats[j].x), y: parseInt(chartDataRaw[i].stats[j].y)}); } - graphConfig['series'].push({ 'color': color[k], 'data': chartData, 'name': chartDataRaw[i].device }); + graphConfig['series'].push({'color': color[k], 'data': chartData, 'name': chartDataRaw[i].device}); } - if (++k == color.length){ + if (++k == color.length) { k = 0; } } @@ -321,9 +333,9 @@ function drawLineGraph(graphId, chartDataRaw){ graph.render(); - var hoverDetail = new Rickshaw.Graph.HoverDetail( { + var hoverDetail = new Rickshaw.Graph.HoverDetail({ graph: graph - } ); + }); var xAxis = new Rickshaw.Graph.Axis.X({ graph: graph, @@ -348,10 +360,16 @@ function drawLineGraph(graphId, chartDataRaw){ graph: graph, element: document.getElementById(sliderDiv) }); + + var legend = new Rickshaw.Graph.Legend( { + graph: graph, + element: document.getElementById('legend' + graphId) + + } ); } -function drawBarGraph(graphId, chartDataRaw){ +function drawBarGraph(graphId, chartDataRaw) { var chartWrapperElmId = "#canvas-wrapper" + graphId; var graphWidth = $(chartWrapperElmId).width() - 50; if (chartDataRaw.length == 0) { @@ -363,8 +381,10 @@ function drawBarGraph(graphId, chartDataRaw){ var sliderDiv = "slider" + graphId; var x_axis = "x_axis" + graphId; var y_axis = "y_axis" + graphId; - $(chartWrapperElmId).html("").html('
'); @@ -372,25 +392,25 @@ 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', xScale: d3.time.scale(), padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0}, - series:[] + series: [] }; var k = 0; - for (var i = 0; i < chartDataRaw.length; i++){ + for (var i = 0; i < chartDataRaw.length; i++) { var chartData = []; - if (chartDataRaw[i].stats.length > 0){ - for (var j = 0; j < chartDataRaw[i].stats.length; j++){ - chartData.push({x:parseInt(chartDataRaw[i].stats[j].x), y:parseInt(chartDataRaw[i].stats[j].y)}); + if (chartDataRaw[i].stats.length > 0) { + for (var j = 0; j < chartDataRaw[i].stats.length; j++) { + chartData.push({x: parseInt(chartDataRaw[i].stats[j].x), y: parseInt(chartDataRaw[i].stats[j].y)}); } - graphConfig['series'].push({ 'color': color[k], 'data': chartData, 'name': chartDataRaw[i].device }); + graphConfig['series'].push({'color': color[k], 'data': chartData, 'name': chartDataRaw[i].device}); } - if (++k == color.length){ + if (++k == color.length) { k = 0; } } @@ -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() {