Event Markers: Date Time Input Locale

Overview

The AnyChart Stock component can accept timestamps in any format. Using the special tokens, you can customize a timestamp mask in a way that the component would "understand" your data at any precision, all the way to milliseconds.

For example, you can use timestamps in these formats: "2009-10-12", "2009/12/10", "2009/12/10 11:34 AM", "Jan, 16 2009 16:43:10", etc.

Note: Don't miss Difference between date and locale_based_date section below, it covers important date time setting alternative.

to top

Difference between date and locale_based_date

Before we start explaining how any custom formatted date can be used to set event marker date we want to highlight the fact that there are two options to set event marker date: date and locale_based_date attributes, which has the same purpose - set bind date, but have important differences.

Let's take a look at the sample chart with with two different groups of event markers:

Live Sample:  Event Markers Input Data Sample - date vs locale_based_date

Settings for group A are:

XML/JSON Syntax
Plain code
01 <group chart="chart1" series="chart1Series" format="A">
02   <locale>
03     <date_time>
04       <format><![CDATA[%M/%d/%yyyy %h:%mm:%ss %tt]]></format>
05     </date_time>
06   </locale>
07   <events>
08     <event locale_based_date="4/8/2010 1:39:00 PM" />
09     <event locale_based_date="4/8/2010 1:59:00 PM" />
10     <event locale_based_date="4/8/2010 2:16:00 PM" />
11     <event locale_based_date="4/8/2010 2:26:00 PM" />
12     <event locale_based_date="4/8/2010 2:48:00 PM" />
13   </events>
14 </group>
01{
02  chart: "chart1",
03  series: "chart1Series",
04  format: "A",
05  locale: {
06    dateTime: {
07      format: "%M/%d/%yyyy %h:%mm:%ss %tt"
08    }
09  },
10  events: [
11    {
12      localeBasedDate: "4/8/2010 1:39:00 PM"
13    },
14    {
15      localeBasedDate: "4/8/2010 1:59:00 PM"
16    },
17    {
18      localeBasedDate: "4/8/2010 2:16:00 PM"
19    },
20    {
21      localeBasedDate: "4/8/2010 2:26:00 PM"
22    },
23    {
24      localeBasedDate: "4/8/2010 2:48:00 PM"
25    }
26  ]
27}

Settings for group B are:

XML/JSON Syntax
Plain code
01 <group chart="chart1" series="chart1Series" format="B" position="Axis">
02   <events>
03     <event date="2010-04-08 14:24" />
04     <event date="2010-04-08 15:05" />
05     <event date="2010-04-08 15:24" />
06     <event date="2010-04-08 16:21" />
07     <event date="2010-04-08 17:14" />
08   </events>
09 </group>
01{
02  chart: "chart1",
03  series: "chart1Series",
04  format: "B",
05  position: "Axis",
06  events: [
07    {
08      date: "2010-04-08 14:24"
09    },
10    {
11      date: "2010-04-08 15:05"
12    },
13    {
14      date: "2010-04-08 15:24"
15    },
16    {
17      date: "2010-04-08 16:21"
18    },
19    {
20      date: "2010-04-08 17:14"
21    }
22  ]
23}

So what are the ways and what's the difference between them?

The first one: date attribute - it has the fixed format, which is described in Date Time Values in Chart Settings, and this attribute has the priority - if both attributes are specified: locale_based_date is ignored and date is used.

The second one: locale_based_date attribute, which allows to use any format, defined in <locale> node and the most part of this tutorial describes how this locale can be tuned.

These things you can see from the sample settings and charts above, in group A the locale with date time format is set and this format is used in locale_based_date attribute, in group B no locale is specified and date attribute contains shortened variant of timestamp format used in chart settings.

You can stop with further reading about difference between these attributes, if you are not going to work with chart object model and JSON settings, but if you will, you should note that date attribute makes working with event markers in Java Script much easier, and you should study the articles:

to decide what is more important for you: customizable event date format or ease of dynamic work with event markers in Java Script.

to top

Customizing Locale for Different Levels

A timestamp mask, which defines the format for locale_based_date attribute can be set on two levels described below.

For all event markers

If event markers in different groups have the same timestamp, it is wise to set the timestamp mask on the upper level.

For making these settings, you can use the <locale> node in the <event_markers> node. Sample XML syntax for customizing locale for all event markers look like that:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <event_markers>
04     <locale>
05       <date_time>
06         <format><![CDATA[%yyyy-%MM-%dd]]></format>
07       </date_time>
08     </locale>
09   </event_markers>
10 </stock>
01{
02  eventMarkers: {
03    locale: {
04      dateTime: {
05        format: "%yyyy-%MM-%dd"
06      }
07    }
08  }
09}

