CODEWITHSUNDEEP
javascriptjqueryjqplot
Chris B
Chris B

Reputation: 709

jqPlot DateAxis tickInterval not working

I'm trying to draw a chart with a single datapoint each month. I'm sending this through to jqPlot as a single point on the first of each month:

$.jqplot('actualChart', [[['2011-10-01',0.296],['2011-11-01',0.682]]], {
    title: programSelection.options[programSelection.selectedIndex].text,
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
            tickOptions: { formatString: '%b' }
        }
    }
}

I'm loading the chart data using Ajax. Some datasets have more points of data than others - in the example above with only 2 points, the x-axis ticks (which '%b' means just appear as Oct and Nov) are rendered automatically along the axis, but too often, e.g. Sep...Oct...Oct...Oct...Oct...Nov - at regular points along the line that is shown. I just want a single tick at the start of Oct and another at the start of Nov.

I have spent a lot of time searching and it seems tickInterval is made for this, but adding

tickInterval: '1 month'

just makes the x-axis, datapoints and line disappear - this is the broken functionality I'm referring to! Specifying any other interval e.g.

tickInterval: '2 days'

also breaks it.

A workaround is to provide the ticks manually, e.g.

ticks: ['2011-10-01','2011-11-01']

This does put the ticks in the right place, but

a) is a hassle that should not be required, and

b) loses the nice padding at either end of the graph's datapoints, so the points at either end appear on the edges of the graph. Unless manual ticks either side are added, of course, but in the Oct-Nov example above I don't want to provide a whole month on either side because then the interesting data takes up only the middle third of the graph.

Can anyone help me with this? Thanks in advance.

EDIT - found a solution: Providing a min attribute for the axis does appear to fix this (for whatever reason... bug?), so unless anyone has any better ideas I'll do this!

Upvotes: 11

Views: 19081

Answers (5)

KunalC
KunalC

Reputation: 544

tickInterval:'1 day' works. You can try:

xaxis: {
        renderer: $.jqplot.DateAxisRenderer,
        rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
        tickOptions: { formatString: '%b' },
        tickInterval: '1 day'
       }

Upvotes: 8

GuySoft
GuySoft

Reputation: 1723

I found a solution! You need to specify the tickinterval as a javascript timestamp. So lets say you want 1 hour. That would be 1000*60*60 = 3600000 (javascript timestamps are in milliseconds).

So you would write: tickInterval:'3600000',

Works here.

Upvotes: 14

dunno
dunno

Reputation: 49

I looked into the jqplot.dateAxisRenderer.js, and it looks like the reset function needs to be called in order for the this.tickInterval variable to get set. I vaguely recall that you can manually reset the renderer, but do note that tick interval is specified in the millisecond format (at least, I didn't catch any translation with my quick glance).

I think this is just a bug.

And on a side note, I commented out the only min.getUtcOffset() call in the function, since it was introducing unwanted "drift" (I want local time), and causes the graph to get chopped off on the left.

Upvotes: 1

AdrianoRR
AdrianoRR

Reputation: 1131

You should specify a timestamp on your plot data. As noted on jqplot example of Date Axes:

Note, although jqPlot will parse most any human readable date, it is safest to use javascript time stamps when possible. Also, it is best to specify a date and time and not just a date alone. This is due to inconsistent browser handling of local time vs. UTC with bare dates.

You can check it here: http://www.jqplot.com/deploy/dist/examples/date-axes.html

I'm mentioning it because i've stumbled upon this problem 2 days ago. I solved it by passing a timestamp and defining a greater tickInterval than '1 day'.

Upvotes: 1

Joris
Joris

Reputation: 6306

Since I think you cannot answer your own question (and I ran in to the same problem), i'll post your solution as answer, as it solved it on my side too:

Providing a min attribute for the axis does appear to fix this (for whatever reason... bug?), so unless anyone has any better ideas I'll do this!

Upvotes: 6

Related Questions