diff --git a/CHANGELOG.md b/CHANGELOG.md
index 578156a0229..c0c5802ccef 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index 36353464324..9965d7ff2f2 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -16,7 +16,7 @@
-
+
@@ -32,6 +32,10 @@
+
+
+
diff --git a/src/app/panels/graph/graph.js b/src/app/panels/graph/graph.js
index 62fd543d0e8..48bd68c9483 100755
--- a/src/app/panels/graph/graph.js
+++ b/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 = $("")
+ .text(scope.panel.leftYAxisLabel)
+ .appendTo(elem);
+
+ yaxisLabel.css("margin-top", yaxisLabel.width() / 2);
+ }
+
+ // add right axis labels
+ if (scope.panel.rightYAxisLabel) {
+ var rightLabel = $("")
+ .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 = $("")
- .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',
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index edaa639a897..d5dad2c7920 100644
--- a/src/css/less/grafana.less
+++ b/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;
diff --git a/src/css/less/graph.less b/src/css/less/graph.less
index d6856f5bbf9..5ad38283689 100644
--- a/src/css/less/graph.less
+++ b/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;
+}
+