Adaptive Date-Time Formatting

Overview

Zooming in and out on a chart changes its grouping level and detailing of the data.

For example, suppose a range legend that shows daily data displays something like "3 Mar, 2009" or "16 Apr, 2009". Now, if you zoom out on it and make the component group the data into the monthly interval, the legend will display "1 Mar, 2009" or "1 Apr, 2009". However, for this legend item the new view would be somewhat confusing - for the day number would be excessive.

Another example is the situation where the data being displayed has the millisecond precision: The timestamp that originally looks like "26 Apr, 2009 20:15:45.023" on the month level would also appear as: "1 Apr, 2009 00:00:00.000".

To avoid this problem and make the chart elements look appropriate on any level of grouping, you can take advantage of adaptive formatting. The illustration below shows how adaptive formatting may change the format of a legend item on different levels of grouping:

This live sample shows two charts: The first one uses uniform formatting for the legend and the separated tooltips; the second one uses adaptive formatting:

Live Sample:  Adaptive Date-Time Formatting - Standard vs Adaptive

As you can see here, adaptive formatting offers better data representation, and its only drawback is its somewhat complex settings. Nevertheless, in this article we will try to give you the full guidance on the implementation, so that you could easily implement adaptive formatting in your application.

How It Works

First of all, adaptive formatting works only when you use data grouping ; if the grouping is not used - adaptive formatting settings won't anyhow affect the way how the data appears.

It is strongly recommended to study the Data Grouping and Values Approximation and Date-Time Formatting articles before you start working with the adaptive formatting settings.

Thus, adaptive formatting allows setting different format for different grouping levels for each chart element that supports Date Time Tokens.

Let's take a look at the following XML, which configures grouping intervals:

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     <data_grouping enabled="true" max_visible_points="500">
05       <intervals>
06         <interval unit="Day" count="1" />
07         <interval unit="Week" count="1" />
08         <interval unit="Month" count="1" />
09       </intervals>
10     </data_grouping>
11   </settings>
12 </stock>
01{
02  settings: {
03    dataGrouping: {
04      enabled: true,
05      maxVisiblePoints: 500,
06      intervals: [
07        {
08          unit: "Day",
09          count: 1
10        },
11        {
12          unit: "Week",
13          count: 1
14        },
15        {
16          unit: "Month",
17          count: 1
18        }
19      ]
20    }
21  }
22}

As you can see here, there are three intervals: One Day, One Week and One Month.

Now we will take a look at the adaptive formatting settings for focus:

XML/JSON Syntax
Plain code
01 <legend>
02   <title>
03     <focus_settings>
04       <mouse_over>
05         <format><![CDATA[{%Date.Current}{"%MMM %d, %yyyy"}: ]]></format>
06         <interval_formats>
07           <interval_format unit="Week" count="1">
08             <format><![CDATA[Week.Current {%Date}{"%ee of %yyyy"}: ]]></format>
09           </interval_format>
10           <interval_format unit="Month" count="1">
11             <format><![CDATA[{%Date.Current}{"%MMMM %yyyy"}: ]]></format>
12           </interval_format>
13         </interval_formats>
14       </mouse_over>
15       <mouse_out>
16         <format><![CDATA[{%Date.LastVisible}{"%MMM %d, %yyyy"}: ]]></format>
17         <interval_formats>
18           <interval_format unit="Week" count="1">
19             <format><![CDATA[Week {%Date.LastVisible}{"%ee of %yyyy"}: ]]></format>
20           </interval_format>
21           <interval_format unit="Month" count="1">
22             <format><![CDATA[{%Date.LastVisible}{"%MMMM %yyyy"}: ]]></format>
23           </interval_format>
24         </interval_formats>
25       </mouse_out>
26     </focus_settings>
27   </title>
28 </legend>
01{
02  title: {
03    focusSettings: {
04      mouseOver: {
05        format: "{%Date.Current}{\"%MMM %d, %yyyy\"}: ",
06        intervalFormats: [
07          {
08            unit: "Week",
09            count: 1,
10            format: "Week.Current {%Date}{\"%ee of %yyyy\"}: "
11          },
12          {
13            unit: "Month",
14            count: 1,
15            format: "{%Date.Current}{\"%MMMM %yyyy\"}: "
16          }
17        ]
18      },
19      mouseOut: {
20        format: "{%Date.LastVisible}{\"%MMM %d, %yyyy\"}: ",
21        intervalFormats: [
22          {
23            unit: "Week",
24            count: 1,
25            format: "Week {%Date.LastVisible}{\"%ee of %yyyy\"}: "
26          },
27          {
28            unit: "Month",
29            count: 1,
30            format: "{%Date.LastVisible}{\"%MMMM %yyyy\"}: "
31          }
32        ]
33      }
34    }
35  }
36}

You can see that in <mouse_over> and <mouse_out>, besides the usual <format> node, we have the <interval_formats> node with the formats defined for each interval.

For each interval in the <interval_format> node, you have to set the unit and count attributes, and their values must match the same attributes in the grouping interval settings. For each interval you can also set its own formatting in <format> node using the {%Date} token and its formatting.

If we apply our knowledge we have obtained from the snippets above, we can create live samples similar to this one:

Live Sample:  Adaptive Date-Time Formatting - Simple Example

to top

Applicability

Please note: Adaptive formatting is available only to the elements that are directly involved in displaying data. The illustration below highlights all of them:

The table below lists all the elements that support adaptive formatting and shows the links to the XML Reference nodes used for setting adaptive formatting for these elements:

# Element XML and Settings
Legend: Title label Description: Legend: Title and Date-Time Labels

Adaptive formatting:
X-Axis: Line marker Description: X-Axis: Line Markers

Adaptive formatting:
Separated tooltip text Description: Separated Tooltips

Adaptive formatting:
Legend: Date-time label Description: Legend: Title and Date-Time Labels

Adaptive formatting:
Event-Marker tooltip text Description: Event-Markers: Internal Tooltips

Adaptive formatting:
Grouped tooltip title Description: Grouped Tooltips: Basic Settings

Adaptive formatting:

X-Axis: Date highlighter

Description: X-Axis: Date Highlighter

Adaptive formatting:
X-Axis: Range marker Description: X-Axis: Range Markers

Adaptive formatting:
Range picker edit-boxes Description: Range Picker

Adaptive formatting:

to top