Added shared crosshair to dashboards to track better all graphs, and little Fix for #884

src/app/directives/grafanaGraph.js

@@ -19,6 +19,20 @@ function (angular, $, kbn, moment, _, graphTooltip) {
         var dashboard = scope.dashboard;
         var dashboard = scope.dashboard;
         var data, annotations;
         var data, annotations;
         var legendSideLastValue = null;
         var legendSideLastValue = null;
+        scope.crosshairEmiter = false;
+
+        scope.$on('setCrosshair',function(event,pos) {
+          console.log('setCrosshair'+ pos);
+          if(dashboard.sharedCrosshair && !scope.crosshairEmiter) {
+            var plot = elem.data().plot;
+            plot.setCrosshair({ x: pos.x, y: pos.y });
+          }
+        });
+
+        scope.$on('clearCrosshair',function() {
+          var plot = elem.data().plot;
+          plot.clearCrosshair();
+        });
 
 
         scope.$on('refresh',function() {
         scope.$on('refresh',function() {
           scope.get_data();
           scope.get_data();
@@ -147,7 +161,7 @@ function (angular, $, kbn, moment, _, graphTooltip) {
               color: '#666'
               color: '#666'
             },
             },
             crosshair: {
             crosshair: {
-              mode: panel.tooltip.shared ? "x" : null
+              mode: panel.tooltip.shared || dashboard.sharedCrosshair ? "x" : null
             }
             }
           };
           };
 
 
@@ -394,7 +408,7 @@ function (angular, $, kbn, moment, _, graphTooltip) {
           elem.html('<img src="' + url + '"></img>');
           elem.html('<img src="' + url + '"></img>');
         }
         }
 
 
-        graphTooltip.register(elem, dashboard, scope);
+        graphTooltip.register(elem, dashboard, scope, $rootScope);
 
 
         elem.bind("plotselected", function (event, ranges) {
         elem.bind("plotselected", function (event, ranges) {
           scope.$apply(function() {
           scope.$apply(function() {

src/app/directives/grafanaGraph.tooltip.js

@@ -5,7 +5,7 @@ define([
 function ($, kbn) {
 function ($, kbn) {
   'use strict';
   'use strict';
 
 
-  function registerTooltipFeatures(elem, dashboard, scope) {
+  function registerTooltipFeatures(elem, dashboard, scope, $rootScope) {
 
 
     var $tooltip = $('<div id="tooltip">');
     var $tooltip = $('<div id="tooltip">');
 
 
@@ -13,7 +13,8 @@ function ($, kbn) {
       if(scope.panel.tooltip.shared) {
       if(scope.panel.tooltip.shared) {
         var plot = elem.data().plot;
         var plot = elem.data().plot;
         $tooltip.detach();
         $tooltip.detach();
-        plot.clearCrosshair();
+        $rootScope.$broadcast('clearCrosshair');
+        //plot.clearCrosshair();
         plot.unhighlight();
         plot.unhighlight();
       }
       }
     });
     });
@@ -32,6 +33,11 @@ function ($, kbn) {
       var data = plot.getData();
       var data = plot.getData();
       var group, value, timestamp, seriesInfo, format, i, series, hoverIndex, seriesHtml;
       var group, value, timestamp, seriesInfo, format, i, series, hoverIndex, seriesHtml;
 
 
+      scope.crosshairEmiter = true;
+      if(dashboard.sharedCrosshair){
+        $rootScope.$broadcast('setCrosshair',pos);
+      }
+      scope.crosshairEmiter = false;
       if (scope.panel.tooltip.shared) {
       if (scope.panel.tooltip.shared) {
         plot.unhighlight();
         plot.unhighlight();
 
 
@@ -60,11 +66,15 @@ function ($, kbn) {
           seriesInfo = series.info;
           seriesInfo = series.info;
           format = scope.panel.y_formats[seriesInfo.yaxis - 1];
           format = scope.panel.y_formats[seriesInfo.yaxis - 1];
 
 
-          if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') {
-            value = series.data[hoverIndex][1];
+          if (scope.panel.stack) {
+            if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') {
+              value = series.data[hoverIndex][1];
+            } else {
+              last_value += series.data[hoverIndex][1];
+              value = last_value;
+            }
           } else {
           } else {
-            last_value += series.data[hoverIndex][1];
-            value = last_value;
+            value = series.data[hoverIndex][1];
           }
           }
 
 
           value = kbn.valueFormats[format](value, series.yaxis.tickDecimals);
           value = kbn.valueFormats[format](value, series.yaxis.tickDecimals);

src/app/partials/dasheditor.html

@@ -29,6 +29,7 @@
 						<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
 						<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
 					</div>
 					</div>
 					<editor-opt-bool text="Hide controls (CTRL+H)" model="dashboard.hideControls"></editor-opt-bool>
 					<editor-opt-bool text="Hide controls (CTRL+H)" model="dashboard.hideControls"></editor-opt-bool>
+          <editor-opt-bool text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-opt-bool>
 				</div>
 				</div>
 			</div>
 			</div>
 			<div class="editor-row">
 			<div class="editor-row">

src/app/services/dashboard/dashboardKeyBindings.js

@@ -18,6 +18,7 @@ function(angular, $) {
         keyboardManager.unbind('ctrl+s');
         keyboardManager.unbind('ctrl+s');
         keyboardManager.unbind('ctrl+r');
         keyboardManager.unbind('ctrl+r');
         keyboardManager.unbind('ctrl+z');
         keyboardManager.unbind('ctrl+z');
+        keyboardManager.unbind('ctrl+o');
         keyboardManager.unbind('esc');
         keyboardManager.unbind('esc');
       });
       });
 
 
@@ -25,6 +26,11 @@ function(angular, $) {
         scope.appEvent('show-dash-editor', { src: 'app/partials/search.html' });
         scope.appEvent('show-dash-editor', { src: 'app/partials/search.html' });
       }, { inputDisabled: true });
       }, { inputDisabled: true });
 
 
+      keyboardManager.bind('ctrl+o', function() {
+        var current = scope.dashboard.sharedCrosshair;
+        scope.dashboard.sharedCrosshair = !current;
+      }, { inputDisabled: true });
+
       keyboardManager.bind('ctrl+h', function() {
       keyboardManager.bind('ctrl+h', function() {
         var current = scope.dashboard.hideControls;
         var current = scope.dashboard.hideControls;
         scope.dashboard.hideControls = !current;
         scope.dashboard.hideControls = !current;

src/app/services/dashboard/dashboardSrv.js

@@ -27,6 +27,7 @@ function (angular, $, kbn, _, moment) {
       this.timezone = data.timezone || 'browser';
       this.timezone = data.timezone || 'browser';
       this.editable = data.editable === false ? false : true;
       this.editable = data.editable === false ? false : true;
       this.hideControls = data.hideControls || false;
       this.hideControls = data.hideControls || false;
+      this.sharedCrosshair = data.sharedCrosshair || true;
       this.rows = data.rows || [];
       this.rows = data.rows || [];
       this.nav = data.nav || [];
       this.nav = data.nav || [];
       this.time = data.time || { from: 'now-6h', to: 'now' };
       this.time = data.time || { from: 'now-6h', to: 'now' };