Chart Zooming and Scrolling

When you deal with a large amount of data, you need to provide an easy way for navigating through it. In this section, you will learn how to implement scrolling and zooming in the dxChart widget.

Use Range Selector

The dxChart and dxRangeSelector widgets can work together, allowing you to scroll the chart. This topic will teach you to set up the dxChart and dxRangeSelector widgets so that they work together.

Scrolling

Two scroll modes will be demonstrated: selecting a required range on a chart and scrolling the chart with a fixed range. Follow the steps below to implement chart scrolling.

  • Set up dxChart Options
    Create and set up the dxChart widget using its configuration object.

    JavaScript
    $("#chartContainer").dxChart({
        //...   
    });
  • Set up dxRangeSelector Options
    Create and set up the dxRangeSelector using its configuration object. Since your range selector and chart must have the same argument axes, you must utilize the chart's data source as the range selector's data source by setting the former to the range selector's dataSource property. Optionally, you can place your chart view as the range selector's background. To do so, define the dxRangeSelector's chart configuration object. Set its series property to the series array of your chart.

    JavaScript
    var dataSource = [...];
    $("#chartContainer").dxChart({
        dataSource: dataSource,
    });
    $("#rangeSelectorContainer").dxRangeSelector({
        dataSource: dataSource,
        chart: {
            series: series
        }   
    });
  • Implement Widgets Interaction
    Implement a function that sets the visible range of the dxChart's argument axis to the range selected on the dxRangeSelector. Assign it to the dxRangeSelector's onSelectedRangeChanged property.

    JavaScript
    $("#rangeSelectorContainer").dxRangeSelector({
        behavior: {
            callSelectedRangeChanged: "onMoving"
        },
        onSelectedRangeChanged: function (e) {
            var zoomedChart = $("#zoomedChart").dxChart('instance');
            zoomedChart.zoomArgument(e.startValue, e.endValue);
        }       
    });

    As you can see in the code above, the onSelectedRangeChanged function will be called when moving range selector sliders, since the callSelectedRangeChanged property is set to onMoving.

  • Keep Value Axis Range
    To keep the visible range of the chart's value axis, set the dxChart's adjustOnZoom property to false when scrolling the argument axis.

    JavaScript
    $("#chartContainer").dxChart({
        adjustOnZoom: false,
    });

Free and Fixed Range Scrolling

When following the steps above, you get free scrolling. This means that an end user will be able to scroll to any part of the chart by selecting the required range in the range selector and dragging it to any side. You can fix the selected range in the range selector. In this instance, an end-user will be able to scroll the chart, dragging the predefined visible range. To do this, set the minRange and maxRange properties of the dxRangeSelector's scale configuration object to the same value.

JavaScript
$("#rangeSelectorContainer").dxRangeSelector({
    scale: {
        minRange: 10,
        maxRange: 10,
    },
    selectedRange: {startValue: 0, endValue:10}      
});

Using a similar technique, you can implement chart zooming. For details, refer to the Zooming topic.

Show Example:
jQuery
<div id="chartContainer" style="height: 350px;max-width:800px;margin: 0px auto"></div>
<div id="rangeSelectorContainer" style="height: 80px;max-width:800px;margin: 0px auto"></div>
var dataSource =  [
    { arg: 10, y1: -12, y2: 10, y3: 32 },
    { arg: 20, y1: -32, y2: 30, y3: 12 },
    { arg: 40, y1: -20, y2: 20, y3: 30 },
    { arg: 50, y1: -39, y2: 50, y3: 19 },
    { arg: 60, y1: -10, y2: 10, y3: 15 },
    { arg: 75, y1: 10, y2: 10, y3: 15 },
    { arg: 80, y1: 30, y2: 100, y3: 130 },
    { arg: 90, y1: 40, y2: 110, y3: 140 },
    { arg: 100, y1: 50, y2: 90, y3: 90 },
    { arg: 105, y1: 40, y2: 145, y3: 120 },
    { arg: 110, y1: -12, y2: 10, y3: 32 },
    { arg: 120, y1: -32, y2: 30, y3: 12 },
    { arg: 130, y1: -20, y2: 20, y3: 30 },
];

var series = [{
        argumentField: 'arg',
        valueField: 'y1'
    }, {
        argumentField: 'arg',
        valueField: 'y2'
    }, {
        argumentField: 'arg',
        valueField: 'y3'
    }];

var zoomedChart = $("#chartContainer").dxChart({
    adjustOnZoom: false,
    argumentAxis: {
        indentFromMin: 0.02,
        indentFromMax: 0.02
    },
    dataSource: dataSource,
    series: series,
    legend:{
        visible: false
    }
}).dxChart("instance");

zoomedChart.zoomArgument(75, 130);

$("#rangeSelectorContainer").dxRangeSelector({
    size: {
        height: 120
    },
    margin: {
        left: 10
    },
    scale: {
        divisionValue: 1,
        minRange: 10
    },
    dataSource: dataSource,
    selectedRange: {
        startValue: 75, endValue: 130
    },
    chart: {
        series: series
    },
    behavior: {
        callSelectedRangeChanged: "onMoving"
    },
    onSelectedRangeChanged: function (e) {
        zoomedChart.zoomArgument(e.startValue, e.endValue);
    }
});

