A plugin for a jqPlot to render an axis as a series of date values.  This renderer has no options beyond those supplied by the Axis class.  It supplies it’s own tick formatter, so the tickOptions.formatter option should not be overridden.

Thanks to Ken Synder for his enhanced Date instance methods which are included with this code http://kendsnyder.com/sandbox/date/.

To use this renderer, include the plugin in your source

<script type="text/javascript" language="javascript" src="plugins/jqplot.dateAxisRenderer.js"></script>

and supply the appropriate options to your plot

{axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}}

Dates can be passed into the axis in almost any recognizable value and will be parsed.  They will be rendered on the axis in the format specified by tickOptions.formatString.  e.g. tickOptions.formatString = ‘%Y-%m-%d’.

Accecptable format codes are:

Code    Result                  Description
            == Years ==
%Y      2008                Four-digit year
%y      08                  Two-digit year
            == Months ==
%m      09                  Two-digit month
%#m     9                   One or two-digit month
%B      September           Full month name
%b      Sep                 Abbreviated month name
            == Days ==
%d      05                  Two-digit day of month
%#d     5                   One or two-digit day of month
%e      5                   One or two-digit day of month
%A      Sunday              Full name of the day of the week
%a      Sun                 Abbreviated name of the day of the week
%w      0                   Number of the day of the week (0 = Sunday, 6 = Saturday)
%o      th                  The ordinal suffix string following the day of the month
            == Hours ==
%H      23                  Hours in 24-hour format (two digits)
%#H     3                   Hours in 24-hour integer format (one or two digits)
%I      11                  Hours in 12-hour format (two digits)
%#I     3                   Hours in 12-hour integer format (one or two digits)
%p      PM                  AM or PM
            == Minutes ==
%M      09                  Minutes (two digits)
%#M     9                   Minutes (one or two digits)
            == Seconds ==
%S      02                  Seconds (two digits)
%#S     2                   Seconds (one or two digits)
%s      1206567625723       Unix timestamp (Seconds past 1970-01-01 00:00:00)
            == Milliseconds ==
%N      008                 Milliseconds (three digits)
%#N     8                   Milliseconds (one to three digits)
            == Timezone ==
%O      360                 difference in minutes between local time and GMT
%Z      Mountain Standard Time  Name of timezone as reported by browser
%G      -06:00              Hours and minutes between GMT
            == Shortcuts ==
%F      2008-03-26          %Y-%m-%d
%T      05:06:30            %H:%M:%S
%X      05:06:30            %H:%M:%S
%x      03/26/08            %m/%d/%y
%D      03/26/08            %m/%d/%y
%#c     Wed Mar 26 15:31:00 2008  %a %b %e %H:%M:%S %Y
%v      3-Sep-2008          %e-%b-%Y
%R      15:31               %H:%M
%r      3:31:00 PM          %I:%M:%S %p
            == Characters ==
%n      \n                  Newline
%t      \t                  Tab
%%      %                   Percent Symbol
Summary
$.jqplot.DateAxisRendererA plugin for a jqPlot to render an axis as a series of date values.
Properties
tickRendererA class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer.
tickInsetControls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval.
drawBaselineTrue to draw the axis baseline.
baselineWidthwidth of the baseline in pixels.
baselineColorCSS color spec for the baseline.

Properties

tickRenderer

A class of a rendering engine for creating the ticks labels displayed on the plot, See $.jqplot.AxisTickRenderer. this.tickRenderer = $.jqplot.AxisTickRenderer; this.labelRenderer = $.jqplot.AxisLabelRenderer;

tickInset

this.tickInset = 0

Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval.  0 is no inset, 0.5 is one half a tick interval, 1 is a full tick interval, etc.

drawBaseline

this.drawBaseline = true

True to draw the axis baseline.

baselineWidth

this.baselineWidth = null

width of the baseline in pixels.

baselineColor

this.baselineColor = null

CSS color spec for the baseline.

A “tick” object showing the value of a tick/gridline on the plot.
this.tickInset = 0
Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval.
this.drawBaseline = true
True to draw the axis baseline.
this.baselineWidth = null
width of the baseline in pixels.
this.baselineColor = null
CSS color spec for the baseline.
An individual axis object.
Close