jQuery and browser time zone

generally everyone has a browser time zone.

var timezoneOffset = -(new Date().getTimezoneOffset());

like mime is 480.

I want add a simple class="date" to time span, then it will add time zone automatically. (MySQL DateTime format for now. I'll use it in my Foorum)

it's a sample html: http://www.fayland.org/jQuery/dateTimeZone.html

it will convert <span class='date'>2007-11-05 12:20:30</span> to 2007-11-05 20:20:30 in my browser.

$(function() {
    // follows are copied from datePicker/date.js
    // utility method
    var _zeroPad = function(num) {
        var s = '0'+num;
        return s.substring(s.length-2)
        //return ('0'+num).substring(-2); // doesn't work on IE :(
    };
    
   $(".date").each(function (i) {
        var s = $(this).text();
        var f = this.id; //format
        if (! f) {
            f = 'yyyy-mm-dd hh:ii:ss';
        }
        
        var d = new Date(1997, 1, 1, 1, 1, 1);
        var iY = f.indexOf('yyyy');
        if (iY > -1) {
            d.setFullYear(Number(s.substr(iY, 4)));
        }
        var iM = f.indexOf('mm');
        if (iM > -1) {
            d.setMonth(Number(s.substr(f.indexOf('mm'), 2)) - 1);
        }
        d.setDate(Number(s.substr(f.indexOf('dd'), 2)));    
        d.setHours(Number(s.substr(f.indexOf('hh'), 2)));
        d.setMinutes(Number(s.substr(f.indexOf('ii'), 2)));
        d.setSeconds(Number(s.substr(f.indexOf('ss'), 2)));
        
        var timezoneOffset = -(new Date().getTimezoneOffset());
        d.setMinutes(d.getMinutes() + timezoneOffset);

        var t = f
            .split('yyyy').join(d.getFullYear())
            .split('mm').join(_zeroPad(d.getMonth()+1))
            .split('dd').join(_zeroPad(d.getDate()))
            .split('hh').join(_zeroPad(d.getHours()))
            .split('ii').join(_zeroPad(d.getMinutes()))
            .split('ss').join(_zeroPad(d.getSeconds()))
            ;
        
        $(this).text(t);
   } );
});

Enjoy!

jQuery Flot For Daily Chart in Foorum

I know Google just release his Chart days ago. it's powerful, more than jQuery flot.

but I still want to use flot because it's simpler. yet badly it's not supporting day as its X. like 20071131 is next to 20071201, not far away as treated in flot.

Foorum has a feature that it will record the count of some tables every day. we have a table named 'stat', and columns are "stat_id", "stat_key", "stat_value", "date". so somehow we would have something like
20071201 user_counts 510
20071202 user_counts 640
then go on.
we use a cron script to collect those data.

data is not so straight for human being. we need CHART.
so I just make vars from stat table like:

stats => {
    user_counts => {
        20071201 => 510,
        20071202 => 640,
        20071203 => ...

then we use a TT file to create a HTML file.

$(function () {

    [% i = 0 %]
    [% FOREACH ctype IN stats.keys %]
    
    $('body').append("<h2>[% ctype %]</h2><div class='placeholder' id='placeholder[% i %]' style='height:300px;'></div>");
    
    var d[% i %] = [];
    
    [% FOREACH key IN stats.${ctype}.keys.sort %]
    
    d[% i %].push([[% key %], [% stats.${ctype}.$key %]]);
    
    [% END %]
    
    $.plot($("#placeholder[% i %]"), [
        {
            data: d[% i %],
            lines: { show: true },
            points: { show: true }
        }
    ]);
    [% i = i + 1 %]
    [% END %]
});

more details @
http://fayland.googlecode.com/svn/trunk/Foorum/lib/Foorum/TheSchwartz/Worker/DailyChart.pm
http://fayland.googlecode.com/svn/trunk/Foorum/templates/stats/chart.html

@Enjoy;