Click here to Skip to main content
Click here to Skip to main content

Use Date And Time As Ticks Of jqplot Axis

, 29 Jan 2012
Rate this:
Please Sign up or sign in to vote.
Use Date And Time As Ticks Of jqplot Axis

The original: http://zoyobar.blogspot.com/2012/01/use-date-and-time-as-ticks-of-jqplot.html

Introduction/Catalog

Please download the sample code at the section JQueryElement demo download of Download JQueryElement, the directory is /plot/Default.aspx.

Due to the limited time, synchronization cannot be guaranteed in more than one blog article, at the following address you can view up-to-date content, please understand:

http://zoyobar.blogspot.com/2012/01/use-date-and-time-as-ticks-of-jqplot.html

This article will explain in detail how to use the date axis in Plot chart, the catalog is as follows:

  • Prepare
  • Required Scripts
  • Renderer Property
  • Format

Prepare

Please view the Prepare section at Introduction To Axis And Grid Of jqplot Chart.

Required Scripts

You need to add the script that is required by date axis, such as:

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

If you use the ResourceLoader to load scripts, you need to configure the web.config and set the JQPlotDateAxisRenderer property of ResourceLoader to true, for example:

<appSettings>
 ...

 <add key="je.jqplot.DateAxisRenderer.js"
  value="~/js/plugins/jqplot.dateAxisRenderer.min.js"/>
</appSettings>
  

<je:ResourceLoader ID="resource" runat="server"
 JQPlotDateAxisRenderer="true" />  

More about the ResourceLoader, you can refer to Use ResourceLoader To Automatically Add Script And Style.

Renderer Property

Set the Renderer property of axis to DateAxisRenderer, the axis will show dates:

<je:Plot ID="plot1" runat="server" IsVariable="true">
 <AxesSetting
  XAxisSetting-Renderer="DateAxisRenderer">
 </AxesSetting>
 
 ...
</je:Plot>  

Format

Through the FormatString property to set the date display format, such as:

<je:Plot ID="plot2" runat="server" IsVariable="true">
 <AxesSetting
  XAxisSetting-Renderer="DateAxisRenderer"
  XAxisSetting-TickRendererSetting-FormatString="%R">
 </AxesSetting>
 
 ...
</je:Plot>  
<je:Plot ID="plot3" runat="server" IsVariable="true">
 <AxesSetting>
  <XAxisSetting
   Renderer="DateAxisRenderer"
   TickRendererSetting-FormatString="%y-%#m-%#d%n%#I:%#M:%#S %p"
   Ticks="['2011-1-1 1:25:30','2011-1-1 5:4:3','2011-1-1 10:2','2011-1-1 23:22:00']">
  </XAxisSetting>
 </AxesSetting>

 ...
</je:Plot>  

More formats are as follows:

// Year
%Y  2008
%y  08

// Month
%m  09
%#m  9
%B  September
%b  Sep

// Day
%d  05
%#d  5
%e  5
%A  Sunday
%a  Sun
%w  0, 0 = Sunday, 6 = Saturday
%o  th, The ordinal suffix string following the day of the month

// Hour
%H  23
%#H  3
%I   11
%#I  3
%p  PM, AM or PM

// Minute
%M  09
%#M  9

// Second
%S  02
%#S  2
%s  1206567625723, Unix timestamp, seconds past 1970-01-01 00:00:00

// Millisecond
%N  008
%#N  8

// Timezone
%O  360, Difference in minutes between local time and GMT
%Z  Mountain Standard Time, Name of timezone
%G  -06:00, GMT Time

// Shortcut
%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

// Character
%n  \n, Newline
%t  \t, Tab
%%  %, Percent Symbol  

Related Content

Comment

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

zoyobar

United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 29 Jan 2012
Article Copyright 2012 by zoyobar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid