Fixes #135, show seconds in x-axis when zooming in for short time ranges

src/app/directives/grafanaGraph.js

@@ -109,16 +109,7 @@ function (angular, $, kbn, moment, _) {
               shadowSize: 1
             },
             yaxes: [],
-            xaxis: {
-              timezone: dashboard.current.timezone,
-              show: panel['x-axis'],
-              mode: "time",
-              min: _.isUndefined(scope.range.from) ? null : scope.range.from.getTime(),
-              max: _.isUndefined(scope.range.to) ? null : scope.range.to.getTime(),
-              timeformat: time_format(scope.interval),
-              label: "Datetime",
-              ticks: elem.width()/100
-            },
+            xaxis: {},
             grid: {
               markings: [],
               backgroundColor: null,
@@ -137,6 +128,7 @@ function (angular, $, kbn, moment, _) {
             data[i].data = _d;
           }
 
+          addTimeAxis(options);
           addGridThresholds(options, panel);
           addAnnotations(options);
           configureAxisOptions(data, options);
@@ -146,6 +138,23 @@ function (angular, $, kbn, moment, _) {
           addAxisLabels();
         }
 
+        function addTimeAxis(options) {
+          var ticks = elem.width() / 100;
+          var min = _.isUndefined(scope.range.from) ? null : scope.range.from.getTime();
+          var max = _.isUndefined(scope.range.to) ? null : scope.range.to.getTime();
+
+          options.xaxis = {
+            timezone: dashboard.current.timezone,
+            show: scope.panel['x-axis'],
+            mode: "time",
+            min: min,
+            max: max,
+            label: "Datetime",
+            ticks: ticks,
+            timeformat: time_format(scope.interval, ticks, min, max),
+          };
+        }
+
         function render_panel_as_graphite_png(url) {
           url += '&width=' + elem.width();
           url += '&height=' + elem.css('height').replace('px', '');
@@ -293,7 +302,7 @@ function (angular, $, kbn, moment, _) {
           }
         }
 
-        function time_format(interval) {
+        function time_format(interval, ticks, min, max) {
           var _int = kbn.interval_to_seconds(interval);
           if(_int >= 2628000) {
             return "%Y-%m";
@@ -308,6 +317,13 @@ function (angular, $, kbn, moment, _) {
             return "%a %H:%M";
           }
 
+          if (min && max && ticks) {
+            var msPerTick = (max - min) / ticks;
+            if (msPerTick <= 45000) {
+              return "%H:%M:%S";
+            }
+          }
+
           return "%H:%M";
         }