Here's a version that just changes the timezone offset on the query string. You'll need to make a small adjustment to your script, currently you accept the offset as ?<offset>, can you change that to take ?offset=<offset> instead? That should enable the below to work fine with your biznezz.
Code: Select all
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- BT - Added to support user's local timezone.
http://www.pageloom.com/automatic-timezone-detection-with-javascript -->
<script type="text/javascript" src="http://cdn.bitbucket.org/pellepim/jstimezonedetect/downloads/jstz.min.js"></script>
<!-- BT - Added to support display of user's local timezone. -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
// http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/
jQuery.extend({
parseQuerystring: function(){
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
$.each(pairs, function(i, v){
var pair = v.split('=');
nvpair[pair[0]] = pair[1];
});
return nvpair;
}
});
// http://www.mresoftware.com/simpleDST.htm
function isLocalTimeDST()
{
var today = new Date;
var yr = today.getFullYear();
var jan = new Date(yr,0); // January 1
var jul = new Date(yr,6); // July 1
// northern hemisphere test
if (jan.getTimezoneOffset() > jul.getTimezoneOffset() && today.getTimezoneOffset() != jan.getTimezoneOffset()){
return true;
}
// southern hemisphere test
if (jan.getTimezoneOffset() < jul.getTimezoneOffset() && today.getTimezoneOffset() != jul.getTimezoneOffset()){
return true;
}
// if we reach this point, DST is not in effect on the client computer.
return false;
}
// BT - Use jstz to get user's local timezone (see comment above about jstz).
var timezone = jstz.determine();
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Hour','Weekday Avg','Saturday Avg','Sunday Avg'],
['0:00',4.1,8.4,5.5],['1:00',2.4,7.4,5.8],['2:00',1.5,5.0,5.5],['3:00',1.5,3.4,3.8],['4:00',0.9,2.8,2.8],['5:00',1.0,2.8,3.8],['6:00',1.4,3.6,2.8],['7:00',1.7,5.2,4.5],['8:00',2.6,6.6,4.2],['9:00',3.0,5.2,7.0],['10:00',3.4,5.6,8.0],['11:00',3.9,8.2,6.0],['12:00',4.9,11.4,9.5],['13:00',6.1,13.4,12.2],['14:00',7.3,15.8,23.0],['15:00',9.1,13.2,24.2],['16:00',8.4,11.8,14.0],['17:00',6.6,12.0,12.2],['18:00',6.7,9.0,10.8],['19:00',8.0,7.8,6.8],['20:00',9.7,10.2,6.2],['21:00',10.8,9.8,7.8],['22:00',11.1,8.0,6.8],['23:00',8.0,5.2,6.0]
]);
var options = {
curveType: 'function',
backgroundColor: {fill:'transparent'},
title: 'Allegiance Player Playing Patterns (past 30 days)',
vAxis: {title: '# of players', textPosition: 'none'},
hAxis: {title: 'Hour (UTC-5)', gridlines: {color: '#333', count: 24}, slantedText: true, slantedTextAngle: 90, showTextEvery: 1, textStyle: {color: 'black', fontName: 'Arial', fontSize: 12} }
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// BT - Setup drop down with timezone options.
$(document).ready(function()
{
var squadGameTime = new Date();
for(var i = squadGameTime.getUTCDay(); i != 0; i = squadGameTime.getUTCDay())
squadGameTime.setUTCDate(squadGameTime.getUTCDate() + 1);
squadGameTime.setUTCHours(19);
squadGameTime.setUTCMilliseconds(0);
squadGameTime.setUTCMinutes(0);
squadGameTime.setUTCSeconds(0);
$("#spanSquadGameTime").html(squadGameTime.toString());
// BT: Add timezone selection dropdown.
var currentTimezoneName = jstz.determine().name();
var queryString = $.parseQuerystring();
if(typeof(queryString["timezoneName"]) != "undefined")
currentTimezoneName = queryString["timezoneName"];
var currentTimezoneOffset;
var $ddlTimezone = $("#ddlTimezone");
$.each(jstz.olson.timezones, function(offsetMinutesList, zoneName)
{
var offsetMinutes = parseInt(offsetMinutesList.split(",")[0]);
// Ignore any .5 timezones, they will just have to pick a neighbor timezone.
// .5 timezones messes up the date shifter, and the graph legend, etc.
if(offsetMinutes % 60 == 0)
{
// If the local machine is obeying DST, and the timezone has an olson DST start date
// we'll pretend that the timezone should be shown with the DST offset.
var isDST = false;
if(jstz.olson.dst_start_dates[zoneName] != null && isLocalTimeDST() == true)
{
offsetMinutes += 60;
isDST = true;
}
var offsetHours = offsetMinutes / 60;
var offsetString = "UTC";
if(offsetHours >= 0)
offsetString += "+"
offsetString += offsetHours;
var currentStringLength = offsetString.length;
for(var i = 0; i < (10 - currentStringLength); i++)
offsetString += " ";
var selected = "";
if(currentTimezoneName == zoneName)
{
selected = "selected"
currentTimezoneOffset = offsetHours;
}
var isDSTString = "";
if(isDST == true)
isDSTString = " (DST)"
$ddlTimezone.append($("<option " + selected + " />").val(offsetHours).html(offsetString + zoneName + isDSTString));
$("#ddlTimezone option:last-child").attr("timezoneName", zoneName);
}
});
$ddlTimezone.change(function()
{
var offset = $("#ddlTimezone option:selected").val();
var timezoneName = $("#ddlTimezone option:selected").attr("timezoneName");
window.location.href = window.location.href.substring(0, window.location.href.length - window.location.search.length) + "?offset=" + offset + "&timezoneName=" + escape(timezoneName);
});
updateSquadgameTime(currentTimezoneOffset, currentTimezoneName);
});
function updateSquadgameTime(timezoneOffsetHours, timezoneName)
{
var squadGameTime = new Date();
for(var i = squadGameTime.getUTCDay(); i != 0; i = squadGameTime.getUTCDay())
squadGameTime.setUTCDate(squadGameTime.getUTCDate() + 1);
squadGameTime.setUTCHours(19 + timezoneOffsetHours);
squadGameTime.setUTCMilliseconds(0);
squadGameTime.setUTCMinutes(0);
squadGameTime.setUTCSeconds(0);
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
var squadGameHours = squadGameTime.getUTCHours ( );
var squadGameMonth = month[squadGameTime.getUTCMonth()];
var squadGameDay = squadGameTime.getUTCDate ( );
var squadGameYear = squadGameTime.getUTCFullYear ( );
$("#spanSquadGameTime").html(
squadGameMonth + " " +
squadGameDay + ", " +
squadGameYear + " " + squadGameHours + ":00:00 (" + timezoneName + ")");
}
</script>
</head>
<body>
<!-- BT: Cause the select to be centered. -->
<div style="display: inline-block; text-align: center;">
<div id="chart_div" style="width: 1100px; height: 500px;"></div>
<select id="ddlTimezone" style="font-family: monospace"></select>
</div>
<h3>Next Squad Game Time: <span id="spanSquadGameTime"></span></h3>
<pre>
Special thanks to these contributors:
BackTrak - client side timezone shifting
and all the folks who provided feedback (and convinced me to graph it) on this <a href="http://www.freeallegiance.org/forums/index.php?showtopic=66568">thread</a>
other versions of this program
<a href="http://spathiwa.com/cgi-bin/pp.pl">original table version</a> (only shows 1 week's worth of data)
<a href="http://spathiwa.com/pp/">timezone adjustment at input + timezone autodetect</a> (uses monthly set of data)
<a href="http://spathiwa.com/cgi-bin/tz_mpp2.pl">centered around sg time (19:00 UTC on Sunday = midnight)</a> (uses monthly set of data)
</pre>
</body>
</html>