to top

For a Specific Group of Event Markers

If different groups of event markers have different sources and are provided with different timestamps, a timestamp mask can be set for each group individually.

To set a timestamp mask for a specific group, use the <locale> node in the <group> node.

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <event_markers>
04     <groups>
05       <group>
06         <locale>
07           <date_time>
08             <format><![CDATA[%yyyy-%MM-%dd]]></format>
09           </date_time>
10         </locale>
11         <events>
12           <event locale_based_date="2009-04-14" />
13           <event locale_based_date="2008-11-18" />
14           <event locale_based_date="2008-10-16" />
15           <event locale_based_date="2008-07-28" />
16         </events>
17       </group>
18       <group>
19         <locale>
20           <date_time>
21             <format><![CDATA[%yyyy/%dd/%MM]]></format>
22           </date_time>
23         </locale>
24         <events>
25           <event locale_based_date="2007/24/01" />
26           <event locale_based_date="2006/20/11" />
27           <event locale_based_date="2006/01/08" />
28           <event locale_based_date="2006/28/07" />
29         </events>
30       </group>
31     </groups>
32   </event_markers>
33 </stock>
01{
02  eventMarkers: {
03    groups: [
04      {
05        locale: {
06          dateTime: {
07            format: "%yyyy-%MM-%dd"
08          }
09        },
10        events: [
11          {
12            localeBasedDate: "2009-04-14"
13          },
14          {
15            localeBasedDate: "2008-11-18"
16          },
17          {
18            localeBasedDate: "2008-10-16"
19          },
20          {
21            localeBasedDate: "2008-07-28"
22          }
23        ]
24      },
25      {
26        locale: {
27          dateTime: {
28            format: "%yyyy/%dd/%MM"
29          }
30        },
31        events: [
32          {
33            localeBasedDate: "2007/24/01"
34          },
35          {
36            localeBasedDate: "2006/20/11"
37          },
38          {
39            localeBasedDate: "2006/01/08"
40          },
41          {
42            localeBasedDate: "2006/28/07"
43          }
44        ]
45      }
46    ]
47  }
48}

In all samples in this article we set timestamp format for the given group.

to top

Customizing Timestamp Mask

The timestamp format string is set in the <format> node. This format string uses special tokens. The sample XML below demonstrates it:

XML/JSON Syntax
Plain code
02   <groups>
03     <group chart="idChart" series="idSeries2">
04       <locale>
05         <date_time>
06           <format><![CDATA[%yyyy-%MM-%dd]]></format>
07         </date_time>
08       </locale>
09       <events>
10         <event locale_based_date="2009-07-18" format="A" />
11         <event locale_based_date="2009-07-27" format="B" />
12         <event locale_based_date="2009-10-12" format="C" />
13       </events>
14     </group>
15   </groups>
01{
02  groups: [
03    {
04      chart: "idChart",
05      series: "idSeries2",
06      locale: {
07        dateTime: {
08          format: "%yyyy-%MM-%dd"
09        }
10      },
11      events: [
12        {
13          localeBasedDate: "2009-07-18",
14          format: "A"
15        },
16        {
17          localeBasedDate: "2009-07-27",
18          format: "B"
19        },
20        {
21          localeBasedDate: "2009-10-12",
22          format: "C"
23        }
24      ]
25    }
26  ]
27}

As you can see here, the date attributes of each event as: 2009-07-18, 2009-07-27, etc. Here, years are represented by four digits, months and days - by two with leading zeros, and all the units are separated with the "-" character.

To help AnyChart Stock properly interpret this timestamp, we will specify the following input format string: "%yyyy-%MM-%dd", where the tokens have the following meanings:

And the "-" character, used as the separator, is also included in the proper positions of the format string.

There are no restrictions on using timestamp formats - you can use any; just make sure to specify the formatting string properly and that all the values that are set in date attribute satisfy that string.

Take a look at the table below; it highlights the case which should never happen with the timestamp column:

Correct Wrong!
1990-03-26
1990-04-02
1990-04-09
1990-04-16
1990-04-23
1990-03-26
1990-04-02
1990/4/9
1990-04-16
1990-04-23

As we have already said, you can use any format - with any separators, prefixes and suffixes. The table below demonstrates several different formatting strings, which use the same tokens %yyyy, %MM and %dd arranged in different ways:

Description Timestamps Timestamp format string
Year, month, day with the "-" separator. 1990-03-26
1990-04-02
1990-04-09
1990-04-16
1990-04-23
"%yyyy-%MM-%dd"
Year, month, day with leading zeros can be used without separators. 19900326
19900402
19900409
19900416
19900423
"%yyyy%MM%dd"
Month, day, year with the "/" separator. 03/26/1990
04/02/1990
04/09/1990
04/16/1990
04/23/1990
"%MM/%dd/%yyyy"

