CC-4661: Listener Statistics

- better legend for multiple series of data
- consistant number of ticks on x-axis
This commit is contained in:
James 2012-11-06 10:54:52 -05:00
parent a93b588a09
commit 2e79e8421c
3 changed files with 82 additions and 38 deletions

View File

@ -17,9 +17,14 @@ SQL;
$out = array();
foreach ($data as $d) {
$t = new DateTime($d['timestamp'], new DateTimeZone("UTC"));
$t->setTimezone(new DateTimeZone(date_default_timezone_get()));
// tricking javascript so it thinks the server timezone is in UTC
$dt = new DateTime($t->format("Y-m-d H:i:s"), new DateTimeZone("UTC"));
$d['timestamp'] = $dt->format("U");
$out[$d['mount_name']][] = $d;
}
return $out;
}
@ -43,11 +48,11 @@ SQL;
$stats_sql = "INSERT INTO cc_listener_count (timestamp_id, listener_count, mount_name)
VALUES (:timestamp_id, :listener_count, :mount_name)";
foreach ($p_dataPoints as $dp) {
$timestamp_id = Application_Common_Database::prepareAndExecute($timestamp_sql,
$timestamp_id = Application_Common_Database::prepareAndExecute($timestamp_sql,
array('ts'=> $dp['timestamp']), "column");
Application_Common_Database::prepareAndExecute($stats_sql,
array('timestamp_id' => $timestamp_id,
array('timestamp_id' => $timestamp_id,
'listener_count' => $dp["num_listeners"],
'mount_name' => $dp["mount_name"],
)

View File

@ -1,13 +1,7 @@
<div id="listenerstat_content" class="ui-widget ui-widget-content block-shadow alpha-block padded">
Timestamp vs Listener Count<br>
<select id='all_mps'>
<option value="all">All Mount Potins</option>
<?php foreach($this->mps as $mp) {?>
<option value="<?php echo $mp?>"><?php echo $mp?></option>
<?php } ?>
</select>
<div id="flot_placeholder" style="width:600px;height:300px;margin:0px 50px 0px 50px"></div>
<div id="legend" style="width:600px;height:70px;margin:0px 50px 0px 50px"></div>
<?php echo $this->date_form; ?>
</div>

View File

@ -12,43 +12,91 @@ $(document).ready(function() {
endTimestamp = AIRTIME.utilities.fnGetTimestamp(dateEndId, timeEndId);
getDataAndPlot(startTimestamp, endTimestamp);
});
listenerstat_content.find("#all_mps").change(function(){
var mpName = $(this).val();
startTimestamp = AIRTIME.utilities.fnGetTimestamp(dateStartId, timeStartId);
endTimestamp = AIRTIME.utilities.fnGetTimestamp(dateEndId, timeEndId);
getDataAndPlot(startTimestamp, endTimestamp);
getDataAndPlot(startTimestamp, endTimestamp, mpName);
})
});
function getDataAndPlot(startTimestamp, endTimestamp, mountName){
function getDataAndPlot(startTimestamp, endTimestamp){
// get data
$.get('/Listenerstat/get-data', {startTimestamp: startTimestamp, endTimestamp: endTimestamp}, function(data){
data = JSON.parse(data);
out = new Array();
out = new Object();
$.each(data, function(mpName, v){
plotData = new Array();
if (mountName != null && mpName != mountName){
console.log(mountName);
return true;
}
plotData = new Object();
plotData.data = new Array();
$.each(v, function(i, ele){
temp = new Array();
temp[0] = new Date(ele.timestamp.replace(/-/g,"/"));
temp[1] = ele.listener_count;
plotData.push(temp);
plotData.label = mpName;
var d = new Date(0);
d.setUTCSeconds(ele.timestamp);
plotData.data.push([d, ele.listener_count]);
})
out.push(plotData);
out[mpName] = plotData;
});
if (out.length == 0) {
out.push(new Array());
}
plot(out);
})
}
function plot(d){
function plot(datasets){
data = null;
function plotByChoice(doAll)
{
// largest date object that you can set
firstTimestamp = new Date(8640000000000000);
// smallest
lastTimestamp = new Date(0);
data = [];
if (doAll != null)
{
$.each(datasets, function(key, val) {
if (firstTimestamp.getTime() > val.data[0][0].getTime()) {
firstTimestamp = val.data[0][0];
}
if (lastTimestamp.getTime() < val.data[val.data.length-1][0].getTime()) {
lastTimestamp = val.data[val.data.length-1][0];
}
data.push(val);
});
}
else
{
$('#legend .legendCB').each(
function(){
if (this.checked)
{
data.push(datasets[this.id]);
}
else
{
data.push({label: this.id, data: []})
}
}
);
}
numOfTicks = 10;
tickSize = (lastTimestamp.getTime() - firstTimestamp.getTime())/1000/numOfTicks;
$.plot($("#flot_placeholder"), data, {
yaxis: { min: 0, tickDecimals: 0 },
xaxis: { mode: "time", timeformat:"%y/%m/%0d %H:%M", tickSize: [tickSize, "second"] },
legend: {
container: $('#legend'),
noColumns: 5,
labelFormatter: function (label, series) {
var cb = '<input style="float:left;" class="legendCB" type="checkbox" ';
if (series.data.length > 0){
cb += 'checked="true" ';
}
cb += 'id="'+label+'" /> ';
cb += label;
return cb;
}
}
});
$('#legend').find("input").click(function(){setTimeout(plotByChoice,100);});
}
plotByChoice(true);
oBaseDatePickerSettings = {
dateFormat: 'yy-mm-dd',
onSelect: function(sDate, oDatePicker) {
@ -67,7 +115,4 @@ function plot(d){
listenerstat_content.find(timeStartId).timepicker(oBaseTimePickerSettings);
listenerstat_content.find(dateEndId).datepicker(oBaseDatePickerSettings);
listenerstat_content.find(timeEndId).timepicker(oBaseTimePickerSettings);
$.plot($("#flot_placeholder"), d, { xaxis: { mode: "time", timeformat: "%y/%m/%0d %H:%M:%S" } });
}
}