phpservermon/static/js/history.js

$().ready(function()
{
	$('.chart').each(function() {
		var $this = $(this);
		create_plot($this);
	});

	$(window).resize(function(){
		$('.chart').each(function() {
			var plot = $(this).data('psm_plot');
			if(plot)
				plot.replot( );
		});
	});

	$('.chart-selector .btn').click(function(){
		var $btn = $(this);
		var chartID = $btn.attr('data-chartId');
		var chartMode = $btn.attr('data-chartMode');
		create_plot($('#chart' + chartID), chartMode);
		$btn.siblings('.btn-info').removeClass('btn-info');
		$btn.addClass('btn-info');
	});
});

function create_plot($this, mode)
{
	if(!$this) return;

	var plot = $this.data('psm_plot');
	if(plot) {
		plot.destroy();
		$this.removeData('psm_plot');
	}

	if($this.attr('data-endTime')) {
		var d = new Date(parseInt($this.attr('data-endTime')));
	} else {
		var d = new Date();
	}
	var time = d.getTime();

	var lines = $this.attr('data-lines');
	if(!lines) {
		lines = [[[0, 0]]];
	}
	else if(typeof(lines) == 'string') {
		lines = eval(lines);
	}

	mode = mode || $this.attr('data-plotMode') || 'hour';
	$this.attr('data-plotMode', mode);
	var timeStamp, tickFormat;
	var showMarker = false;
	var showLegend = true;
	switch(mode)
	{
		case 'year':
			timeStamp = 1000 * 60 * 60 * 24 * 365.25;
			tickFormat = day_format;
			break;
		case 'month':
			timeStamp = 1000 * 60 * 60 * 24 * 30;
			tickFormat = day_format;
			break;
		case 'week':
		case 'week2':
			timeStamp = 1000 * 60 * 60 * 24 * 7;
			tickFormat = short_date_format;
			showMarker = (mode == 'week2');
			break;
		case 'day':
			timeStamp = 1000 * 60 * 60 *24;
			tickFormat = short_time_format;
			break;
		case 'hour':
		default:
			showMarker = true;
			timeStamp = 1000 * 60 * 60;
			tickFormat = short_time_format;
			break;
	}

	var downArray = new Array();
	var down = $this.attr('data-down');
	if(down) {
		if(typeof(down) == 'string') {
			down = eval(down);
		}
		for (var index = 0; index < down.length; ++index) {
			var interval = down[index];
			var d = new $.jsDate(interval[0]);
			downArray.push({rectangle: {
				xmin: interval[0],
				xmax: interval[1] || time,
				yOffset: '1px',
				color: '#fe5d5d',
				showTooltip: true,
				showTooltipPrecision: 1.0,
				tooltipFormatString: "&darr; " + d.strftime(long_date_format)
			}});
		}
	}

	var series = eval($this.attr('data-series'));
	if(Array.isArray(series)) {
		for (var i=0; i<series.length; i++)
		{
			$.extend(true, series[i], {
				markerOptions: {
					show: showMarker
				},
				lineWidth: 1
			});
		}
	} else {
		series = [{}];
		showLegend = false;
	}

	plot = $.jqplot($this.attr('id'), lines, {
		title: $this.attr('data-title'),
        series: series,
		legend: {
			show: showLegend,
			placement: 'insideGrid',
			location: 'nw'
		},
		axes : {
			xaxis:{
				renderer:$.jqplot.DateAxisRenderer,
				tickOptions : {	formatString: tickFormat },
				min: time - timeStamp,
				max: time
			}
		},
		highlighter: {
			show: true,
			sizeAdjust: 7.5,
			useAxesFormatters: false,
			tooltipContentEditor: function(str, seriesIndex, pointIndex, plot)
			{
				var point = plot.series[seriesIndex].data[pointIndex];
				var d = new $.jsDate(point[0]);
				return "&uarr; " + d.strftime(long_date_format) + ' - ' + $.jqplot.sprintf('%.3fs', point[1]);
			}
		},
		canvasOverlay: {
			show: true,
			objects: downArray
		},
		cursor:{
			show: true,
			zoom: true,
			showTooltip:false,
			dblClickReset: true,
			constrainZoomTo: 'x'
		}
	});
	$this.data('psm_plot', plot);
}