Year, month, day with prefixes and the comma (",") separator.

"Y:1990,M:03,D:26"
"Y:1990,M:04,D:02"
"Y:1990,M:04,D:09"
"Y:1990,M:04,D:16"
"Y:1990,M:04,D:23"
"Y:%yyyy,M:%MM,D:%dd"

This table has demonstrated an example of basic formatting; depending on the task, you can use any format and apply the hour, minute, second or milliseconds precision.

The section below shows all the tokens that can be used in a timestamp formatting string.

to top

Tokens for Date-Time Format

The table below lists all the available tokens that can be used in a formatting string that parses input timestamp. The Examples column shows sample timestamps and the formatting strings used for parsing them:

Token Description Examples
%u

Expects the number of Seconds elapsed since midnight of January 1, 1970.

Should follow the Unix Timestamp format.

When using this token, no other tokens can be used in the mask, and the timestamp can contain only one numerical value.

Timestamp: "1269675274"

Mask: "%u"

%T

Expects the number of Milliseconds since midnight of January 1, 1970

When using this token, no other tokens can be used in the mask, and the timestamp can contain only one numerical value.

Timestamp: "1269675350168"

Mask: "%T"

%d

Expects day of month as a number from 1 through 31.

Single-digit days must be formatted without a leading zero.

Note: Must be followed by a non-digit character - read more...

Timestamp: "6/9/2009"

Mask: "%M/%d/%yyyy"

%dd Expects day of month as a number from 01 through 31.

Single-digit days must be formatted with a leading zero.

Timestamp: "06/09/2009"

Mask: "%MM/%dd/%yyyy"

%ddd

Expects short weekday name.

The name must match the locale settings and doesn't affect the result - read more...

Timestamp: "06-Sep-2009"

Mask: "%MM-%ddd-%yyyy"

%dddd

Expects full weekday name.

The name should match the locale settings and doesn't affect the result - read more...

Timestamp: "06-September-2009"

Mask: "%MM-%dddd-%yyyy"

%M

Expects month as a number from 1 through 12.

Single-digit months must be formatted without a leading zero.

Note: Must be followed by a non-digit character - read more...

Timestamp: "6/23/2009"

Mask: "%M/%d/%yyyy"

%MM Expects month as a number from 01 through 12.

Single-digit months must be formatted with a leading zero.

Timestamp: "06/09/2009"

Mask: "%MM/%dd/%yyyy"

%MMM Expects abbreviated month name.

The name should match the locale settings - read more...

Timestamp: 25 Feb, 2009"

Mask: "%d %MMM, %yyyy"

%MMMM Expects full month name.

The name should match the locale settings - read more...

Timestamp: "25 February, 2009"

Mask: "%d %MMMM, %yyyy"

%yy Expects year as a two-digit number.

If the year has more than two digits, only the two lower-order digits will appear. If a two-digit year has fewer than two value digits, the number must be padded with leading zeros until obtaining two digits.

Timestamp: "2/25/09"

Mask: "%M/%d/%yy"

%yyyy Expects year as a four-digit number.

Timestamp: "2/25/2009"

Mask: "%M/%d/%yyyy"

%h

Expects hour as a number from 1 through 12.

The hour is represented by the 12-hour clock, which counts whole hours since midnight or noon. A particular hour after midnight is indistinguishable from the same hour after noon. The hour is not rounded, and single-digit hours are formatted without a leading zero. For example, given the time of 4:12 in the morning or afternoon, this custom format specifier expects "4".

Note: Must be followed by a non-digit character - read more...

Timestamp: "2/25/2009 3:15 PM"

Mask: "%M/%d/%yyyy %h:%mm %tt"

%hh Expects hour as a number from 01 through 12.

The hour is represented by the 12-hour clock that counts whole hours since midnight or noon. A particular hour after midnight is indistinguishable from the same hour after noon. The hour is not rounded, and single-digit hours are formatted with a leading zero. For example, given the time of 4:12 in the morning or afternoon, this format specifier expects "04".

Timestamp: "2/25/2009 03:15 PM"

Mask: "%M/%d/%yyyy %hh:%mm %tt"

%H

Expects hour as a number from 0 through 23.

The hour is represented by the zero-based 24-hour clock that counts whole hours since midnight. Single-digit hours must be formatted without a leading zero.

Note: Must be followed by a non-digit character - read more...

Timestamp: "2/25/2009 17:15"