Zooming

In this topic, you will learn how to set up the dxChart and dxRangeSelector widgets so that they work together and so that the dxRangeSelector can be used to zoom the dxChart.

To perform chart zooming, follow the steps below.

  • Set up dxChart Options
    Create the dxChart widget and set it up as required using its configuration object.

    JavaScript
    $("#chartContainer").dxChart({
        //...   
    });
  • Set up dxRangeSelector Options
    Create the dxRangeSelector widget and set it up as required. Since your dxRangeSelector and dxChart must have the same argument axes, use the chart's data source as the range selector's data source by setting the former to the dxRangeSelector's dataSource property. Optionally, you can place your chart view as the range selector's background. For this purpose, define the dxRangeSelector's chart configuration object. Set its series property to the series array of your chart.

    JavaScript
    var dataSource = [...];
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        //...
    });
    $("#rangeSelectorContainer").dxRangeSelector({
        //...
        dataSource: dataSource,
        chart: {
            series: series
        }   
    });
  • Implement Widgets Interaction
    Implement a function that sets the visible range of the chart's argument axis to the range selected on the dxRangeSelector widget. Assign it to the dxRangeSelector's onSelectedRangeChanged property.

    JavaScript
    $("#rangeSelectorContainer").dxRangeSelector({
        //...
        behavior: {
            callSelectedRangeChanged: "onMoving"
        },
        onSelectedRangeChanged: function (e) {
            var zoomedChart = $("#zoomedChart").dxChart('instance');
            zoomedChart.zoomArgument(e.startValue, e.endValue);
        }       
    });

    As you can see in the code above, the onSelectedRangeChanged function will be called while moving the range selector sliders, since the callSelectedRangeChanged property is set to onMoving.

  • Value Axis adjustment
    To zoom the chart's selected region, the value axis' visible range must change based on current minimum and maximum chart values. For this purpose, the dxChart's adjustOnZoom property is set to true by default.

Using a similar technique, you can implement chart scrolling. For details, refer to the Scrolling topic.

Show Example:
jQuery
<div id="chartContainer" style="height: 350px;max-width:800px;margin: 0px auto"></div>
<div id="rangeSelectorContainer" style="height: 80px;max-width:800px;margin: 0px auto"></div>
var dataSource =  [
    { arg: 10, y1: -12, y2: 10, y3: 32 },
    { arg: 20, y1: -32, y2: 30, y3: 12 },
    { arg: 40, y1: -20, y2: 20, y3: 30 },
    { arg: 50, y1: -39, y2: 50, y3: 19 },
    { arg: 60, y1: -10, y2: 10, y3: 15 },
    { arg: 75, y1: 10, y2: 10, y3: 15 },
    { arg: 80, y1: 30, y2: 100, y3: 130 },
    { arg: 90, y1: 40, y2: 110, y3: 140 },
    { arg: 100, y1: 50, y2: 90, y3: 90 },
    { arg: 105, y1: 40, y2: 145, y3: 120 },
    { arg: 110, y1: -12, y2: 10, y3: 32 },
    { arg: 120, y1: -32, y2: 30, y3: 12 },
    { arg: 130, y1: -20, y2: 20, y3: 30 },
];

var series = [{
        argumentField: 'arg',
        valueField: 'y1'
    }, {
        argumentField: 'arg',
        valueField: 'y2'
    }, {
        argumentField: 'arg',
        valueField: 'y3'
    }];

var zoomedChart = $("#chartContainer").dxChart({
    argumentAxis: {
        indentFromMin: 0.02,
        indentFromMax: 0.02
    },
    dataSource: dataSource,
    series: series,
    legend:{
        visible: false
    }
}).dxChart("instance");

zoomedChart.zoomArgument(75, 130);

$("#rangeSelectorContainer").dxRangeSelector({
    size: {
        height: 120
    },
    margin: {
        left: 10
    },
    scale: {
        divisionValue: 1,
        minRange: 2
    },
    dataSource: dataSource,
    selectedRange: {
        startValue: 75, endValue: 130
    },
    chart: {
        series: series
    },
    behavior: {
        callSelectedRangeChanged: "onMoving"
    },
    onSelectedRangeChanged: function (e) {
        zoomedChart.zoomArgument(e.startValue, e.endValue);
    }
});

Use Mouse or Touch Gestures

The dxChart widget allows you to enable scrolling and zooming without another widget. 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.

JavaScript
$("#chartContainer").dxChart({
    // ...
    scrollingMode: "all", // "touch", "mouse"
    zoomingMode: "all"    // "touch", "mouse"
})

View Demo

Use Scroll Bar

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.

NOTE: Before displaying the scroll bar, make sure that scrolling and zooming features are enabled, otherwise the scroll bar will not be operational.

JavaScript
$("#chartContainer").dxChart({
    // ...
    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.