What timezone are the usage graphs for a droplet?

Question

When I log into the dashboard for drop lets, select a drop and view the graphs for bandwidth, cpu and disk. It doesn’t match my EST timezone.

Is there a way to change this so that the graphs are shown in EST?

Mike · Accepted Answer

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!