Mar 10, 2015
Tatyana Ryzhenkova (DevExpress)

How to Display a Data Range on a Chart

The DevExtreme dxChart widget provides you with the ability to closely analyze a smaller section or range of data on your chart.

Chart Zooming

Configure a Chart with a Specified Data Range

Chart Zooming

The simplest way to narrow the range of the displayed data is to use the min and max options of the argumentAxis configuration object:

JavaScript
$("#chartContainer").dxChart({
    //...
    argumentAxis: {
       min: 18,
       max: 51
    }
});

Change the Displayed Data Range at Runtime

To change the range of the data displayed on a chart at runtime, use the dxChart widget’s zoomArgument method.

JavaScript
chartInstance = $("#chartContainer").dxChart("instance");
chartInstance.zoomArgument(1, 5);

The first argument of this method is a new minimum value for the argument axis, and the second one is a new maximum value.

Use an Extra Widget for Selecting a Data Range

To allow end users to choose a required data range for a chart, add the appropriate widget to the page. For instance, you can use the dxRangeSlider widget from the DevExtreme UI Widgets library or the dxRangeSelector widget from the DevExtreme Data Visualization library.

Chart Zooming

While the dxRangeSlider widget is just a numeric scale with specified boundaries, the dxRangeSelector widget can display an axis for date, numeric and category data. In addition, the dxRangeSelector widget can work with the same data source as the dxChart widget and display a full-scale chart. This allows end users to find the required part of the chart visually.

Chart Zooming

Here is the code that zooms the dxChart widget in response to a change of the selected range on the dxRangeSelector widget.

JavaScript
$("#rangeSelectorContainer").dxRangeSelector({
    //...
    onSelectedRangeChanged: function (e) {
        chartInstance.zoomArgument(e.startValue, e.endValue);
    }
});

Use Built-in Scrolling and Zooming

Chart Zooming

In our latest DevExtreme version (14.2), the dxChart widget includes built-in zooming and scrolling features. These features support both the mouse and touch modes. For a better navigation within a zoomed and scrolled chart, a built-in scroll bar can be displayed.

JavaScript
$("#chartContainer").dxChart({
    //...
    zoomingMode: "all", // "mouse" or "touch" or "none"
    scrollingMode: "all", //"mouse" or "touch" or "none"
    scrollBar: {
       visible: true
    }
});

 

Having the described set of methods for displaying a required range of data on a chart in hands, you can choose the one that is most appropriate for your task. Feel free to contact us. We will be glad to help you tune up your chart. Happy charting!