Mask: "%M/%d/%yyyy %H:%mm %tt"

%HH Expects hour as a number from 00 through 23.

The hour is represented by the zero-based 24-hour clock that counts whole hours since midnight. Single-digit hours must be formatted with a leading zero.

Timestamp: "2/25/2009 17:15"

Mask: "%M/%d/%yyyy %HH:%mm %tt"

%m

Expects minute as a number from 0 through 59.

The value represents the number of whole minutes passed since the last hour. Single-digit minute s must be formatted without a leading zero.

Note: Must be followed by a non-digit character - read more...

Timestamp: "2/25/2009 3:15 PM"

Mask: "%M/%d/%yyyy %h:%m %tt"

%mm Expects minute as a number from 00 through 59.

The value represents the number of whole minutes passed since the last hour. Single-digit minutes must be formatted with a leading zero.

Timestamp: "2/25/2009 3:15 PM"

Mask: "%M/%d/%yyyy %h:%mm %tt"

%s

Expects seconds as a number from 0 through 59.

The value represents the number of whole seconds passed since the last minute. Single-digit seconds must be formatted without a leading zero.

Note: Must be followed by a non-digit character - read more...

Timestamp: "2/25/2009 17:15:23"

Mask: "%M/%d/%yyyy %H:%mm:%s"

%ss Expects seconds as a number from 00 through 59.

The value represents the number of whole seconds passed since the last minute. Single-digit seconds must be formatted with a leading zero.

Timestamp: "2/25/2009 17:15:03"

Mask: "%M/%d/%yyyy %H:%mm:%ss"

%f Expects the most significant digit of the seconds fraction; i.e., it expects the tenths of a second in the date and time value.

Timestamp: "2/25/2009 17:15:23.3"

Mask: "%M/%d/%yyyy %H:%mm:%ss.%f"

%ff Expects two most significant digits of the seconds fraction; i.e., it expects the hundredths of a second in the date and time value.

Timestamp: "2/25/2009 17:15:23.55"

Mask: "%M/%d/%yyyy %H:%mm:%ss.%ff"

%fff Expects three most significant digits of the seconds fraction; i.e., it expects the milliseconds in the date and time value.

Timestamp: 2/25/2009 17:15:23.076

Mask: "%M/%d/%yyyy %H:%mm:%ss.%fff"

%t Expects the first character of the AM/PM designator.

Designators should match the locale settings: read more...

Timestamp: "2/25/2009 3:15 P"

Mask: "%M/%d/%yyyy %h:%mm %t"

%tt Expects the entire AM/PM designator.

Designators should match the locale settings: read more...

Timestamp: "2/25/2009 3:15 PM"

Mask: "%M/%d/%yyyy %h:%mm %tt"

to top

Month and Weekday Name Localization

Month Names

If you need to use timestamps with month names instead of month numbers, and the names are not specified in English - you need to define what names are to be used.

To use the textual representation of months names, you need the %MMM or %MMMM token; the first one expects abbreviated month names (e.g. Jan, Feb, etc.), and the second one - full names (e.g. January, February, etc.)

To change month names from English to any other, use the <names> node - for %MMMM, and the <short_names> node - for %MMM. In these nodes, list the new month names from January through December.

This sample XML shows how to change the full and abbreviated names to Czech:

XML/JSON Syntax
Plain code
02   <groups>
03     <group chart="idChart" series="idSeries2">
04       <locale>
05         <date_time>
06           <months>
07             <names><![CDATA[leden,únor,březen,duben,květen,červen,červenec,srpen,září,říjen,listopad,prosinec]]></names>
08             <short_names><![CDATA[I,II,III,IV,V,VI,VII,VIII,IX,X,XI,XII]]></short_names>
09           </months>
10         </date_time>
11       </locale>
12     </group>
13   </groups>
01{
02  groups: [
03    {
04      chart: "idChart",
05      series: "idSeries2",
06      locale: {
07        dateTime: {
08          months: {
09            names: "leden,únor,březen,duben,květen,červen,červenec,srpen,září,říjen,listopad,prosinec",
10            shortNames: "I,II,III,IV,V,VI,VII,VIII,IX,X,XI,XII"
11          }
12        }
13      }
14    }
15  ]
16}

Once these names are set, the parser is able to properly interpret timestamps like: "12-II-2009" or "23-duben-2009"

The advanced explanation accompanied with samples can be found in:

Weekday Names

To use the full or short weekday names, you need the %dddd or %ddd tokens. If these names come in a language other than English, they should be specified in the <names> and <short_names> subnodes of the <week_days> node. The weekday names must be listed from Sunday through Saturday.

The sample XML below shows how to make the parser understand weekday names in Czech:

