Zoom on a graph

[CeeEss]

Spectacular - nice job, guys. Still works in 1.8.10

[Pada]

Thank you all for the help!

I changed my minimum period to 10 minutes by making the following changes to Zabbix 1.8.11:

diff --git a/include/defines.inc.php b/include/defines.inc.php
index 47646b9..5a4fd0d 100644
--- a/include/defines.inc.php
+++ b/include/defines.inc.php
@@ -29,7 +29,7 @@
 	define('TRIGGER_FALSE_PERIOD',			1800);	// 30min, 0 - disable
 	define('TRIGGER_BLINK_PERIOD',			1800);	// 30min,  0 - disable
 
-	define('ZBX_MIN_PERIOD',				3600);			// 1 hour
+	define('ZBX_MIN_PERIOD',				600);			// 1 hour
 	define('ZBX_MAX_PERIOD',				2*365*86400);	// ~2 years
 	define('ZBX_PERIOD_DEFAULT',			3600);			// 1 hour
 
diff --git a/js/gtlc.js b/js/gtlc.js
index 4ccdcc9..7f98255 100644
--- a/js/gtlc.js
+++ b/js/gtlc.js
@@ -417,7 +417,7 @@ _usertime: null,				// selected end time (bar, user selection)
 _period: null,					// selected period
 _now: false,					// state if time is set to NOW
 
