Question

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!

Answer 1

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.