Jquery flot and week numbers

Question

I made a page to plot average snowdepth by week number. Now that we entered 2010, week 1 my graph stretches the interval on the x-axis (yearweek). What I want is the weeknumber on the x-axis (51,52,1,2 etc), and a fixed intervalwidth. Anyone know how to do that?

example

<script id="source" language="javascript" type="text/javascript">
$(function () {

var d1 = [
[201001,118],[200952,112],[200951,102],[200950,97],[200949,93],
[200948,41],[200947,10],[200947,0]];

var d2 = [
[201001,33],[200952,31],[200951,31],[200950,25],[200949,23],
[200948,12],[200947,0],[200947,0]];

$.plot($("#placeholder"),
   [{data:d1,lines:{show: true},
     points:{show: true},label:"Mountain"},
    {data:d2,lines:{show: true},points:{show: true},label:"Valley"}],
    {xaxis: {tickSize:1, tickDecimals:0 }}
);

});
</script>

Answer 1

you could define a set of 'ticks' for the x-axis, and map your week numbers there

{xaxis: 
    {
        ticks: [[201001,'1'],[200952,'52'],[200951,'51'],....]
        tickSize:1, 
        tickDecimals:0
    }
}

V2 - seems to work, see the flot chart

<div id="placeholder" style="width:600px;height:300px;"></div> 
<script id="source" language="javascript" type="text/javascript">
$(function () {

var d1 = [
[200952,112],[200951,102],[200950,97],[200949,93],[200948,41],[200947,10],[200946,0]];

var d2 = [
[200952,31],[200951,31],[200950,25],[200949,23],[200948,12],[200947,0],[200946,0]];

$.plot($("#placeholder"),
   [{data:d1,lines:{show: true},
     points:{show: true},label:"Mountain"},
    {data:d2,lines:{show: true},points:{show: true},label:"Valley"}],
    {xaxis: {
        ticks: [[200952,'52'],[200951,'51'],[200950,'50'],[200949,'49'],[200948,'48'],[200947,'47'],[200946,'46']],
        tickSize:1, tickDecimals:1 }}
);

});
</script>

It seems '200947' is in your data set twice.

Answer 2

try writing a function in tickformatter that will convert the straight set into week numbers.

for example:

xaxis: {        
    tickFormatter: function suffixFormatter(val, axis) {                
        return (val.toFixed(axis.tickDecimals) + 49) % 52;
    }
}

I have not tested this code, there may be some problems with type conversion. It should take your set of (0, 1, 2, ...), and convert it to the new set (49, 50, 51, 52, 1, 2, ...), and so, when you plot your weeks, in your data, call week 49 0, and it will show up with a week. For further flexibility, you can replace the return value with return '"week" + ((val.toFixed(axis.tickDecimals) + 49) % 52);' so that your ticks display 'week 1', 'week 2', etc.

See the flot api under 'Customizing the axes' for more info.