Range Selection UI

• Overview
• Modules
• Add to a chart
• Add to a separate DIV
• Adjusting Range Selector
  • Customizing preset periods
  • Creating custom periods
  • Zoom To Label
• Adjusting Range Picker
  • Input date format
  • From and To Labels

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.13.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.13.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);

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"));

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:

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);

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);

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');

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:");