diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index c8d8fbfb25f..ac75aa28754 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -422,21 +422,32 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) { function addXHistogramAxis(options, bucketSize) { let ticks, min, max; + let defaultTicks = panelWidth / 50; if (data.length && bucketSize) { ticks = _.map(data[0].data, point => point[0]); + min = _.min(ticks); + max = _.max(ticks); + + // Adjust tick step + let tickStep = bucketSize; + let ticks_num = Math.floor((max - min) / tickStep); + while (ticks_num > defaultTicks) { + tickStep = tickStep * 2; + ticks_num = Math.ceil((max - min) / tickStep); + } // Expand ticks for pretty view - min = _.min(ticks) - bucketSize; - max = _.max(ticks) + bucketSize; + min = Math.floor(min / tickStep) * tickStep; + max = Math.ceil(max / tickStep) * tickStep; ticks = []; - for (let i = min; i <= max; i += bucketSize) { + for (let i = min; i <= max; i += tickStep) { ticks.push(i); } } else { // Set defaults if no data - ticks = panelWidth / 100; + ticks = defaultTicks / 2; min = 0; max = 1; } @@ -450,6 +461,9 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) { label: "Histogram", ticks: ticks }; + + // Use 'short' format for histogram values + configureAxisMode(options.xaxis, 'short'); } function addXTableAxis(options) {