XML/JSON Syntax
Plain code
02   <groups>
03     <group chart="idChart" series="idSeries2">
04       <locale>
05         <date_time>
06           <week_days>
07             <names><![CDATA[neděle,pondělí,úterý,středa,čtvrtek,pátek,sobota]]></names>
08             <short_names><![CDATA[ne,po,út,st,čt,pá,so]]></short_names>
09           </week_days>
10         </date_time>
11       </locale>
12     </group>
13   </groups>
01{
02  groups: [
03    {
04      chart: "idChart",
05      series: "idSeries2",
06      locale: {
07        dateTime: {
08          weekDays: {
09            names: "neděle,pondělí,úterý,středa,čtvrtek,pátek,sobota",
10            shortNames: "ne,po,út,st,čt,pá,so"
11          }
12        }
13      }
14    }
15  ]
16}

The advanced information accompanied with samples can be found in:

 

to top

AM/PM Designators

Be default, the %tt token expects the "AM" or "PM" string, and %t - "A" or "P". If you use timestamps in the 12-hour format and use other AM/PM designators, you need to define new designators.

To change the full designators, use the am_string and pm_string attributes for the %tt node, and to change the short designators use the short_am_string and short_pm_string attributes (used in %t) of the <time> node.

Here is a sample XML syntax that demonstrates the use of timestamps with lower-case designators with dots: "5:15 p.m.", "5:15 a.m.":

XML/JSON Syntax
Plain code
02   <groups>
03     <group chart="idChart" series="idSeries2">
04       <locale>
05         <date_time>
06           <time am_string="a.m." pm_string="p.m." short_am_string="a" short_pm_string="p" />
07         </date_time>
08       </locale>
09     </group>
10   </groups>
01{
02  groups: [
03    {
04      chart: "idChart",
05      series: "idSeries2",
06      locale: {
07        dateTime: {
08          time: {
09            amString: "a.m.",
10            pmString: "p.m.",
11            shortAmString: "a",
12            shortPmString: "p"
13          }
14        }
15      }
16    }
17  ]
18}

More samples on using AM/PM designators, accompanied with detailed descriptions, can be found in:

to top

Formatting Samples

This section shows and explains samples of most popular formats. These formats are divided in several section, in each you will find sample format mask, explanation and live samples.

Timestamps with Date (e.g. 4/23/2009, 23.04.2009)

To work with timestamps where day, month and year are shown as numbers you can use the following:

The table below demonstrates a few samples of formatting mask with these tokens:

Description Timestamps Timestamp mask format
Month and day without leading zero: month, day and year separated with "/". 1/6/2009
2/27/2009
10/14/2009
12/9/2009
"%M/%d/%yyyy"
Month and day with leading zero: month, day and year separated with "/". 01/06/2009
02/27/2009
10/14/2009
12/09/2009
"%MM/%dd/%yyyy"
Month and day without leading zero: month, day and year separated with "." 6.1.2009
27.2.2009
14.10.2009
9.12.2009
"%d.%M.%yyyy"
Month and day with leading zero: month, day and year separated with "." 06.01.2009
27.02.2009
14.10.2009
09.12.2009
"%dd.%MM.%yyyy"
Month and day with leading zero: year, month and day separated with "-" 2009-01-06
2009-02-27
2009-10-14
2009-12-09
"%yyyy-%MM-%dd"
Month and day with leading zero and year as two numbers, separated with "/" 01/06/09
02/27/09
10/14/09
12/09/09
"%MM/%dd/%yy"
Year, month and day with leading zeros without any separators. 20090106
20090227
20091014
20091209
"%yyyy%MM%dd"

Live sample below shows the same event groups in three ways with different timestamps: "%M/%d/%yyyy", "%dd.%MM.%yyyy" and "%yyyy-%MM-%dd":

Live Sample:  Event Markers Input Data Sample - Parsing Timestamps

to top

Timestamps with Month Names (e.g. 2009-Jan-17)

To use month names instead of month numbers - i.e. timestamps like "5 Jan, 2008" or "5 January, 2008" - your mask formatting string must include the %MMM or %MMMM token.

When these tokens are included in the mask, parser checks the full or abbreviated month names and converts those to the numbers.

Note: Either full or abbreviated month names must strictly match the default or locale-defined values. Using undefined names can result in parsing failure.

Changing short and full months names is described in:

The table below demonstrates a few samples of formatting mask with short and full month names:

