Range Selection UI

Overview

Range Selection UI is on of the great chart navigation features AnyStock provides to a chart viewer to make the data mining process comfortable and easily navigate these time based charts. The core navigation tool is Scroller, which is described in Scroller article.

Range Selector helps to use scroller by providing a set of buttons to select certain periods of time.

Range Picker helps to use scroller by providing two input fields of preset format so a user can type in start and end dates.

Modules

Both the range selector and range picker require the Common UI module:

<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-ui.min.js"></script>  

Also, you should reference the anychart-ui.min.css file:

<link rel="stylesheet" type="text/css" href="https://cdn.anychart.com/releases/8.12.0/css/anychart-ui.min.css"/>

Learn more: Modules.

Add to a chart

The easiest way to add range selector or range picker is to add them (render to) to an instance of a stock chart. You need to create them using constructor methods rangeSelector() and rangePicker before that:

chart = anychart.stock();

var rangeSelector = anychart.ui.rangeSelector();
var rangePicker = anychart.ui.rangePicker();

chart.title("Render the range selectors into a chart instance");

chart.container("container");
chart.draw();

// Render the range picker into an instance of a stock chart
rangePicker.render(chart);
rangeSelector.render(chart);

Playground

Add to a separate DIV

You can choose to render Range Selector or Range Picker into a separate div, in this case you have to specify what instance of a stock chart it controls using target() method:

chart = anychart.stock();

var rangeSelector = anychart.ui.rangeSelector();
var rangePicker = anychart.ui.rangePicker();

// specify which chart range selector controls
rangeSelector.target(chart);
rangePicker.target(chart);

// render the chart
chart.container("container");
chart.draw();

// Render the range selection controls into containers on a page
rangeSelector.render(document.getElementById("rangeselectorContainer"));
rangePicker.render(document.getElementById("rangepickerContainer"));

Playground

Adjusting Range Selector

Customizing preset periods

To customize preset periods you need to use ranges() array and change the fields you want to change or remove items you don't want to see. Each element of this array is an object of Range type and contains the following fields:

Field Type Description
anchor anychart.enums.StockRangeAnchor Range starting point.
type anychart.enums.StockRangeType Type of range measurement: preset or unit.
unit anychart.enums.Interval When type is set to 'unit' - range measurement.
count Number When type is set to 'unit' (and unit is set) or 'points' - number of units or points.
startDate String Start date for the fixed range when type is set to 'range'.
endDate String End date for the fixed range when type is set to 'range'.
text String Text to display.

Modification of the fields may look like this:

var rangeSelector = anychart.ui.rangeSelector();

// get a copy of existing ranges
var customRanges = rangeSelector.ranges();

// remove the last element
customRanges.pop();
// modify the first element
customRanges[0].type = "unit";
customRanges[0].unit = "day";
customRanges[0].count = 5;
customRanges[0].text = "5 DAYS";

// apply the changes
rangeSelector.ranges(customRanges);

Playground

Creating custom periods

You can completely override the list of ranges and specify your own list:

var rangeSelector = anychart.ui.rangeSelector();

var customRanges = [
    {
        'text': '5 Days',
        'type': 'unit',
        'unit': 'day',
        'count': 5,
        'anchor': 'first-visible-date'
    },
    {
        'text': 'Year 2007',
        'startDate': '2007 Jan 1',
        'endDate': '2007 Dec 31',
        'type': 'range'
    },
    {
        'text': 'Full Range',
        'type': 'max'
    },
    {
        'text': '10',
        'type': 'points'
        'count': 10,
        'anchor': 'last-date'
    }
];

// Set custom ranges for the range selector.
rangeSelector.ranges(customRanges);

Playground

Zoom To Label

You can change the text in the label that accompanies Range selector using zoomLabelText() method:

var rangeSelector = anychart.ui.rangeSelector();
rangeSelector.zoomLabelText("Show:");

Adjusting Range Picker

Input date format

If you want to change input format of range picker fields use format():

var rangePicker = anychart.ui.rangePicker();

// Set date time format.
rangePicker.format('dd MM yyyy');

Playground

From and To Labels

You can change the text of labels using fromLabelText() and toLabelText() method:

var rangePicker = anychart.ui.rangePicker();
rangePicker.fromLabelText("Start:");
rangePicker.toLabelText("End:");