JQ plot does not display Months properly

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.

Can you please provide a jsfiddle sample (http://jsfiddle.net) showing your problem? BTW I think you miss typed at 'Instead of displaying : Jan 2012, Feb 2012, Mar 2012, Apr 2012 it displays : Jan 2012, Feb 2012, Mar 2012, Apr 2012.' as they are both the same. — Boro, Apr 26 '12 at 17:19

score 0 · Accepted Answer · edited May 23 '17 at 10:34

0

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.

edited May 23 '17 at 10:34

Community

1
1

answered Apr 26 '12 at 17:31

Boro

7,913
4
43
85

Thanks for your input, I tried the tickInterval attribute, but it did not work. I have put up the stuff on jsfiddle : http://jsfiddle.net/ashim_mishra/RPnkZ/ Please tell me whats that I am doing wrong. Also if you notice, the Feb point is actually 31-Jan-2012. – Ashim Apr 30 '12 at 08:23
@Ashim Please see my EDIT. I understand this is what you wanted, right? :) – Boro Apr 30 '12 at 08:56
Thanks a lot Boro, for the solution and the accurate analysis. – Ashim Apr 30 '12 at 14:20
hey i am getting the same problem even if i remove the number of ticks – neel shah Jan 09 '15 at 07:38
@neelshah Show a jsfiddle showing your problem or best compose a new question to have more people look at your problem. In the code linked in my answer, which I just tested in Firefox a second ago, all works as expected. Look at the code and see how it differs from yours; otherwise the different behaviour might be as your API is newer. All the Best. – Boro Jan 09 '15 at 10:38

JQ plot does not display Months properly

1 Answers1