gistfile1.php

<?php

// This file throws good practice out of the window

include 'setup.php';

// Put these in config file
$maxResults = 1000;
$intervalLimit = 1000 * 60 * 60; // This should be approximately ((date of last stat) - (date of first stat)) / $maxResults

$startDate = 0;
$endDate = time() * 1000;
if ((int)$_REQUEST['startDate'] && (int)$_REQUEST['endDate'] < $endDate) {
	$startDate = (int)$_REQUEST['startDate'];
}
if ((int)$_REQUEST['endDate'] && (int)$_REQUEST['endDate'] > $startDate) {
	$endDate = (int)$_REQUEST['endDate'];
}
$interval = (int)(($endDate - $startDate) / $maxResults);
if ($interval > $intervalLimit)
	$interval = $intervalLimit;

$query = $db->query(
	"SELECT `date`, `usercount` " .
	"FROM `ntbb_userstatshistory` " .
	"WHERE `date` BETWEEN " . $startDate . " AND " . $endDate . " " .
	"GROUP BY FLOOR(`date`/" . $interval . ")" .
	"ORDER BY `date` ASC");

function printJsonResults($db, $query) {
	echo '[';
	$row = $db->fetch_assoc($query);
	while (true) {
		echo '[' . $row['date'] . ',' . $row['usercount'] . ']';
		if ($row = $db->fetch_assoc($query)) {
			echo ',';
		} else {
			break;
		}
	}
	echo ']';
}

if ($_REQUEST['format'] == "json") {
	header("Content-Type: application/json");
	printJsonResults($db, $query);
	exit();
}

$page = 'userstats';
$pageTitle = "User stats";

includeHeader();

?>
		<script src="//pokemonshowdown.com/js/jquery-1.9.0.min.js"></script>
		<script src="//pokemonshowdown.com/js/jquery.flot.js"></script>
		<script src="//pokemonshowdown.com/js/jquery.flot.selection.js"></script>

		<div class="main">

			<p>
				This graph shows the number of users on the Smogon University server (official server) over the last five days.<br />
				<span id="timezone"></span>
			</p>

			<div id="userstats" style="width: 800px; height: 300px;"></div>
			<p>Click and drag a section of the overview below to view a specific time period:</p>
			<div id="overview" style="width: 800px; height: 100px;"></div>

			<script id="source">
			var timezoneOffset = new Date().getTimezoneOffset();
			function getUserstats(startDate, endDate, callback) {
				$.getJSON("?format=json&startDate=" + startDate + "&endDate=" + endDate, function (stats) {
					timezoneAdjust(stats);
					console.log(stats.length);
					callback(stats);
				});
			}
			function timezoneAdjust(stats) {
				for (var s = 0; s < stats.length; ++s) {
					stats[s][0] -= timezoneOffset * 60 * 1000;
				}
			}
			$(function() {

				var stats = <?php printJsonResults($db, $query) ?>;
				timezoneAdjust(stats);
				$('#timezone').html('Times are displayed as UTC' + ((timezoneOffset > 0) ? '-' : '+') + (Math.abs(timezoneOffset) / 60) + ', which is probably your local timezone.');

				var xaxis = {mode: "time", timeformat: "%y-%0m-%0d %H:%M"};

				var graph = (function() {
					var options = {
						xaxis: xaxis,
						selection: {mode: "x"},
						grid: {hoverable: true}
					};
					var self = $.plot($("#userstats"), [stats], options);
					var showUserCount = function(plot, x, y) {
						var p = plot.pointOffset({x: x, y: y});
						$("#usercount-overlay").remove();
						$("#userstats").append('<div id="usercount-overlay"' +
							'style="position:absolute;left:' +
							(p.left + 15) + 'px;top:' + (p.top - 15) +
							'px;color:#666;font-size:smaller;' +
							'background-color:rgba(255,255,255,0.3);">' + y + ' users</div>');
					};
					var highlightPoint = (function() {
						var lastHighlight = -1;
						return function(plot, index) {
							if (lastHighlight !== -1) {
								plot.unhighlight(0, lastHighlight);
							}
							plot.highlight(0, lastHighlight = index);
						};
					})();
					var highlightMaximum = function(plot) {
						var max = 0;
						var maxIdx = 0;
						var data = plot.getData()[0].data;
						for (var i = 0; i < data.length; ++i) {
							if (data[i][0] < plot.getAxes().xaxis.min) continue;
							if (data[i][0] > plot.getAxes().xaxis.max) break;
							if (data[i][1] > max) {
								max = data[i][1];
								maxIdx = i;
							}
						}
						highlightPoint(plot, maxIdx);
						showUserCount(plot, data[maxIdx][0], max);
					};
					highlightMaximum(self);
					$("#userstats").bind("plothover", function(event, pos, item) {
						if (item) {
							highlightPoint(self, item.dataIndex);
							showUserCount(self, item.datapoint[0], item.datapoint[1]);
						}
					});
					$("#userstats").bind("plotselected", function(event, ranges) {
						getUserstats(ranges.xaxis.from + timezoneOffset * 60 * 1000, ranges.xaxis.to + timezoneOffset * 60 * 1000, function (stats) {
							graph = self = $.plot($("#userstats"), [stats],
								$.extend(true, {}, options, {
									xaxis: {min: ranges.xaxis.from, max: ranges.xaxis.to}
								}
							));
							overview.setSelection(ranges, true);
							highlightMaximum(self);
						});
					});
					return self;
				})();

				var overview = (function() {
					var ret = $.plot($("#overview"), [stats], {
						series: {
							lines: {show: true, lineWidth: 1},
							shadowSize: 0
						},
						xaxis: xaxis,
						yaxis: {ticks: [], min: 0, autoscaleMargin: 0.1},
						selection: {mode: "x"}
					});
					$("#overview").bind("plotselected", function(event, ranges) {
						graph.setSelection(ranges);
					});
					return ret;
				})();
			});
			</script>

		</div>
<?php

includeFooter();

?>