Graph: Added right y axis label setting and graph support, Closes #599

CHANGELOG.md

@@ -4,6 +4,7 @@
 - [Issue #1297](https://github.com/grafana/grafana/issues/1297). Graphite: Added cumulative and minimumBelow graphite functions
 - [Issue #1296](https://github.com/grafana/grafana/issues/1296). InfluxDB: Auto escape column names with special characters. Thanks @steven-aerts
 - [Issue #1321](https://github.com/grafana/grafana/issues/1321). SingleStatPanel: You can now use template variables in pre & postfix
+- [Issue #599](https://github.com/grafana/grafana/issues/599).   Graph: Added right y axis label setting and graph support
 
 **Fixes**
 - [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query

src/app/panels/graph/axisEditor.html

@@ -16,7 +16,7 @@
       </div>
       <div class="editor-option">
         <label class="small">Label</label>
-        <input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.leftYAxisLabel">
+        <input ng-change="render()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.leftYAxisLabel">
       </div>
   </div>
   <div class="section">
@@ -33,6 +33,10 @@
         <label class="small">Max / <a ng-click="toggleGridMinMax('rightMax')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.rightMax)"></i></a></label>
         <input type="number" class="input-small" ng-model="panel.grid.rightMax" ng-change="render()" ng-model-onblur />
       </div>
+			<div class="editor-option">
+        <label class="small">Label</label>
+        <input ng-change="render()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.rightYAxisLabel">
+      </div>
   </div>
 </div>
 

src/app/panels/graph/graph.js

@@ -109,9 +109,9 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
           }
         }
 
-        function updateLegendValues(plot) {
+        function drawHook(plot) {
+          // Update legend values
           var yaxis = plot.getYAxes();
-
           for (var i = 0; i < data.length; i++) {
             var series = data[i];
             var axis = yaxis[series.yaxis - 1];
@@ -124,6 +124,29 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
             series.updateLegendValues(formater, tickDecimals, axis.scaledDecimals + 2);
             if(!scope.$$phase) { scope.$digest(); }
           }
+
+          // add left axis labels
+          if (scope.panel.leftYAxisLabel) {
+            var yaxisLabel = $("<div class='axisLabel left-yaxis-label'></div>")
+              .text(scope.panel.leftYAxisLabel)
+              .appendTo(elem);
+
+            yaxisLabel.css("margin-top", yaxisLabel.width() / 2);
+          }
+
+          // add right axis labels
+          if (scope.panel.rightYAxisLabel) {
+            var rightLabel = $("<div class='axisLabel right-yaxis-label'></div>")
+              .text(scope.panel.rightYAxisLabel)
+              .appendTo(elem);
+
+            rightLabel.css("margin-top", rightLabel.width() / 2);
+          }
+        }
+
+        function processOffsetHook(plot, gridMargin) {
+          if (scope.panel.leftYAxisLabel) { gridMargin.left = 20; }
+          if (scope.panel.rightYAxisLabel) { gridMargin.right = 20; }
         }
 
         // Function for rendering panel
@@ -137,7 +160,10 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
 
           // Populate element
           var options = {
-            hooks: { draw: [updateLegendValues] },
+            hooks: {
+              draw: [drawHook],
+              processOffset: [processOffsetHook],
+            },
             legend: { show: false },
             series: {
               stackpercent: panel.stack ? panel.percentage : false,
@@ -173,7 +199,8 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
               backgroundColor: null,
               borderWidth: 0,
               hoverable: true,
-              color: '#c8c8c8'
+              color: '#c8c8c8',
+              margin: { left: 0, right: 0 },
             },
             selection: {
               mode: "x",
@@ -213,8 +240,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
             } catch (e) {
               console.log('flotcharts error', e);
             }
-
-            addAxisLabels();
           }
 
           if (shouldDelayDraw(panel)) {
@@ -317,19 +342,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
           };
         }
 
-        function addAxisLabels() {
-          if (scope.panel.leftYAxisLabel) {
-            elem.css('margin-left', '10px');
-            var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
-              .text(scope.panel.leftYAxisLabel)
-              .appendTo(elem);
-
-            yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20);
-          } else if (elem.css('margin-left')) {
-            elem.css('margin-left', '');
-          }
-        }
-
         function configureAxisOptions(data, options) {
           var defaults = {
             position: 'left',

src/css/less/grafana.less

@@ -87,29 +87,6 @@
   }
 }
 
-.yaxisLabel {
-  top: 50%;
-  left: -20px;
-  transform: rotate(-90deg);
-  -o-transform: rotate(-90deg);
-  -ms-transform: rotate(-90deg);
-  -moz-transform: rotate(-90deg);
-  -webkit-transform: rotate(-90deg);
-  transform-origin: 0 0;
-  -o-transform-origin: 0 0;
-  -ms-transform-origin: 0 0;
-  -moz-transform-origin: 0 0;
-  -webkit-transform-origin: 0 0;
-}
-
-.axisLabel {
-  color: @textColor;
-  font-size: @fontSizeSmall;
-  position: absolute;
-  text-align: center;
-  font-size: 12px;
-}
-
 .dashboard-fullscreen {
   .main-view-container {
     overflow: hidden;

src/css/less/graph.less

@@ -228,3 +228,44 @@
     text-align: right;
   }
 }
+
+.left-yaxis-label {
+  top: 50%;
+  left: -5px;
+  transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  transform-origin: left top;
+  -o-transform-origin: left top;
+  -ms-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -webkit-transform-origin: left top;
+}
+
+.right-yaxis-label {
+  top: 50%;
+  right: -5px;
+
+  -webkit-transform: rotate(90deg);
+  -webkit-transform-origin: right top;
+  -moz-transform: rotate(90deg);
+  -moz-transform-origin: right top;
+  -ms-transform: rotate(90deg);
+  -ms-transform-origin: right top;
+  -o-transform: rotate(90deg);
+  -o-transform-origin: right top;
+  transform: rotate(90deg);
+  transform-origin: right top;
+}
+
+
+.axisLabel {
+  color: @textColor;
+  font-size: @fontSizeSmall;
+  position: absolute;
+  text-align: center;
+  font-size: 12px;
+}
+