Date/Time Axes

Overview

You can use Date/Time values as input data for chart, moreover - you can localize input data formatso you don't have to reformat it before setting data to XML. Read more about it in Date Time Input Tutorial.

To utilize these input features you should use Date Time Axes. In this tutorial we will show how to do this.

Creating DateTime Axes

You can make both X and/or Y axis a DateTime axis, to do that, set scale type to DateTime:

XML Syntax
Plain code
01 <axes>
02   <y_axis>
03     <scale type="DateTime" />
04   </y_axis>
05 </axes>

Before starting to create chart based on datetime values, you should study DateTime Input Tutorial, in which this input data formatting is explained.

Sample Range Bar With Y DateTime Axis

Lets create a simple Range Bar chart with DateTime Y Axis. For the first we have to choose data to be shown:

Task Name Task Start Task End
Development 01/01/2000 02/15/2002
Internal Testing 06/01/2001 07/01/2003
Field Test 02/25/2002 07/01/2003
Licensing 07/01/2003 07/01/2004

Date is collected, and now we know what datetime input format should be used: %mm/%dd/%yyyy (we've done that according too DateTime Input and DateTime Formatting), so let's set it:

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <settings>
04     <locale>
05       <date_time_format>
06         <format><![CDATA[%mm/%dd/%yyyy]]></format>
07       </date_time_format>
08     </locale>
09   </settings>
10 </anychart>

Now we need to create data XML for range bars, here it is:

XML Syntax
Plain code
01 <data>
02   <series name="X113">
03     <point start="01/01/2000" end="02/15/2002" name="Development" />
04     <point start="06/01/2001" end="07/01/2003" name="Internal Testing" />
05     <point start="02/25/2002" end="07/01/2003" name="Field Tests" />
06     <point start="07/01/2003" end="07/01/2004" name="Licensing" />
07   </series>
08 </data>

Now we will create DateTime Y Axis and set it to show process in years (explained later):

XML Syntax
Plain code
01 <axes>
02   <y_axis>
03     <scale type="DateTime" major_interval_units="Year" minimum="01/01/1999" maximum="01/01/2005" />
04     <labels>
05       <format><![CDATA[{%Value}{dateTimeFormat:%yyyy}]]></format>
06     </labels>
07   </y_axis>
08 </axes>

Thats it - all we have to add are axes and chart titles and put all we've done together:

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <settings>
04     <locale>
05       <date_time_format>
06         <format><![CDATA[%mm/%dd/%yyyy]]></format>
07       </date_time_format>
08     </locale>
09   </settings>
10   <charts>
11     <chart plot_type="CategorizedHorizontal">
12       <data>
13         <series name="X113">
14           <point start="01/01/2000" end="02/15/2002" name="Development" />
15           <point start="06/01/2001" end="07/01/2003" name="Internal Testing" />
16           <point start="02/25/2002" end="07/01/2003" name="Field Tests" />
17           <point start="07/01/2003" end="07/01/2004" name="Licensing" />
18         </series>
19       </data>
20       <chart_settings>
21         <title>
22           <text><![CDATA[X113 Destroyer Development Plan]]></text>
23         </title>
24         <axes>
25           <x_axis>
26             <title>
27               <text><![CDATA[Tasks]]></text>
28             </title>
29           </x_axis>
30           <y_axis>
31             <title>
32               <text><![CDATA[Time Plan]]></text>
33             </title>
34             <scale type="DateTime" major_interval_unit="Year" minimum="01/01/1999" maximum="01/01/2005" />
35             <labels>
36               <format><![CDATA[{%Value}{dateTimeFormat:%yyyy}]]></format>
37             </labels>
38           </y_axis>
39         </axes>
40       </chart_settings>
41     </chart>
42   </charts>
43 </anychart>

That's it - chart with DateTime Y Axis is ready:

Live Sample:  Sample Range Bar chart - Y DateTime Axis

to top

Major and Minor Interval Units

For datetime axes you can set Major and Minor Interval Units using major_interval_unit and minor_interval_unit attributes of <scale> node:

XML Syntax
Plain code
01 <scale major_interval_unit="Year" minor_interval_unit="Month" type="DateTime" />

This units define what inits should be used for minor and major steps, when you use minor_interval and major_interval attrubutes together with units attributes - interval are used as multipliers, for example these settings mean that Major Step is two years and Minor Step is a quarter:

XML Syntax
Plain code
01 <scale type="DateTime" major_interval="2" minor_interval="3" major_interval_unit="Year" minor_interval_unit="Month" />

This feature will be demonstrated in the next sample.

to top

Sample Scatter Line Chart with Y DateTime Axis

In this sample we will create a Scatter Line Chart with DateTime X Axis and set major and minor interval units and intervals. Y Axis will be Logarithmic - to show small values in the first years and big values in last year.

The chart gets data input as unix time and shows ACME Corp. sales data for 5 years:

Live Sample:  Date Time Axes Scatter Line

to top

to top