Period Selector in JavaScript Range Navigator control

25 Jan 2023 / 4 minutes to read

The period selector allows to select a range with specified periods.

Periods

An array of objects that allows the users to specify pre-defined time intervals. The interval property specifies the count value of the button, and the text property specifies the text to be displayed on the button. The intervaltype property allows the users to customize the interval type, and it supports the following types:

Auto
Years
Quarter
Months
Weeks
Days
Hours
Minutes
Seconds

Source

Preview

index.ts

index.html

import { RangeNavigator, Chart, IChangedEventArgs, PeriodSelector, AreaSeries, DateTime, PeriodSelectorSettingsModel } from '@syncfusion/ej2-charts';

RangeNavigator.Inject(
PeriodSelector, DateTime, AreaSeries
);
import { chartData } from './datasource.ts';
let periodsValue: PeriodSelectorSettingsModel = {
periods: [
    { text: '1M', interval: 1, intervalType: 'Months' }, { text: '3M', interval: 3, intervalType: 'Months' },
    { text: '6M', interval: 6, intervalType: 'Months' }, { text: 'YTD' },
    { text: '1Y', interval: 1, intervalType: 'Years' },
    { text: '2Y', interval: 2, intervalType: 'Years', selected: true
     },
    { text: 'All' }
]
};
let range: RangeNavigator = new RangeNavigator(
    {
    valueType: 'DateTime',
    series: [
        {
            dataSource: chartData,
            xName: 'x', yName: 'close', type: 'Area', width: 2,

        }
    ], periodSelectorSettings: periodsValue,
    }, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-charts/styles/material.css" rel="stylesheet" />
    <!--style reference from the Calendar component-->
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 120px">
        <div id='element'></div>
    </div>
</body>

</html>

To use the period selector feature, inject the PeriodSelector module using the RangeNavigator.Inject(PeriodSelector) method.

Positioning period selector

The position property allows the users to position the period selector at the Top or Bottom.

Source

Preview

index.ts

index.html

import { RangeNavigator, Chart, IChangedEventArgs, PeriodSelector, AreaSeries, DateTime, PeriodSelectorSettingsModel } from '@syncfusion/ej2-charts';

RangeNavigator.Inject(
PeriodSelector, DateTime, AreaSeries
);
import { chartData } from './datasource.ts';
let periodsValue: PeriodSelectorSettingsModel = {
position: 'Top',
periods: [
    { text: '1M', interval: 1, intervalType: 'Months' }, { text: '3M', interval: 3, intervalType: 'Months' },
    { text: '6M', interval: 6, intervalType: 'Months' }, { text: 'YTD' },
    { text: '1Y', interval: 1, intervalType: 'Years' },
    { text: '2Y', interval: 2, intervalType: 'Years', selected: true
     },
    { text: 'All' }
]
};
let range: RangeNavigator = new RangeNavigator(
    {
    valueType: 'DateTime',
    series: [
        {
            dataSource: chartData,
            xName: 'x', yName: 'close', type: 'Area', width: 2,

        }
    ], periodSelectorSettings: periodsValue,
    }, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-charts/styles/material.css" rel="stylesheet" />
    <!--style reference from the Calendar component-->
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 120px">
        <div id='element'></div>
    </div>
</body>

</html>

Height

The height property allows the users to specify the height of the period selector. The default value of the height property is 43px.

Source

Preview

index.ts

index.html

import { RangeNavigator, Chart, IChangedEventArgs, PeriodSelector, AreaSeries, DateTime, PeriodSelectorSettingsModel } from '@syncfusion/ej2-charts';
import { EmitType } from '@syncfusion/ej2-base';

RangeNavigator.Inject(
PeriodSelector, DateTime, AreaSeries
);
import { chartData } from './datasource.ts';
let periodsValue: PeriodSelectorSettingsModel = {
height: 65,
periods: [
    { text: '1M', interval: 1, intervalType: 'Months' }, { text: '3M', interval: 3, intervalType: 'Months' },
    { text: '6M', interval: 6, intervalType: 'Months' }, { text: 'YTD' },
    { text: '1Y', interval: 1, intervalType: 'Years' },
    { text: '2Y', interval: 2, intervalType: 'Years', selected: true
     },
    { text: 'All' }
]
};
let range: RangeNavigator = new RangeNavigator(
    {
    valueType: 'DateTime',
    series: [
        {
            dataSource: chartData,
            xName: 'x', yName: 'close', type: 'Area', width: 2,

        }
    ], periodSelectorSettings: periodsValue,
    }, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-charts/styles/material.css" rel="stylesheet" />
    <!--style reference from the Calendar component-->
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 120px">
        <div id='element'></div>
    </div>
</body>

</html>

Visibility of range navigator

The disableRangeSelector property allows the users to display only the period selector and not the Range Selector.

Source

Preview

index.ts

index.html

import { RangeNavigator, Chart, IChangedEventArgs, PeriodSelector, AreaSeries, DateTime, PeriodSelectorSettingsModel } from '@syncfusion/ej2-charts';
import { EmitType } from '@syncfusion/ej2-base';

RangeNavigator.Inject(
PeriodSelector, DateTime, AreaSeries
);
import { chartData } from './datasource.ts';
let periodsValue: PeriodSelectorSettingsModel = {
periods: [
    { text: '1M', interval: 1, intervalType: 'Months' }, { text: '3M', interval: 3, intervalType: 'Months' },
    { text: '6M', interval: 6, intervalType: 'Months' }, { text: 'YTD' },
    { text: '1Y', interval: 1, intervalType: 'Years' },
    { text: '2Y', interval: 2, intervalType: 'Years', selected: true
     },
    { text: 'All' }
]
};
let range: RangeNavigator = new RangeNavigator(
    {
    disableRangeSelector: true,
    valueType: 'DateTime',
    series: [
        {
            dataSource: chartData,
            xName: 'x', yName: 'close', type: 'Area', width: 2,

        }
    ], periodSelectorSettings: periodsValue,
    }, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-charts/styles/material.css" rel="stylesheet" />
    <!--style reference from the Calendar component-->
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 120px">
        <div id='element'></div>
    </div>
</body>

</html>

Period Selector in JavaScript Range Navigator control

Periods

Positioning period selector

Height

Visibility of range navigator

See Also