Description Timestamps Timestamp mask format
Dates with short month names 17 Jan, 2009
17 Feb, 2009
17 Mar, 2009
17 Apr, 2009
17 May, 2009
17 Jun, 2009
17 Jul, 2009
17 Aug, 2009
17 Sep, 2009
17 Oct, 2009
17 Nov, 2009
17 Dec, 2009
"%dd %MMM, %yyyy"
Dates with full month names 17 January, 2009
17 February, 2009
17 March, 2009
17 April, 2009
17 May, 2009
17 June, 2009
17 July, 2009
17 August, 2009
17 September, 2009
17 October, 2009
17 November, 2009
17 December, 2009
"%dd %MMMM, %yyyy"
Dates with short month names + Time 17 Jan, 2009 4:34:12 AM
17 Feb, 2009 4:34:12 AM
17 Mar, 2009 4:34:12 AM
17 Apr, 2009 4:34:12 AM
17 May, 2009 4:34:12 AM
17 Jun, 2009 4:34:12 AM
17 Jul, 2009 4:34:12 AM
17 Aug, 2009 4:34:12 AM
17 Sep, 2009 4:34:12 AM
17 Oct, 2009 4:34:12 AM
17 Nov, 2009 4:34:12 AM
17 Dec, 2009 4:34:12 AM
"%dd %MMM, %yyyy %h:%mm:%ss %tt "
Dates with full month names + Time 17 January, 2009 4:34:12 AM
17 February, 2009 4:34:12 AM
17 March, 2009 4:34:12 AM
17 April, 2009 4:34:12 AM
17 May, 2009 4:34:12 AM
17 June, 2009 4:34:12 AM
17 July, 2009 4:34:12 AM
17 August, 2009 4:34:12 AM
17 September, 2009 4:34:12 AM
17 October, 2009 4:34:12 AM
17 November, 2009 4:34:12 AM
17 December, 2009 4:34:12 AM
"%dd %MMMM, %yyyy %h:%mm:%ss %tt "

Here is a live sample that uses the "%d-%MMMM-%yyyy" formatting mask:

Live Sample:  Event Markers Input Data Sample - Parsing Timestamps with Month Names

to top

Timestamps with Weekday Names (e.g. Monday, 01/27/2009)

When you need to use a timestamp with a weekday name, like "Sunday, 5/15/2009", you can use the %ddd or %dddd tokens. The first one expects the abbreviated, and the second one - full weekday name. Please note that weekday name doesn't affect the date calculation at all.

Note: By default, the parser understands only English weekday names, if you need to parse weekday names in other languages, you need to redefine those in the locale settings.

To learn more about localizing weekday names, please see:

The table below demonstrates a few variants with weekday names in the formatting mask:

Description Timestamps Timestamp mask format
Shortened weekday at the beginning. Mon, 29 March 2010
Tue, 30 March 2010
Wed, 31 March 2010
Thu, 1 April 2010
Fri, 2 April 2010
Sat, 3 April 2010
Sun, 4 April 2010

"%ddd, %d %MMMM %yyyy"
Full weekday at the beginning. Monday, 29 March 2010
Tuesday, 30 March 2010
Wednesday, 31 March 2010
Thursday, 1 April 2010
Friday, 2 April 2010
Saturday, 3 April 2010
Sunday, 4 April 2010
"%dddd, %d %MMMM %yyyy"
Weekday as part of timestamp. 29 March - Monday, 2010
30 March - Tuesday, 2010
31 March - Wednesday, 2010
1 April - Thursday, 2010
2 April - Friday, 2010
3 April - Saturday, 2010
4 April - Sunday, 2010
"%d %MMMM - %dddd, %yyyy"

This live sample demonstrates event markers with timestamps that contain weekday names:

Live Sample:  Event Markers Input Data Sample - Parsing Timestamps with Days of Week

to top

12-hour time format (e.g. 5:35:30 PM)

The 12-hour clock is a time conversion convention, in which the 24 hours of the day are divided into two periods[1] called ante meridiem (a.m., Latin: "before mid day" English: "before noon") and post meridiem (p.m., Latin: "after mid day" English: "after noon"). Each period consists of 12 hours, numbered as 12 (acting as zero), 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, and 11.

A good starting point to learn more about this format is:

These are tokens that can be used for parsing timestamps in the 12-hour format:

Note: If you use the 12-hour time format, you must use the %t or %tt tokens in the format string and the AM/PM designators in timestamps. If the designator format is different from the default, you can change it. Changing designators is described in: AM/PM Designators

The table below demonstrates different variations of formatting masks along with sample timestamps:

