Date-Time Values in Chart Settings

Overview

A lot of attributes in AnyChart Stock's XML Settings are of the Date-Time type. In order to set values of this type, you should always use one predefined format, which is described in this section.

Note: You can use any input date-time format in data sources, and you can display date time values in any format as well; this hard-coded predefined format deals only with the internal settings listed below.

to top

Format Description

So, all the internal settings should follow this format mask: yyyy-MM-dd HH:mm:ss.fff

Part Description
yyyy Four-digit year, for example: 1999, 2001, 2008.
MM Month number with leading zero: 01, 02, ... 11, 12.
dd Day number with leading zero: 01, 02, ... 30, 31.
HH Hour in 24-hour mode with leading zero: 00, 01, ... 22, 23.
mm Minutes with leading zero: 00, 01, ... 58, 59.
ss Seconds with leading zero: 00, 01, ... 58, 59.
fff Milliseconds with leading zeros: 001, 002, ... 998, 999.

Sample full date in this format: 2010-04-01 17:24:30.067

When specifying values in this format, make sure to have set all the separator symbols properly and in place: dash "-", colon ":", space " " and dot ".".

You can omit the lesser units if you don't need them, but don't forget to omit the preceding separator as well.

The table below lists all the possible variants for omitting units. The Date Time Value column shows what you provide to the component, and the Result Timestamp shows how the component reads it:

Description Date Time Value Result Timestamp
Full Date Time 2010-04-12 17:24:30.067 2010-04-12 17:24:30.067
Seconds Precision 2010-04-12 17:24:30 2010-04-12 17:24:30.000
Minutes Precision 2010-04-12 17:24 2010-04-12 17:24:00.000
Hours Precision 2010-04-12 17 2010-04-12 17:00:00.000
Date only 2010-04-12 2010-04-12 00:00:00.000
Month Precision 2010-04 2010-04-01 00:00:00.000
Year Precision 2010 2010-01-01 00:00:00.000

For example, suppose you want to set a custom time-range to be shown on the timescale. You do that using the start_date and end_date attributes of the <selected_range> node. These attributes get the Date-Time values, and we want to have the Hours precision. Here is the XML that does that for our settings:

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   <settings>
04     <time_scale>
05       <selected_range type="Custom" start_date="2010-04-01 16:00" end_date="2010-04-01 17:00" />
06     </time_scale>
07   </settings>
08 </stock>
01{
02  settings: {
03    timeScale: {
04      selectedRange: {
05        type: "Custom",
06        startDate: "2010-04-01 16:00",
07        endDate: "2010-04-01 17:00"
08      }
09    }
10  }
11}

Now, if you do the same, but your original data comes with the Daily precision, you can omit the hours:

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   <settings>
04     <time_scale>
05       <selected_range type="Custom" start_date="2010-01-01" end_date="2010-04-01" />
06     </time_scale>
07   </settings>
08 </stock>
01{
02  settings: {
03    timeScale: {
04      selectedRange: {
05        type: "Custom",
06        startDate: "2010-01-01",
07        endDate: "2010-04-01"
08      }
09    }
10  }
11}

Note: Be careful when setting Date-Time values and always follow the format; otherwise, in some cases the engine may be unable find the error, and that may cause incorrect behavior of the component.

to top

Applicability

The table below lists all the places where this format is applicable and should be strictly observed. The Settings column lists the applicable nodes and attributes:

# Description Settings
Set range shown on chart. start_date and end_date attributes of the <selected_range> node .
Set range for the custom preset button on the Range Selector. start_date and end_date attributes of the <range> node.
Set base date for time offset in the data set locale settings. base_date attribute of the <date_time> node.
Set base date where series comparison starts. base_date attribute of the <scale> node.
Set any Line Axis Marker position. date attribute of the <line_marker> node.
Set Range Axis Marker bounds. start_date and end_date attributes of the <range_marker> node.
Set timestamp of an event marker. date attribute of the <event> node.

to top