DevExtreme: filter the data on the chart

Filtering data by argument is one of the most common tasks when working with a schedule. That is why it is so important to have simple and convenient filtering methods in each library intended for data visualization.



In this article we will look at how to filter data by argument in DevExtreme Data Visualization graphs, namely in the dxChart component. And here are some ways:

• use of options min and max;
• using the zoomArgument API;
• use of built-in zooming and scrolling

.

Using the min and max options

')
This method of filtering data is the easiest, because it is based on the use of graphics options directly. It filters data at the initial stage when plotting. To do this, it is enough to write the corresponding fields min and max in the options of the argument axis:

argumentAxis: { min: 1, max: 5 } 

These options can also be used at later stages of displaying the graph using the built-in API option method for dynamically changing options:

 chartInstance = $(“.chartContainer”).dxChart(“instance”); chartInstance.option(“argumentAxis”, { min: 1, max: 5 }); 

It can be seen that this method is simple, but it is intended for the initial filtering of data, and is inconvenient for subsequent. For filtering in run-time mode, the following methods are more suitable.

Using the zoomArgument API Method

This API method is an improvement of the previous method and allows you to filter data in run-time mode. The first argument, this method takes a new minimum on the axis, and the second - a new maximum:

 chartInstance = $(“.chartContainer”).dxChart(“instance”); chartInstance.zoomArgument(1, 5); 

The method is very convenient for use in pairs with filtering tools. For example, here’s how it works with the dxRangeSlider component:



To achieve such work of components, it is necessary to register a binding code to change the state of the slider:

 onValueChanged: function (arg) { chartInstance.zoomArgument(arg.start, arg.end); } 

You can go even further and use the special filtering tool in DevExtreme Data Visualization - the dxRangeSelector component.



Its difference from the slider is that you can display the filtered graph in the background of dxRangeSelector .


Here is the link code between these components:

 onSelectedRangeChanged: function (arg) { chartInstance.zoomArgument(arg.startValue, arg.endValue); } 

The zoomArgument method is great for working together with filtering tools. If you do not plan to use such tools, then the following method will do.

Using built-in zooming and scrolling

The new version 14.2 has the ability to filter data “out of the box” by simply enabling certain mode in the options.



You can enable zooming mode for graphics, as well as scrolling mode, which support both mouse and finger manipulations on touch devices:

 zoomingMode: “all” | ”mouse” | ”touch” | ”none”, scrollingMode: “all” | ”mouse” | ”touch” | ”none” 

If you wish, you can display the built-in scroll bar next to the graph, the appearance and position of which can be adjusted:

 scrollBar: { visible: true } 

This “out of the box” method will help to filter the data on the chart without any extra effort.

Conclusion

For the dxChart component , there are several ways to filter data. You can always choose the option that is convenient for you.



If this needs to be done at the initial stage of displaying the graph, then use the min and max options. The zoomArgument API method is suitable if you use filtering tools, such as dxRangeSlider or dxRangeSelector . If you need a simple out-of-the-box method that supports both mouse and finger manipulations, the built-in zooming and scrolling capabilities are perfect.