Description Timestamps Timestamp mask format
Hours 12/6/2009 3 AM
12/6/2009 5 PM
12/6/2009 11 PM
12/6/2009 6 AM
"%M/%d/%yyyy %h %tt"
Hours + Minutes 12/6/2009 3:15 AM
12/6/2009 5:32 PM
12/6/2009 11:10 PM
12/6/2009 6:45 AM
"%M/%d/%yyyy %h:%mm %tt"
Hours + Minutes + Seconds 12/6/2009 3:15:10 AM
12/6/2009 5:32:27 PM
12/6/2009 11:10:18 PM
12/6/2009 6:45:14 AM
"%M/%d/%yyyy %h:%mm:%ss %tt"
Hours(with leading zero) 12/6/2009 03 AM
12/6/2009 05 PM
12/6/2009 11 PM
12/6/2009 06 AM
"%M/%d/%yyyy %hh %tt"
Hours(with leading zero) + Minutes 12/6/2009 03:15 AM
12/6/2009 05:32 PM
12/6/2009 11:10 PM
12/6/2009 06:45 AM
"%M/%d/%yyyy %hh:%mm %tt"
Hours(with leading zero) + Minutes + Seconds 12/6/2009 03:15:10 AM
12/6/2009 05:32:27 PM
12/6/2009 11:10:18 PM
12/6/2009 06:45:14 AM
"%M/%d/%yyyy %hh:%mm:%ss %tt"

Here is a live sample with the event markers that use the "%M/%d/%yyyy %h:%mm:%ss %tt" formatting:

Live Sample:  Event Markers Input Data Sample - Parsing Timestamps in 12 Hours Format

to top

24-hour time format (e.g. 17:35:30)

The 24-hour clock is a convention of time keeping, in which a day runs from midnight to midnight and is divided into 24 hours, indicated by the hours passed since midnight, from 0 to 23. This time notation system is the world's most commonly used one.

You can learn more about the 24-hour format in:

The following tokens are used for the 24-hour format:

The table below demonstrates a few variations of formatting masks along with 24-hour format timestamps:

Description Timestamps Timestamp mask format
Hours 23.12.2009 0
23.12.2009 17
23.12.2009 23
23.12.2009 4
"%MM.%dd.%yyyy %H"
Hours + Minutes 23.12.2009 15:23
23.12.2009 17:32
23.12.2009 11:10
23.12.2009 6:45
"%MM.%dd.%yyyy %H:%mm"
Hours + Minutes + Seconds 23.12.2009 3:15:10
23.12.2009 17:32:27
23.12.2009 11:10:18
23.12.2009 6:45:14
"%MM.%dd.%yyyy %H:%mm:%ss"
Hours(with leading zero) 23.12.2009 00
23.12.2009 17
23.12.2009 23
23.12.2009 04
"%MM.%dd.%yyyy %HH"
Hours(with leading zero) + Minutes 23.12.2009 15:23
23.12.2009 17:32
23.12.2009 11:10
23.12.2009 06:45
"%MM.%dd.%yyyy %HH:%mm"
Hours(with leading zero) + Minutes + Seconds 23.12.2009 03:15:10
23.12.2009 17:32:27
23.12.2009 11:10:18
23.12.2009 06:45:14
"%MM.%dd.%yyyy %HH:%mm:%ss"

The live sample below shows event markers with the "%dd.%MM.%yyyy %HH:%mm:%ss" formatting mask:

Live Sample:  Event Markers Input Data Sample - Parsing Timestamps in 24 Hours Format

to top

Unix Timestamps

Unix timestamp is a way to track time as a running total of seconds. This count starts at the Unix Epoch on January 1st, 1970. Therefore, unix timestamp is merely the number of seconds between a particular date and the Unix Epoch. This is very useful to computer systems for tracking and sorting dated data in dynamic and distributed applications, both online and client-side.

A good starting point to learn more about Unix Timestamp is:

The table below shows what timestamps of this format look like:

Timestamps Timestamp format string
1269680933
1269681053
1269681353
1269681653
1269681953
%u

