jqPlot resizing

Question

Tell me if anyone encountered this problem:

I show on my page plot using jqPlot

<script language="javascript" type="text/javascript">

    $(document).ready(function () {
            $.jqplot.config.enablePlugins = true;
            var chLines = [[['09/30/2010 00:00:00',24.13],['12/31/2010 00:00:00',28.26],['03/31/2011 00:00:00',24.00],['06/30/2011 00:00:00',25.35],['09/30/2011 00:00:00',26.26],['12/31/2011 00:00:00',29.71]]];
            var chSeries = [{       color: '#436277',       label: 'label'  }];
        var mnth;
        var quarter;

        $.jqplot.DateTickFormatter = function(format, val) {
            if (!format) {
                format = '%Y/%m/%d';
            }       

            if(format == '%Q') {
                mnth = $.jsDate.strftime(val, '%#m');
                quarter = parseInt((mnth-1) / 3) + 1;
                return $.jsDate.strftime(val, '%Y') + 'Q' + quarter;
            }
            return $.jsDate.strftime(val, format);
        };

        //$.jqplot.DateAxisRenderer.tickInterval = 86400000*32*3;

        var plot = $.jqplot('content-chart', chLines,
            {
                //animate: !$.jqplot.use_excanvas, // Only animate if we're not using excanvas (not in IE 7 or IE 8)..           
                axes: {
                    xaxis: {
                        tickInterval: 86400000*32*3,
                        renderer: $.jqplot.DateAxisRenderer,
                        borderColor: 'black',
                        borderWidth: 0.5,
                        tickOptions: {
                            showGridline: false,
                            //formatString: '%b %Y',
                            formatString: '%Q',
                            textColor: 'black',
                            fontSize: '11px',
                        }
                    },
                    yaxis: {
                        min: 0,
                        tickOptions: {
                            formatString: '%.2f',
                            textColor: 'black',
                            fontSize: '11px'
                        }
                    }
                },
                highlighter: {
                    show: true,
                    sizeAdjust: 7.5
                },
                seriesDefaults: {
                    lineWidth: 3
                },

                series: chSeries,
                legend: {
                    show: true,
                    location: 'sw',//compass direction, nw, n, ne, e, se, s, sw, w.
                    xoffset: 5,
                    yoffset: 5
                    //placement: 'outside'
                },

                grid:{
                    background: 'white',
                    borderColor: 'white',
                    shadow: false,
                    gridLineColor: '#999999'
                }
            });
            $(window).bind('resize', function(event, ui) {              
                plot.replot( { resetAxes: true } );
            });
    });
</script>

I see that the tick labels are duplicated on the X axis

but when window are resized this.tickInterval object in the jqplot.dateAxisRenderer.js in createTicks function become is null. Also I tried to change code in the function createTicks looks like this

this.tickInterval = 86400000 * 32 * 3;
var tickInterval = this.tickInterval;

but unfortunately the tick labels are beginning to run into each other when the window is resized.

Answer 1

To sort out your problem you must first set the 'min' and 'max' dates for the date axis (i.e. axis X). Apparently only when the 'min' and 'max' values are set the renderer will use the value of 'tickInterval'. That sort of problem was actually already solved on stack --- please see this answer.

Therefore using this suggestion you will need to set the following parameters as below:

tickInterval: "3 months",   
min: chLines[0][0][0],
max: chLines[0][0][chLines[0].length-1]

As it goes for the resizing bit you need to use the below:

$(window).bind('resize', function(event, ui) {    
    if (plot) {
        plot.replot();
    }
});

Here is a working code sample made for your code.

---

EDIT: After fiddling with the sample for a while I observed that there was still a little bit of a problem thought not visible cause the format was covering it. As it appears the setting of min, max and tickInterval is not enough as the values are still not every 3 months as each tick shows 30th day and it should sometimes be 31.

The only solution then I figured out was to set the ticks myself. In this case you do not need min, max and tickInterval any more.

Answer 2

For me updating jqplot solved the issue with tick labels running into each other, to address the problem of tickinterval not working see the accepted answer here:

jqPlot DateAxis tickInterval not working