Scroller

• Overview
• Basics
  • Background Series
  • Scroller Axis
• Events
• Preserve Selected Range

Overview

Scroller is a main navigational control AnyStock provides to a chart viewer to make chart comprehension process comfortable and easy.

Scroller is a complex component that consists of the several configurable parts: Scroller itself, optional thumbnail series in its background and thumbs.

Note: this is a Scroller for Stock charts, basic charts have their own basic scroller with slightly different settings.

The scroller is enabled by default, it is possible to enable/disable the scroller by passing the "true" or "false" value to the scroller() method or enabled() method:

// turn scroller on
chart.scroller(true);

// turn it off
chart.scroller().enabled(false);

Basics

There are several basic methods to configure the scroller:

• selectRange()
• thumbs()
• fill()
• selectedFill()
• allowRangeChange()

  // adjust the scroller
  chart.selectRange('2004-01-02','2004-01-15');
  chart.scroller().thumbs(false);
  chart.scroller().fill('green 0.1');
  chart.scroller().selectedFill('green 0.5');
  chart.scroller().allowRangeChange(false);
  

Background Series

Scroller can display one of the supported series in the background. It is done pretty much like creating a series in a plot:

// create scroller series with mapped data
chart.scroller().column(mapping);

Visit Supported series article to know more about series supported by AnyStock Charts.

Scroller Axis

Stock scroller has an extra X-axis inside, it can be disabled or configured using the xAxis() method:

// disable the scroller axis
chart.scroller().xAxis(false);

To adjust the labels of the scroller axis work with it like with any other axis in Stock Charts.

// access labels
labels = chart.scroller().xAxis().labels();
minorLabels = chart.scroller().xAxis().minorLabels();

// set major labels text format
labels.format(function () {
  return "'" + anychart.format.dateTime(this.tickValue, "yy");
});
// set labels color
labels.fontColor('#000000');

// set minor labels text format
minorLabels.format(function() {
  return anychart.format.dateTime(this.tickValue, 'MMM, d');
});

// set minor labels font 
minorLabels.fontColor('#000000');
minorLabels.fontSize(9);

Events

You can handle scroller events using event listeners (find out more about them in Event Listeners article).

There are 4 events that can be handled when the selected time range changes. These events can be used to handle user actions, e.g., to display a chosen time interval as text or to update any extra UI elements.

Events that can be listened by a chart:

• selectedrangebeforechange - dispatches before user changes the selected range of the scroller
• selectedrangechangestart - dispatches when user starts changing a scroller, on mouseDown event
• selectedrangechange - dispatches when user changes a scroller somehow, on mouseMove event
• selectedrangechangefinish - dispatches when user releases the mouse button and finishes the scroller change, on mouseUp event

Here is a sample listener:

// events
chart.listen("selectedrangechangestart", function(e){
    chart.title("The selected range is: " + anychart.format.dateTime(e.firstSelected, 'dd MMM yyyy') + " - " + anychart.format.dateTime(e.lastSelected, 'dd MMM yyyy'));
});

Here is a live sample:

Preserve Selected Range

The preserveSelectedRangeOnDataUpdate() method is used to define the behavior of Scroller when data is streamed. By default the selected range is visually the same, if set to 'true' - it stays the same logically.

chart.preserveSelectedRangeOnDataUpdate(true);