Question

I’m having a problem with my jqplot graph.

<script type="text/javascript" src="/js/jplot/jquery.jqplot.min.js"></script> 
<script type="text/javascript" src="/js/jplot/plugins/jqplot.dateAxisRenderer.min.js"></script> 


<script type="text/javascript" > 
$(document).ready(function(){
    var data = [["25 August 2002", 299.75],["02 September 2002", 1511.22],["02 October 2002", 1967.00],["01 November 2002", 2335.80],["02 December 2002", 2008.15],["02 January 2003", 4579.52],["02 February 2003", 5253.98],["07 March 2003", 5491.12],["01 April 2003", 8937.26],["08 May 2003", 16520.95],["01 June 2003", 13725.03],["01 July 2003", 22800.12],["11 August 2003", 34828.20],["01 September 2003", 48176.53],["01 October 2003", 57216.98],["01 November 2003", 45644.96],["01 December 2003", 50927.94],["01 January 2004", 51279.52],["01 February 2004", 41711.34],["01 March 2004", 49790.00],["01 April 2004", 49686.61],["01 May 2004", 40634.78],["22 August 2004", 16889.98],["01 September 2004", 41684.68],["29 June 2006", 151.55],["25 March 2008", 469.75],["17 July 2008", 159.90],["04 August 2008", 719.55],["11 December 2009", 94.00],["01 December 2010", 449.95],["01 April 2011", 449.95],["01 June 2012", 4529.40]];
    var plot1 = $.jqplot('chartdiv', [data],
        {
            axes:{
                yaxis:{
                    label: 'Subs. Revenue',
                    tickOptions:{
                        formatString:'R%.2f'
                    },
                    min: 0

                },
                xaxis:{
                    label: 'Period',
                    renderer:$.jqplot.DateAxisRenderer,
                    tickOptions:{
                        formatString:'%b-%y'
                    },
                    pad: 1.2
                }
            }
        }
)
});
</script> 
<div id="chartdiv" style="height:600px;width:1000px; "></div> 

When I view the graph, it just shows the xaxis points as “Jan 01”, “Jan 02”, “Jan 03”, etc. Any reason why this is happening?

EDIT Attached a img to show whats wrong.

Answer 1

Considering your comment I think you want %b-%Y rather than the %b-%y.

A code sample showing the use of ‘%b-%Y’.

Also for all supported format types please see. You could also notice that the provided code sample shows how to add your custom date format, just use ‘%Q’ as the formatString to see how it works.