Scroller

• Overview
• Zoom Settings
  • Limits by ratio
  • Limits by values
  • Limits by the number of points
  • Get the limits ratio
  • Allow range change
• Scroll bar
  • Orientation
  • Position
  • Colors
  • Size
  • Thumbs
• Live update
  • Auto hide
• Events

Overview

Sometimes when there is too much data that it cannot be displayed simultaneously keeping it comfortable for understanding. In this case we can enable the scroller.

Use enabled() method to switch the scroller on and off. Passing true to the xScroller() and/or the yScroller() method is a short way to enable scroller(s):

var chart = anychart.column();

// turn on X Scroller
chart.xScroller(true);

// disable X Scroller
chart.xScroller().enabled(false);

// turn on Y Scroller
chart.yScroller(true);

// disable Y Scroller
chart.yScroller().enabled(false);

Zoom Settings

Both scrollers can be configured in the same way using xZoom() and yZoom() methods.

Limits by ratio

The simplest way of limiting the show area is using the ratio. Do this with the setTo() method for that. Use two values with this method: the start ratio value (e.g., 0) and the end one (e.g., 0.3):

// set zoom ratio
chart.xZoom().setTo(0, 0.3);

Limits by values

Another option is to define the particular values which exist on the scale. In this case you have to set the scale as the third parameter, the default xScale is used when no scale is specified. If you like to zoom the chart to the area from "Part 1" to "Part 4" on the heatmap we should use the setToValues() method:

Note: only Heat maps support scroll or zoom by Y in this version.

// set zoom limits by values
chart.yZoom().setToValues("Part 1", "Part 4");

Limits by the number of points

The third way of setting the limits is to set the number of points from the beginning or end of the scale. We set the number of points, the second boolean parameter defines if the points should be counted from the end of the scale and the third parameter is the scale. The point will be counted from start by default, if you need them to be counted from end, set true as the second value.

// set limits using a number of points
chart.xZoom()setToPointsCount(10, true);

Get the limits ratio

To get the limiting points ratio using getStartRatio() and getEndRatio() methods.

// set the xZoom
var xZoom = chart.xZoom();

// Zooms series by defined points count
xZoom.setToPointsCount(5);

// get the limits ratio
chart.title("The chart shows the part from " + xZoom.getStartRatio() + " and ends at " + xZoom.getEndRatio());

Allow range change

To limit the amount of items displayed you can use the allowRangeChange() method.

// forbid scroller range change
chart.xScroller().allowRangeChange(false);

Scroll bar

The scroll bar is flexible in its look and behavior, you can change colors, size, position, etc.

Orientation

With the orientation() method you can set the orientation of the scroller.

// change the scroller orientation
chart.xScroller().orientation("top");
chart.yScroller().orientation("left");

Position

Scroller can be displayed in "afterAxes" or "beforeAxes" positions. The "afterAxes" position is set by default.

// change the scroller orientation
chart.xScroller().position("beforeAxes");

Colors

Colors of the scroll bar can be easily changed with simple methods fill(), selectedFill() and outlineStroke():

// set the fill color
chart.xScroller().fill("#33CC33");

// set the selected fill color
chart.xScroller().selectedFill("#339966");

// set the stroke of the bar
chart.xScroller().outlineStroke("#33CC33", 2);

Size

To adjust scroll bar height (width) use the height() method. There are also maxHeight() and minHeight() methods which are useful when your charts are being resized.

// set the bar height
chart.xScroller().minHeight(5);

// set the bar height
chart.xScroller().maxHeight(35);

Thumbs

The scroll bar thumbs can be adjusted too. You change their look, dimensions or enable/disable them.

• enabled() method enables and disables thumbs.
  • autoHide() method sets if thumbs are displayed only when the scroll bar is hovered over.
  • fill() and stroke() color thumbs in the default state.
  • hovered() to color thumbs in the hover state.

    // adjusting the thumbs behavior and look
    chart.xScroller().thumbs().autoHide(true);
    chart.xScroller().thumbs().hoverFill("#FFD700");
    

Live update

By default, the chart is changing while being scrolled. To redraw a chart only when the mouse button is released use the continuous() method. This may improve user experience when you show very large data sets.

// prevent the scrolling while the button is not released yet
chart.xZoom().continuous(false);

Auto hide

You can prevent the scroller from showing if there is no need in it. Use the autoHide() method in such cases:

// autoHide the scroller
chart.xScroller().autoHide(true);

In this sample a dataSet has 20 points, zoom settings allow to show only 15. You can remove points simply by clicking them, and when 15 or less are left - scroll bar will disappear.

Events

Basic information about event listeners can be found in the Event Listeners tutorial.

There are three events which scroller can dispatch:

• scrollerchange
• scrollerchangestart
• scrollerchangefinish.

These events are dispatched when we drag the scroll bar, click on it or change it's size. All events provide information about the source of changes (thumbDrag, selectedRangeDrag or backgroundClick), the startRatio and endRatio values.

Here is the sample of scrollerchangefinish event listener:

// add a listener
chart.xScroller().listen("scrollerchangefinish", function(e){
    var startRatio = e.startRatio;
    var endRatio = e.endRatio;
    // change the chart title
    chart.title("The chart shows the part from " + startRatio + " and ends " + endRatio);
});