jQuery flot: graphTable plugin how to show months

I am busy with my statics and now I want to show some months instead of numbers. But when I put some names of months in the table the statics are going crazy.

When you use numbers everything works ok, but I want to use numbers and months in the x-axis.

I hope someone开发者_运维问答 can help me.

I'm fed up with the way FLOT handles timestamps. The automatick tick generator messes about too much (see my last comment above). Much better to do your own thing. Convert the month names to an offset in a "months" array, then use:

xaxis: {tickSize: 1; tickFormatter: function(v, a) {return months[v]}}

to get the x-axis you want.

$("table.statics-date").each(function() {
    var colors = [];
    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    $("table.statics-date thead th:not(:first)").each(function() {
        colors.push($(this).css("color"));
    });
    $(this).graphTable({
        series: 'columns',
        position: 'replace',
        height: '200px',
        colors: colors,
        xaxisTransform: function(month) {
            var i=0; 
            while ((i < 12) && (month != months[i])){i++}
            return i;
        }
    }, {
        xaxis: {
            tickSize: 1,
            tickFormatter: function(v, a) {return months[v]}
       }
    });
});

You'll have to mess about a bit when you gover a year end (Dec -> Jan), but the code isn't too difficult.

See my JSFIDDLE of this at: http://jsfiddle.net/G4TJ3/6/ Regards Neil

You need to include an "xaxisTransform" option to the graphTable options and add a second parameter which is an "xaxis" option to "flot" itself. Basically you have to convert the month names to a timestamp to be plotted, then convert the timestamp back to a month for the x-axis.

Tour call to graphTable should be something like:

$(this).graphTable({
    series:        'columns',
    position:      'replace',
    height:        '200px',
    colors:         colors,
    xaxisTransform: function(month){return Date.parse(month + ' 1, 1970');}
   }
   ,
   {
    xaxis: {
            mode:       'time',
            timeformat: '%b'
           }
   } 
);

I already checked this in your JSFIDDLE and it works.

You don't have to use timestamps. You could supply your own functions, e.g. the xaxisTransform could just convert the month name to an offset [0-11], while for the flot option you would use instead:

    xaxis: {
            transform: function(monthOffset){return ..monthname as a string..;}
           }

ACTUALLY THAT LAST BIT IS WRONG, I THINK IT SHOULD BE 'transform' AND 'inverseTransform'. Regards Neil

I am using timeformat:"%d %b %y" as stated in flot official docs

%a: weekday name (customizable)
%b: month name (customizable)
%d: day of month, zero-padded (01-31)
%e: day of month, space-padded ( 1-31)
%H: hours, 24-hour time, zero-padded (00-23)
%I: hours, 12-hour time, zero-padded (01-12)
%m: month, zero-padded (01-12)
%M: minutes, zero-padded (00-59)
%q: quarter (1-4)
%S: seconds, zero-padded (00-59)
%y: year (two digits)
%Y: year (four digits)
%p: am/pm
%P: AM/PM (uppercase version of %p)
%w: weekday as number (0-6, 0 being Sunday)

jsfiddle link