Here is a sample XML for making the parser understand timestamps in this format:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <event_markers>
04     <groups>
05       <group chart="chart1" series="chart1Series" format="A">
06         <locale>
07           <date_time>
08             <format><![CDATA[%u]]></format>
09           </date_time>
10         </locale>
11         <events>
12           <event locale_based_date="1270733940" />
13           <event locale_based_date="1270735140" />
14           <event locale_based_date="1270736160" />
15           <event locale_based_date="1270736760" />
16           <event locale_based_date="1270738080" />
17           <event locale_based_date="1270739520" />
18           <event locale_based_date="1270741320" />
19           <event locale_based_date="1270744200" />
20           <event locale_based_date="1270745160" />
21           <event locale_based_date="1270745880" />
22         </events>
23       </group>
24     </groups>
25   </event_markers>
26 </stock>
01{
02  eventMarkers: {
03    groups: [
04      {
05        chart: "chart1",
06        series: "chart1Series",
07        format: "A",
08        locale: {
09          dateTime: {
10            format: "%u"
11          }
12        },
13        events: [
14          {
15            localeBasedDate: "1270733940"
16          },
17          {
18            localeBasedDate: "1270735140"
19          },
20          {
21            localeBasedDate: "1270736160"
22          },
23          {
24            localeBasedDate: "1270736760"
25          },
26          {
27            localeBasedDate: "1270738080"
28          },
29          {
30            localeBasedDate: "1270739520"
31          },
32          {
33            localeBasedDate: "1270741320"
34          },
35          {
36            localeBasedDate: "1270744200"
37          },
38          {
39            localeBasedDate: "1270745160"
40          },
41          {
42            localeBasedDate: "1270745880"
43          }
44        ]
45      }
46    ]
47  }
48}

The live sample below shows a chart with markers timestamped in Unix format:

Live Sample:  Event Markers Input Data Sample - Parsing Timestamps in Unix Time Format

to top

Timestamps in Milliseconds

You have two ways to use timestamps at a millisecond precision:

The table below demonstrates different variants of timestamps and masks with milliseconds:

Description Timestamps Timestamp mask format
Milliseconds since midnight January 1, 1970 1269689056645
1269689056768
1269689056891
1269689057014

"%T"
Tens of milliseconds 23.12.2009 23:15:10.2
23.12.2009 23:15:10.5
23.12.2009 23:15:10.2
23.12.2009 23:15:10.9
"%MM.%dd.%yyyy %H:%mm:%ss.%f"
Hundreds of milliseconds 23.12.2009 23:15:10.21
23.12.2009 23:15:10.58
23.12.2009 23:15:10.04
23.12.2009 23:15:10.95
"%MM.%dd.%yyyy %H:%mm:%ss.%ff"
Milliseconds 23.12.2009 23:15:10.218
23.12.2009 23:15:10.581
23.12.2009 23:15:10.047
23.12.2009 23:15:10.959
"%MM.%dd.%yyyy %H:%mm:%ss.%fff"

The live sample below demonstrates using several marker groups with different timestamps:

Live Sample:  Event Markers Input Data Sample - Parsing Timestamps in Milliseconds

to top

Timestamp Offset

When defining a data set, you can set timestamps offset specified in hours. This may be useful when the data is created in one time zone and then viewed in a different one. You can apply positive and negative offset to event markers and data sets.

Full description of offsets for CSV data is described at:

To set time offset, use the offset attribute in the <date_time>. node; it accepts values in hours, which can be positive, negative or fractional: -6.5 stands for 6 hours and 30 minutes back offset.

The sample XML below shows how to set a +6.5-hours offset:

XML/JSON Syntax
Plain code
02   <groups>
03     <group chart="idChart" series="idSeries2">
04       <locale>
05         <date_time offset="-6.5">
06           <format><![CDATA[%yyyy-%MM-%dd %HH:%mm]]></format>
07         </date_time>
08       </locale>
09       <events>
10         <event locale_based_date="2009-07-18 13:30" format="A" />
11         <event locale_based_date="2009-07-18 13:35" format="B" />
12         <event locale_based_date="2009-07-18 13:40" format="C" />
13         <event locale_based_date="2009-07-18 13:45" format="D" />
14         <event locale_based_date="2009-07-18 13:50" format="E" />
15         <event locale_based_date="2009-07-18 13:55" format="F" />
16       </events>
17     </group>
18   </groups>
01{
02  groups: [
03    {
04      chart: "idChart",
05      series: "idSeries2",
06      locale: {
07        dateTime: {
08          offset: -6.5,
09          format: "%yyyy-%MM-%dd %HH:%mm"
10        }
11      },
12      events: [
13        {
14          localeBasedDate: "2009-07-18 13:30",
15          format: "A"
16        },
17        {
18          localeBasedDate: "2009-07-18 13:35",
19          format: "B"
20        },
21        {
22          localeBasedDate: "2009-07-18 13:40",
23          format: "C"
24        },
25        {
26          localeBasedDate: "2009-07-18 13:45",
27          format: "D"
28        },
29        {
30          localeBasedDate: "2009-07-18 13:50",
31          format: "E"
32        },
33        {
34          localeBasedDate: "2009-07-18 13:55",
35          format: "F"
36        }
37      ]
38    }
39  ]
40}

Live sample shows three charts based on the same data set and with the same markers set, but different offset is used on each chart. On the last one offset is to the equal values:

Live Sample:  Event Markers Input Data Sample - Using Timestamps Offset

 

to top