Previous Examples Next

Date axes support is provided through the dateAxisRenderer plugin. Date axes expand javascripts native date handling capabilities. This allow dates to be input in almost any unambiguous form, not just in milliseconds!

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.

Default Date Axis
1-Aug-2008
1-Sep-2008
1-Oct-2008
1-Nov-2008
1-Dec-2008
1-Jan-2009
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
  var line1=[['2008-08-12 4:00PM',4], ['2008-09-12 4:00PM',6.5], ['2008-10-12 4:00PM',5.7], ['2008-11-12 4:00PM',9], ['2008-12-12 4:00PM',8.2]];
  var plot1 = $.jqplot('chart1', [line1], {
    title:'Default Date Axis',
    axes:{
        xaxis:{
            renderer:$.jqplot.DateAxisRenderer
        }
    },
    series:[{lineWidth:4, markerOptions:{style:'square'}}]
  });
});

Date Axes also provide powerful formatting features. This allows custom formatter strings to be used to format axis tick labels precisely the way you want.

Customized Date Axis
Jun 16, 8 AM
Jun 30, 8 AM
Jul 14, 8 AM
Jul 28, 8 AM
Aug 11, 8 AM
Aug 25, 8 AM
Sep 8, 8 AM
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
  var line1=[['2008-06-30 8:00AM',4], ['2008-7-14 8:00AM',6.5], ['2008-7-28 8:00AM',5.7], ['2008-8-11 8:00AM',9], ['2008-8-25 8:00AM',8.2]];
  var plot2 = $.jqplot('chart2', [line1], {
      title:'Customized Date Axis',
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%b %#d, %#I %p'},
          min:'June 16, 2008 8:00AM',
          tickInterval:'2 weeks'
        }
      },
      series:[{lineWidth:4, markerOptions:{style:'square'}}]
  });
});

The charts on this page depend on the following files:

<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="../jquery.jqplot.min.css" />