1 <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
3 <html><head><title>$.jqplot.DateAxisRenderer
</title><link rel=
"stylesheet" type=
"text/css" href=
"../../styles/main.css"><script language=JavaScript
src=
"../../javascript/main.js"></script><script language=JavaScript
src=
"../../javascript/searchdata.js"></script></head><body class=
"ContentPage" onLoad=
"NDOnLoad()"><script language=JavaScript
><!--
4 if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>
6 <!-- Generated by Natural Docs, version 1.4 -->
7 <!-- http://www.naturaldocs.org -->
9 <!-- saved from url=(0026)http://www.naturaldocs.org -->
14 <div id=Content
><div class=
"CClass"><div class=CTopic id=MainTopic
><div class=
"CTitle logo"><div class=
"nav"><a class=
"nav" href=
"../../../index.php"><span>></span>Home
</a><a class=
"nav" href=
"../../../tests/"><span>></span>Examples
</a><a class=
"nav" href=
"../../../docs/"><span>></span>Docs
</a><a class=
"nav" href=
"http://bitbucket.org/cleonello/jqplot/downloads/"><span>></span>Download
</a><a class=
"nav" href=
"../../../info.php"><span>></span>Info
</a><a class=
"nav" href=
"../../../donate.php"><span>></span>Donate
</a></div><a name=
"$.jqplot.DateAxisRenderer"></a>$.jqplot.
<wbr>DateAxisRenderer
</div><div class=CBody
><p>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
<a href=
"../jqplot-core-js.html#Axis" class=LClass id=link6
onMouseOver=
"ShowTip(event, 'tt6', 'link6')" onMouseOut=
"HideTip('tt6')">Axis
</a> class.
It supplies it
’s own tick formatter, so the tickOptions.formatter option should not be overridden.
</p><p>Thanks to Ken Synder for his enhanced Date instance methods which are included with this code
<a href=
"http://kendsnyder.com/sandbox/date/" class=LURL target=_top
>http://kendsnyder.com/sandbox/date/
</a>.
</p><p>To use this renderer, include the plugin in your source
</p><blockquote><pre><script type=
"text/javascript
" language=
"javascript
" src=
"plugins/jqplot.dateAxisRenderer.js
"></script
></pre></blockquote><p>and supply the appropriate options to your plot
</p><blockquote><pre>{axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}}
</pre></blockquote><p>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
’.
</p><p>Accecptable format codes are:
</p><blockquote><pre>Code Result Description
16 %Y
2008 Four-digit year
20 %#m
9 One or two-digit month
21 %B September Full month name
22 %b Sep Abbreviated month name
24 %d
05 Two-digit day of month
25 %#d
5 One or two-digit day of month
26 %e
5 One or two-digit day of month
27 %A Sunday Full name of the day of the week
28 %a Sun Abbreviated name of the day of the week
29 %w
0 Number of the day of the week (
0 = Sunday,
6 = Saturday)
30 %o th The ordinal suffix string following the day of the month
32 %H
23 Hours in
24-hour format (two digits)
33 %#H
3 Hours in
24-hour integer format (one or two digits)
34 %I
11 Hours in
12-hour format (two digits)
35 %#I
3 Hours in
12-hour integer format (one or two digits)
38 %M
09 Minutes (two digits)
39 %#M
9 Minutes (one or two digits)
41 %S
02 Seconds (two digits)
42 %#S
2 Seconds (one or two digits)
43 %s
1206567625723 Unix timestamp (Seconds past
1970-
01-
01 00:
00:
00)
45 %N
008 Milliseconds (three digits)
46 %#N
8 Milliseconds (one to three digits)
48 %O
360 difference in minutes between local time and GMT
49 %Z Mountain Standard Time Name of timezone as reported by browser
50 %G -
06:
00 Hours and minutes between GMT
52 %F
2008-
03-
26 %Y-%m-%d
57 %#c Wed Mar
26 15:
31:
00 2008 %a %b %e %H:%M:%S %Y
58 %v
3-Sep-
2008 %e-%b-%Y
60 %r
3:
31:
00 PM %I:%M:%S %p
64 %% % Percent Symbol
</pre></blockquote><!--START_ND_SUMMARY--><div class=Summary
><div class=STitle
>Summary
</div><div class=SBorder
><table border=
0 cellspacing=
0 cellpadding=
0 class=STable
><tr class=
"SMain"><td class=SEntry
><a href=
"#$.jqplot.DateAxisRenderer" >$.jqplot.
<wbr>DateAxisRenderer
</a></td><td class=SDescription
>A plugin for a jqPlot to render an axis as a series of date values.
</td></tr><tr class=
"SGroup SIndent1"><td class=SEntry
><a href=
"#$.jqplot.DateAxisRenderer.Properties" >Properties
</a></td><td class=SDescription
></td></tr><tr class=
"SProperty SIndent2 SMarked"><td class=SEntry
><a href=
"#$.jqplot.DateAxisRenderer.tickRenderer" >tickRenderer
</a></td><td class=SDescription
>A class of a rendering engine for creating the ticks labels displayed on the plot, See
<a href=
"../jqplot-axisTickRenderer-js.html#$.jqplot.AxisTickRenderer" class=LClass id=link1
onMouseOver=
"ShowTip(event, 'tt1', 'link1')" onMouseOut=
"HideTip('tt1')">$.jqplot.AxisTickRenderer
</a>.
</td></tr><tr class=
"SProperty SIndent2"><td class=SEntry
><a href=
"#$.jqplot.DateAxisRenderer.tickInset" id=link2
onMouseOver=
"ShowTip(event, 'tt2', 'link2')" onMouseOut=
"HideTip('tt2')">tickInset
</a></td><td class=SDescription
>Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval.
</td></tr><tr class=
"SProperty SIndent2 SMarked"><td class=SEntry
><a href=
"#$.jqplot.DateAxisRenderer.drawBaseline" id=link3
onMouseOver=
"ShowTip(event, 'tt3', 'link3')" onMouseOut=
"HideTip('tt3')">drawBaseline
</a></td><td class=SDescription
>True to draw the axis baseline.
</td></tr><tr class=
"SProperty SIndent2"><td class=SEntry
><a href=
"#$.jqplot.DateAxisRenderer.baselineWidth" id=link4
onMouseOver=
"ShowTip(event, 'tt4', 'link4')" onMouseOut=
"HideTip('tt4')">baselineWidth
</a></td><td class=SDescription
>width of the baseline in pixels.
</td></tr><tr class=
"SProperty SIndent2 SMarked"><td class=SEntry
><a href=
"#$.jqplot.DateAxisRenderer.baselineColor" id=link5
onMouseOver=
"ShowTip(event, 'tt5', 'link5')" onMouseOut=
"HideTip('tt5')">baselineColor
</a></td><td class=SDescription
>CSS color spec for the baseline.
</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>
66 <div class=
"CGroup"><div class=CTopic
><h3 class=CTitle
><a name=
"$.jqplot.DateAxisRenderer.Properties"></a>Properties
</h3></div></div>
68 <div class=
"CProperty"><div class=CTopic
><h3 class=CTitle
><a name=
"$.jqplot.DateAxisRenderer.tickRenderer"></a>tickRenderer
</h3><div class=CBody
><p>A class of a rendering engine for creating the ticks labels displayed on the plot, See
<a href=
"../jqplot-axisTickRenderer-js.html#$.jqplot.AxisTickRenderer" class=LClass id=link7
onMouseOver=
"ShowTip(event, 'tt1', 'link7')" onMouseOut=
"HideTip('tt1')">$.jqplot.AxisTickRenderer
</a>. this.tickRenderer = $.jqplot.AxisTickRenderer; this.labelRenderer = $.jqplot.AxisLabelRenderer;
</p></div></div></div>
70 <div class=
"CProperty"><div class=CTopic
><h3 class=CTitle
><a name=
"$.jqplot.DateAxisRenderer.tickInset"></a>tickInset
</h3><div class=CBody
><blockquote><table border=
0 cellspacing=
0 cellpadding=
0 class=Prototype
><tr><td>this.tickInset =
0</td></tr></table></blockquote><p>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.
</p></div></div></div>
72 <div class=
"CProperty"><div class=CTopic
><h3 class=CTitle
><a name=
"$.jqplot.DateAxisRenderer.drawBaseline"></a>drawBaseline
</h3><div class=CBody
><blockquote><table border=
0 cellspacing=
0 cellpadding=
0 class=Prototype
><tr><td>this.drawBaseline = true
</td></tr></table></blockquote><p>True to draw the axis baseline.
</p></div></div></div>
74 <div class=
"CProperty"><div class=CTopic
><h3 class=CTitle
><a name=
"$.jqplot.DateAxisRenderer.baselineWidth"></a>baselineWidth
</h3><div class=CBody
><blockquote><table border=
0 cellspacing=
0 cellpadding=
0 class=Prototype
><tr><td>this.baselineWidth = null
</td></tr></table></blockquote><p>width of the baseline in pixels.
</p></div></div></div>
76 <div class=
"CProperty"><div class=CTopic
><h3 class=CTitle
><a name=
"$.jqplot.DateAxisRenderer.baselineColor"></a>baselineColor
</h3><div class=CBody
><blockquote><table border=
0 cellspacing=
0 cellpadding=
0 class=Prototype
><tr><td>this.baselineColor = null
</td></tr></table></blockquote><p>CSS color spec for the baseline.
</p></div></div></div>
81 <div id=Footer
>Copyright
© 2009 -
2010 Chris Leonello
· Updated October
7th,
2012 · <a href=
"http://www.naturaldocs.org">Generated by Natural Docs
</a></div><!--Footer-->
84 <div id=Menu
><div class=MEntry
><div class=MGroup
><a href=
"javascript:ToggleMenu('MGroupContent1')">Usage and Options
</a><div class=MGroupContent id=MGroupContent1
><div class=MEntry
><div class=MFile
><a href=
"../usage-txt.html">Usage
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqPlotOptions-txt.html">jqPlot Options
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../optionsTutorial-txt.html">Options Tutorial
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqPlotCssStyling-txt.html">jqPlot CSS Customization
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../changes-txt.html">Change Log
</a></div></div><div class=MEntry
><div class=MLink
><a href=
"../../tests/">Examples
</a></div></div></div></div></div><div class=MEntry
><div class=MGroup
><a href=
"javascript:ToggleMenu('MGroupContent4')">API Documentation
</a><div class=MGroupContent id=MGroupContent4
><div class=MEntry
><div class=MFile
><a href=
"../jqplot-core-js.html">jqPlot Charts
</a></div></div><div class=MEntry
><div class=MGroup
><a href=
"javascript:ToggleMenu('MGroupContent2')">Core Renderers
</a><div class=MGroupContent id=MGroupContent2
><div class=MEntry
><div class=MFile
><a href=
"../jqplot-axisTickRenderer-js.html">Axis Tick Renderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqplot-canvasGridRenderer-js.html">Canvas Grid Renderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqplot-divTitleRenderer-js.html">Div Title Renderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqplot-linearAxisRenderer-js.html">Linear Axis Renderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqplot-markerRenderer-js.html">Marker Renderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqplot-shapeRenderer-js.html">Shape Renderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqplot-shadowRenderer-js.html">Shadow Renderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqplot-lineRenderer-js.html">Line Renderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqplot-axisLabelRenderer-js.html">Axis Label Renderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqplot-themeEngine-js.html">Theme Engine
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../jqplot-toImage-js.html">fn
</a></div></div></div></div></div><div class=MEntry
><div class=MGroup
><a href=
"javascript:ToggleMenu('MGroupContent3')">Plugins
</a><div class=MGroupContent id=MGroupContent3
><div class=MEntry
><div class=MFile
><a href=
"jqplot-barRenderer-js.html">jqplot.
<wbr>BarRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-BezierCurveRenderer-js.html">jqplot.
<wbr>BezierCurveRenderer.js
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-blockRenderer-js.html">jqplot.
<wbr>BlockRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-bubbleRenderer-js.html">jqplot.
<wbr>BubbleRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-canvasAxisLabelRenderer-js.html">jqplot.
<wbr>CanvasAxisLabelRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-canvasAxisTickRenderer-js.html">jqplot.
<wbr>CanvasAxisTickRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-pyramidGridRenderer-js.html">jqplot.
<wbr>CanvasGridRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-canvasOverlay-js.html">jqplot.
<wbr>CanvasOverlay
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-categoryAxisRenderer-js.html">jqplot.
<wbr>CategoryAxisRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-ciParser-js.html">jqplot.
<wbr>ciParser
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-cursor-js.html">jqplot.
<wbr>Cursor
</a></div></div><div class=MEntry
><div class=MFile id=MSelected
>jqplot.
<wbr>DateAxisRenderer
</div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-donutRenderer-js.html">jqplot.
<wbr>DonutRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-dragable-js.html">jqplot.
<wbr>Dragable
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-enhancedLegendRenderer-js.html">jqplot.
<wbr>enhancedLegendRenderer.js
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-funnelRenderer-js.html">jqplot.
<wbr>FunnelRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-highlighter-js.html">jqplot.
<wbr>Highlighter
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-logAxisRenderer-js.html">jqplot.
<wbr>LogAxisRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-mekkoAxisRenderer-js.html">jqplot.
<wbr>MekkoAxisRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-mekkoRenderer-js.html">jqplot.
<wbr>MekkoRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-meterGaugeRenderer-js.html">jqplot.
<wbr>MeterGaugeRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-ohlcRenderer-js.html">jqplot.
<wbr>OHLCRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-pieRenderer-js.html">jqplot.
<wbr>PieRenderer
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-pointLabels-js.html">jqplot.
<wbr>PointLabels
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-pyramidAxisRenderer-js.html">jqplot.
<wbr>pyramidAxisRenderer.js
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-pyramidRenderer-js.html">jqplot.
<wbr>pyramidRenderer.js
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"jqplot-trendline-js.html">jqplot.
<wbr>Trendline
</a></div></div></div></div></div></div></div></div><div class=MEntry
><div class=MFile
><a href=
"../gpl-2-0-txt.html">GPL License
</a></div></div><div class=MEntry
><div class=MFile
><a href=
"../MIT-LICENSE-txt.html">MIT License
</a></div></div><div class=MEntry
><div class=MGroup
><a href=
"javascript:ToggleMenu('MGroupContent5')">Index
</a><div class=MGroupContent id=MGroupContent5
><div class=MEntry
><div class=MIndex
><a href=
"../../index/General.html">Everything
</a></div></div><div class=MEntry
><div class=MIndex
><a href=
"../../index/Classes.html">Classes
</a></div></div><div class=MEntry
><div class=MIndex
><a href=
"../../index/Properties.html">Properties
</a></div></div><div class=MEntry
><div class=MIndex
><a href=
"../../index/Functions.html">Functions
</a></div></div><div class=MEntry
><div class=MIndex
><a href=
"../../index/Hooks.html">Hooks
</a></div></div><div class=MEntry
><div class=MIndex
><a href=
"../../index/Files.html">Files
</a></div></div></div></div></div><script type=
"text/javascript"><!--
85 var searchPanel
= new SearchPanel("searchPanel", "HTML", "../../search");
86 --></script><div id=MSearchPanel class=MSearchPanelInactive
><input type=text id=MSearchField value=Search
onFocus=
"searchPanel.OnSearchFieldFocus(true)" onBlur=
"searchPanel.OnSearchFieldFocus(false)" onKeyUp=
"searchPanel.OnSearchFieldChange()"><select id=MSearchType
onFocus=
"searchPanel.OnSearchTypeFocus(true)" onBlur=
"searchPanel.OnSearchTypeFocus(false)" onChange=
"searchPanel.OnSearchTypeChange()"><option id=MSearchEverything selected
value=
"General">Everything
</option><option value=
"Classes">Classes
</option><option value=
"Files">Files
</option><option value=
"Functions">Functions
</option><option value=
"Hooks">Hooks
</option><option value=
"Properties">Properties
</option></select></div><script language=JavaScript
><!--
87 HideAllBut([3, 4], 6);// --></script></div><!--Menu-->
91 <!--START_ND_TOOLTIPS-->
92 <div class=CToolTip
id=
"tt1"><div class=CClass
>A
“tick
” object showing the value of a tick/gridline on the plot.
</div></div><div class=CToolTip
id=
"tt2"><div class=CProperty
><blockquote><table border=
0 cellspacing=
0 cellpadding=
0 class=Prototype
><tr><td>this.tickInset =
0</td></tr></table></blockquote>Controls the amount to inset the first and last ticks from the edges of the grid, in multiples of the tick interval.
</div></div><div class=CToolTip
id=
"tt3"><div class=CProperty
><blockquote><table border=
0 cellspacing=
0 cellpadding=
0 class=Prototype
><tr><td>this.drawBaseline = true
</td></tr></table></blockquote>True to draw the axis baseline.
</div></div><div class=CToolTip
id=
"tt4"><div class=CProperty
><blockquote><table border=
0 cellspacing=
0 cellpadding=
0 class=Prototype
><tr><td>this.baselineWidth = null
</td></tr></table></blockquote>width of the baseline in pixels.
</div></div><div class=CToolTip
id=
"tt5"><div class=CProperty
><blockquote><table border=
0 cellspacing=
0 cellpadding=
0 class=Prototype
><tr><td>this.baselineColor = null
</td></tr></table></blockquote>CSS color spec for the baseline.
</div></div><div class=CToolTip
id=
"tt6"><div class=CClass
>An individual axis object.
</div></div><!--END_ND_TOOLTIPS-->
97 <div id=MSearchResultsWindow
><iframe src=
"" frameborder=
0 name=MSearchResults id=MSearchResults
></iframe><a href=
"javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose
>Close
</a></div>
100 <script language=JavaScript
><!--
101 if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>