Zooming and Scrolling

When you deal with a large amount of data, providing an efficient way of navigating this data is essential. In this section, you will learn how to implement scrolling and zooming in the Chart widget.

The Chart and RangeSelector widgets can operate together, allowing an end-user to zoom and scroll through a chart. Follow the steps below to implement these capabilities.

• Configure Chart

  Create and configure the Chart widget using one of the available data-binding approaches. For details, see the "Create and Configure a Widget" guide for jQuery, AngularJS or Knockout.

  JavaScript

  var chartOptions = {
      // Chart configuration
  };

• Configure RangeSelector

  Create and configure the RangeSelector widget in a similar manner. Chart and RangeSelector must have completely identical argument axes. Hence, you need to assign the same data source to both widgets.

  JavaScript

  var dataSource = [...];
  var chartOptions = {
      dataSource: dataSource,
      // ...
  };
  var rangeSelectorOptions = {
      dataSource: dataSource,
      // ...
  };

  Optionally, you can display the chart in miniature in the background of RangeSelector. For this purpose, assign the same array of series configurations to both widgets.

  JavaScript

  var dataSource = [...];
  var series = [...];
  var chartOptions = {
      dataSource: dataSource,
      series: series
      // ...
  };
  var rangeSelectorOptions = {
      dataSource: dataSource,
      chart: {
          series: series    
      }
      // ...
  };

• Implement Widget Interaction

  To make Chart and RangeSelector interact with each other, handle the valueChanged event. For this purpose, assign a function to the onValueChanged option of RangeSelector. Within this function, call the zoomArgument method of the chart instance. This method accepts the start and end range values as its parameters.

  JavaScript

  var rangeSelectorOptions = {
      // ...
      onValueChanged: function (e) {
          chartInstance.zoomArgument(e.value[0], e.value[1]);
      },
      behavior: { callValueChanged: 'onMoving' }
  };

  NOTE

  The valueChanged event can fire either when an end-user keeps dragging the sliders or when he/she has released them. This depends on the value of the behavior.callValueChanged option. When implementing zooming/scrolling, make sure that this option is set to 'onMoving'.

  By default, the chart adjusts its value axis to the currently selected minimum and maximum values. To change this behavior, set the adjustOnZoom option to false.

Free and Fixed Range Scrolling

Following the steps above, you get free range scrolling. It means that an end-user scrolls the chart by selecting a range in RangeSelector and dragging it to any side. You can fix the selected range. In this instance, an end-user will be able to scroll the chart dragging the predefined range. For this purpose, set the minRange and maxRange option of the scale configuration object to the same value. Then, specify the initial range using the value array.

var rangeSelectorOptions = {
    // ...
    scale: {
        minRange: 10,
        maxRange: 10,
    },
    value: [0, 10]   
};

The Chart widget allows you to enable built-in scrolling and zooming. You can use the mouse wheel or the "pinch" gesture for zooming and the horizontal slide gesture across the chart (using mouse or touch interface) for scrolling.

You can enable mouse support, touch support or both by assigning corresponding values to the scrollingMode and/or zoomingMode options.

var chartOptions = {
    // ...
    scrollingMode: "all", // "touch", "mouse"
    zoomingMode: "all"    // "touch", "mouse"
};

View Demo

In addition to scrolling by mouse and touch gestures, you can display a separate visual element for scrolling called scroll bar.

The scroll bar is configured using the scrollBar object. Set the visible field of this object to true to display the scroll bar.

var chartOptions = {
    // ...
    scrollingMode: "all",
    zoomingMode: "all",

    scrollBar: {
        visible: true,
        //...
    }
};

View Demo

To learn more about the scroll bar as a visual element, refer to the Chart Elements | Scroll Bar topic.