Skip to content

Instantly share code, notes, and snippets.

@kotarou3
Created April 18, 2013 07:25
Show Gist options
  • Save kotarou3/5410841 to your computer and use it in GitHub Desktop.
Save kotarou3/5410841 to your computer and use it in GitHub Desktop.
<?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();
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment