Still have questions?
Contact support
You are looking at an outdated 7.11.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

Scroller

Overview

AnyStock provides a lot of features and tools to a chart viewer to make the working process rather comfortable and easily navigate these time based charts. The core navigation tool is Scroller, which is described in this article.

Scroller is a complex component, which consists of the several configurable parts: Scroller itself, thumbnail series in its background (optional) and thumbs. Actually, it looks almost like a thumbnail chart which has a couple of managing tools.

Scroller in AnyStock charts is much alike basic Scroller, which you can find information about here. In this article we will mostly focus on those features that differ the AnyStock Scroller from the Basic one.

Enable

We use standard enabled() method to switch the scroller on and off. While the scroller is enabled by default, you can always switch it off by setting "false" to this method :

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

JsFiddle Playground

Also, we can pass the "true" or "false" value straight to the scroller() method.

JsFiddle Playground

Now you can see that there is a scroller shown up, but the general view has not changed (though, you can drag the scroller thumbs and change the view).

Let's now look at the features of the scroller we can adjust.

Adjust

As we have already noted, the Stock Scroller has both the Basic Scroller features and special ones. Let's work with basic features first.

Basic Adjusting

Note that we cannot change the position of the scroller as well as its orientation, as its function is to scroll the time (X) axis. Also, it cannot hide automatically. Though, we are able to change the visual settings of the scroller. Look at the sample below. We have set the default zoom to only 10 points, disabled thumbs, changed the scroller color and prohibited the range changing. For all these changes we used selectedRange(), thumbs(), fill(), selectedFill() and allowRangeChange():

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

JsFiddle Playground

Note that opposite to scroller in basic charts, we can zoom the AnyStock charts only by setting the selected range.

Background Series

Now, as we have tried to change some elements that are common for the AnyStock and the Basic scroller, let's adjust some params that only AnyStock scroller can have. We can add any of supported series to the scroller if necessary, so the scroller will display a thumbnail AnyStock chart in its background. Let's define the thumbnail series of column type and look at it:

JsFiddle Playground

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

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

Scroller Axis

There's one more feature that only AnyStock scroller has - an additional axis inside, which helps to control the shown and hidden parts of the data and not to get lost. It's enabled by default, but we can disable it:

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

JsFiddle Playground

We can also adjust the labels of the axis. For example, let's make them of black color and format them to show the first day of each month.

// adjust the scroller axis

var labels = chart.scroller().xAxis().labels();

var minorLabels = chart.scroller().xAxis().minorLabels();
    
labels.textFormatter(function() {
  return anychart.format.dateTime(this.tickValue, 'dd MMM yyyy');
});
labels.fontColor('#000');

minorLabels.textFormatter(function(){
  return anychart.format.dateTime(this.tickValue, 'dd MMM yyyy');
});
minorLabels.fontColor('#000');

JsFiddle Playground

Events

Each time when a user interacts with a chart, there's an event object generated by JavaScript that represents the user's actions. Events are distributed to the chart elements (title, legend, axis, etc.), and we can use them to make any of those elements to somehow respond. To use events for such purposes we need event listeners as well - you can find any necessary information about them in Event Listeners article.

There are 8 special events for scroller, which you can use to provoke some reaction from your chart or from scroller itself. Let's look at the list of those events.

Events that can be listened by a scroller:

  • scrollerchange - dispatches when we change a scroller somehow
  • scrollerchangefinish - dispatches when we change the end value of the scroller
  • scrollerchangestart - dispatches when we change the start value of the scroller
  • selectedrangebeforechange - dispathes before we change the selected range of the scroller
  • selectedrangechange - dispatches when change a scroller selected range somehow
  • selectedrangechangefinish - dispatches when we change a scroller selected range end value
  • selectedrangechangestart - dispatches when we change a scroller selected range start value

There is also an event that is perceived by a chart

  • scrollChange - dispatches when we change a scroller somehow

Now, let's create a couple of event listeners with these events.

// events
chart.scroller().listen("scrollerchange", function(){
  chart.title("You have changed the scroller");
});

chart.scroller().listen("scrollerchangestart", function(){
  chart.title("You have changed the start value of the scroller");
});

chart.scroller().listen("scrollerchangefinish", function(){
  chart.title("You have changed the end value of the scroller");
});

JsFiddle Playground