The developers could implement this frontend by jquery. Just let the user choose his timezone by a dropdown, and transfer the time stamps on the graphs.
Momentjs is great for converting timestamps.
The time stamps are put in tspan:
<tspan x="0" dy=".71em" dx="0">07:51 AM</tspan>
Jquery to get the AM/PM timestamps with the current DOM:
$('tspan:contains("AM"), tspan:contains("PM")').each( function(){
console.log($(this).text())
});
And now we could use the magic of momentjs:
$.getScript( "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js" );
$.getScript( "https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.5/moment-timezone.min.js" )
.done(function( script, textStatus ) {
$('tspan:contains("AM"), tspan:contains("PM")').each( function(){
var time_am_pm = $(this).text();
var dt_hour = moment(time_am_pm, ["h:mm A"]).format("HH");
var dt_min = moment(time_am_pm, ["h:mm A"]).format("mm");
var now = moment();
var date = now.set({ hour: parseInt(dt_hour, 10), minute: parseInt(dt_min , 10) }).toDate();
// not working:
// var usertimezone = 'Europe/Berlin';
// var newtime = moment(date).tz(usertimezone ).format('HH:mm');
// hour offset - use what you need here!
var newtime = moment(date).add(2, 'hours').format('HH:mm');
$(this).text(newtime);
});
});
Before: http://i.imgur.com/f0qjoZ0.png
Afterwards: http://i.imgur.com/1CGND8X.png
Bookmarklet:
You can create a bookmarklet that does the job:
- Create a link.
- Edit the link and replace the URL with this one liner:
javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="https://code.jquery.com/jquery-latest.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){ $.getScript( "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js" ); $.getScript( "https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.5/moment-timezone.min.js" ).done(function( script, textStatus ) { $('tspan:contains("AM"), tspan:contains("PM")').each( function(){ var time_am_pm = $(this).text(); var dt_hour = moment(time_am_pm, ["h:mm A"]).format("HH"); var dt_min = moment(time_am_pm, ["h:mm A"]).format("mm"); var now = moment(); var date = now.set({ hour: parseInt(dt_hour, 10), minute: parseInt(dt_min , 10) }).toDate(); var newtime = moment(date).add(2, 'hours').format('HH:mm');$(this).text(newtime); }); }); });
Click the link when you are on Digital Ocean’s graph site!
I also want to be able to change the timezone!
I also need this
I agree, this would be a great feature.
my brain work better with local time too. it is not easy to read with GMT time.
Really would like to see this implemented as well. One would think the default at least would match where the data center is. If I’ve got a NYC droplet, I’d expect it to be in ET.
Why not pull the time set on the server as the time for the graph? That way devs can set the time on the server and have it reflect usage stats in a personal to server manner.