-minperiod: 3600,				// minimal allowed period
+minperiod: 600,				// minimal allowed period
 
 initialize: function($super,id, period, starttime, usertime, endtime){
 	this.timelineid = id;
@@ -1494,7 +1494,7 @@ appendZoomLinks: function(){
 	var timeline = this.timeline.endtime() - this.timeline.starttime();
 	
 	var caption = '';
-	var zooms = [3600, (2*3600), (3*3600), (6*3600), (12*3600), 86400, (7*86400), (14*86400), (30*86400), (90*86400), (180*86400), (365*86400)];
+	var zooms = [600, 1800, 3600, (2*3600), (3*3600), (6*3600), (12*3600), 86400, (7*86400), (14*86400), (30*86400), (90*86400), (180*86400), (365*86400)];
 
 	var links = 0;
 	for(var key in zooms){
@@ -1503,7 +1503,7 @@ appendZoomLinks: function(){
 
 		caption = this.formatStampByDHM(zooms[key], false, true);
 //		caption = caption.split(' 0',2)[0].split(' ').join('');
-		caption = caption.split(' ',2)[0];
+		caption = (zooms[key] < 3600) ? caption.split(' ',2)[1] : caption.split(' ',2)[0];
 
 		this.dom.linklist[links] = document.createElement('span');
 		this.dom.links.appendChild(this.dom.linklist[links]);
@@ -2182,7 +2182,7 @@ resizebox: function(){
 		this.period = this.calcperiod();
 		
 		if(!is_null(this.dom_box)) 
-			this.dom_period_span.innerHTML = this.FormatStampbyDHM(this.period)+((this.period<3600)?' [min 1h]':'');
+			this.dom_period_span.innerHTML = this.FormatStampbyDHM(this.period)+((this.period<600)?' [min 10'+locale['S_MINUTE_SHORT']+']':'');
 	}
 },

[CeeEss]

This worked pretty well in 1.8.x, but has issues when these mods are applied on 2.0.x. Anyone else tried it with any success? I didn't have the min_period value in the time bar and i could only scroll graphs one direction

[Pada]

CeeEss, I can try doing those mods on 2.1.x, but I'm not sure if its the same as 2.0.x though.

[Pada]

Zabbix 2.1.1 minimum zoom time changed from 1h to 10minutes

Here's my Zoom patch for 2.1.1:

diff --git a/include/defines.inc.php b/include/defines.inc.php
index f971ef1..177d40b 100644
--- a/include/defines.inc.php
+++ b/include/defines.inc.php
@@ -28,7 +28,7 @@ define('ZABBIX_COPYRIGHT_TO',   '2013');
 define('ZBX_LOGIN_ATTEMPTS',	5);
 define('ZBX_LOGIN_BLOCK',		30); // sec
 
-define('ZBX_MIN_PERIOD',		3600); // 1 hour
+define('ZBX_MIN_PERIOD',		600); // 10 minutes
 define('ZBX_MAX_PERIOD',		63072000); // the maximum period for the time bar control, ~2 years (2 * 365 * 86400)
 define('ZBX_PERIOD_DEFAULT',	3600); // 1 hour
 
diff --git a/js/functions.js b/js/functions.js
index ee9a37c..0a9d5e1 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -917,7 +917,8 @@ function formatTimestamp(timestamp, isTsDouble, isExtend) {
 	}
 
 	var days = parseInt((timestamp - years * 31536000 - months * 2592000) / 86400),
-		hours = parseInt((timestamp - years * 31536000 - months * 2592000 - days * 86400) / 3600);
+		hours = parseInt((timestamp - years * 31536000 - months * 2592000 - days * 86400) / 3600),
+		minutes = parseInt((timestamp - years * 31536000 - months * 2592000 - days * 86400 - hours * 3600) / 60);
 
 	// due to imprecise calculations it is possible that the remainder contains 12 whole months but no whole years
 	if (months == 12) {
@@ -935,6 +936,9 @@ function formatTimestamp(timestamp, isTsDouble, isExtend) {
 		if (hours.toString().length == 1) {
 			hours = '0' + hours;
 		}
+		if (minutes.toString().length == 1) {
+			minutes = '0' + minutes;
+		}
 	}
 
 	var str = (years == 0) ? '' : years + locale['S_YEAR_SHORT'] + ' ';
@@ -943,6 +947,7 @@ function formatTimestamp(timestamp, isTsDouble, isExtend) {
 		? days + locale['S_DAY_SHORT'] + ' '
 		: ((days == 0) ? '' : days + locale['S_DAY_SHORT'] + ' ');
 	str += (hours == 0) ? '' : hours + locale['S_HOUR_SHORT'] + ' ';
+	str += (minutes == 0) ? '' : minutes + locale['S_MINUTE_SHORT'] + ' ';
 
 	return str;
 }
diff --git a/js/gtlc.js b/js/gtlc.js
index 8409691..f6d0c20 100644
--- a/js/gtlc.js
+++ b/js/gtlc.js
@@ -309,7 +309,7 @@ var CTimeLine = Class.create(CDebug, {
 	_period:	null,	// selected period
 	_now:		false,	// state if time is set to NOW
 	_isNow:		false,	// state if time is set to NOW (for outside usage)
-	minperiod:	3600,	// minimal allowed period
+	minperiod:	600,	// minimal allowed period
 	maxperiod:	null,	// max period in seconds
 
 	initialize: function($super, period, starttime, usertime, endtime, maximumPeriod, isNow) {
@@ -1124,7 +1124,7 @@ var CScrollBar = Class.create(CDebug, {
 	appendZoomLinks: function() {
 		var timeline = timeControl.timeline.endtime() - timeControl.timeline.starttime();
 		var caption = '';
-		var zooms = [3600, 7200, 10800, 21600, 43200, 86400, 604800, 1209600, 2592000, 7776000, 15552000, 31536000];
+		var zooms = [600, 1800, 3600, 7200, 10800, 21600, 43200, 86400, 604800, 1209600, 2592000, 7776000, 15552000, 31536000];
 		var links = 0;
 
 		for (var key in zooms) {
@@ -1692,7 +1692,7 @@ var sbox = Class.create(CDebug, {
 			this.period = this.calcPeriod();
 
 			if (!is_null(this.dom_box)) {
-				this.dom_period_span.innerHTML = formatTimestamp(this.period, false, true) + (this.period < 3600 ? ' [min 1h]' : '');
+				this.dom_period_span.innerHTML = formatTimestamp(this.period, false, true) + (this.period < 600 ? ' [min 10' + locale['S_MINUTE_SHORT'] + ']' : '');
 			}
 		}
 	},

diff --git a/jsLoader.php b/jsLoader.php
index 51e908a..7a8730d 100644
--- a/jsLoader.php
+++ b/jsLoader.php
@@ -95,6 +95,7 @@ $tranStrings = array(
 		'S_MONTH_SHORT' => _x('m', 'month short'),
 		'S_DAY_SHORT' => _x('d', 'day short'),
 		'S_HOUR_SHORT' => _x('h', 'hour short'),
+		'S_MINUTE_SHORT' => _x('m', 'minute short'),
 		'S_DATE_FORMAT' => FILTER_TIMEBAR_DATE_FORMAT
 	),
 	'functions.js' => array(

I hope this works for you in 2.0.x too.

You'll notice I had to add the 'minute short' to the locale array too, which 1.8.x already had.

[CeeEss]

It does work in 2.0.x! Thank you, Pada!

Almost all of the diffs were already in the respective files, but commented-out, so i just needed to modify existing defs

[Pada]

OK great!

I'm going to try and do a Zabbix graph mod where you can use Google Charts (with JSON data) instead of sending PNG's to the browser. My goal is to allow the client to select the data series on the fly - pretty much like you have here: http://jsfiddle.net/asgallant/WaUu2/
... because even after you've zoomed in, you cannot always distinguish the lines on the graph

[Pada]

Unfortunately my idea of using Google Charts didn't work at all.

I got a prototype working, but the frontend sent over too much data (more data than the size of the PNG representing the same data) and required way too many modifications to Zabbix's frontend source code to be feasable

My next R&D project will be to add masks (like the zoom feature) on top of each data series in the legend, which can be used to enable/disable them on the fly.

[ivhs]

Timestamps

Hi there, this information is very useful, but how do I see timestamps in seconds on the graph?

[ivhs]

Timestamps

Does anyone have a solution on this? I need this to work for my environment and I am sure someone has implemented it in the past

[makemeasandwich]

https://support.zabbix.com/browse/ZBX-2517 this did it for me