Question

I am using the following snippet to display my chart :

     xaxis: {
        min: '2012-01-01 00:00:00.0',
        max: '2012-04-01 00:00:00.0',
        renderer : "$.jqplot.DateAxisRenderer",
        rendererOptions : {
           "tickRenderer" : "$.jqplot.CanvasAxisTickRenderer"
        },
        numberTicks: 4,
        showTickMarks : false,
        tickOptions:{
           angle:0,
           formatString:'%b %Y'
        }
    },

    Data :[
          ['2012-01-01 00:00:00.0', 0]
        , ['2012-02-01 00:00:00.0', 0]
        , ['2012-03-01 00:00:00.0', 0]
        , ['2012-04-01 00:00:00.0', 0]
    ]

Instead of displaying : Jan 2012, Feb 2012, Mar 2012, Apr 2012
it displays :
Jan 2012, Jan 2012, Mar 2012, Apr 2012.

On debugging further I found that second point is actually 31-Jan-2012, which on applying format displays as Jan 2012.

How can I ensure that it shows the months properly.

Thanks in advance.

Answer 1

I have noticed that you have some ‘disorder’ in your code.
The tickRenderer should be outside the rendererOptions parameter.
Also the quotes around it and around the classes of renderers are not necessary.

I am quessing that you want to have ticks each showing interval of one month?
Therefore, use tickInterval parameter instead. For example: tickInterval: "1 months"

Just like I showed in my other answer.

EDIT:
I got it sorted. Apparently there is no point of limiting the number of ticks as then they are wrongly counted. Since to benefit from tickInterval you are forced to use min and max parameters, therefore, it is only right to let the script figure out the number of ticks, right? 🙂

So to have it working the way you want just remove the line with numberTicks. It is shown here.

NOTE:
I realised why the numberTicks behaves this way. It is so because it is making the distance between the ticks equal.

We have 122 days from 1st Jan to 1st May of 2012.
If we divide the number of days by numberTicks – 1 (i.e. 4) we get 30.5. Therefore, we have 1st Jan, 31st Jan, 1st March, 31st March and 1st May.