jQPlot Date On X axis Tick Interval Isn't Working

Question

Refer to the attached image. Date strings from php in format Y-m-d are plotted on the x axis. But as you can see the more dates there are the more quashed up it is. I wanted to use the tickInterval property of jqplot but it just isn't working!

It ignores the interval entirely and just plots each and every day there is. So if i have 1000 days it becomes complete unreadable.

var plot1 = $.jqplot("analyse-bottom-left",[yValues],{
            highlighter: { show: true, tooltipAxes: 'both' },
            seriesDefaults:{
                //renderer:$.jqplot.BarRenderer,
                rendererOptions: {fillToZero: true},


            },
            axesDefaults:{
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,

            },
            legend: {
                show: true,
                placement: 'outsideGrid'
            },
            //series:seriesNames,
            axes:{
                xaxis:{
                    renderer: $.jqplot.CategoryAxisRenderer,
                    rendererOptions: { tickRenderer: $.jqplot.dateAxisRenderer },
                    ticks:xValues,
                    tickOptions:{
                        angle:30,
                        formatString:'Y-m-d'
                    },
                    tickInterval:'2 days'

                },
                yaxis:{

                    tickOptions: {formatString: '£%d'}
                }

            }    
        });

Answer 1

Your xaxis options aren't valid. You have set it as CategoryAxisRenderer and then try to set the ticks as DateAxisRenderer. This won't work because the axis itself needs to use DateAxisRenderer.

Try this:

xaxis:{
    renderer: $.jqplot.DateAxisRenderer,
    ticks: xValues,
    tickOptions:{
        angle: 30,
        formatString: '%Y-%m-%d'
    },
    tickInterval: '2 days',
    min: xValues[0]
}

---

I have created a jsfiddle to demonstrate the usage. jqPlot has many quirks - in this case to make tickInterval work you must specify the 'min' value.