Zoom Data With RadRangeSelector for WinForms

Data Visualization is a very hot topic today!

People simply don’t have time to read long and boring sheets of data and would rather have this data chewed for them in the form of nice graphs.

However, data visualization can be a challenge when you have a large data set that needs to be visualized. The challenge comes from the screen real estate that the end-users have at hand. You only have that much pixels available on any given screen that a human eye can perceive at one glance. For example, let’s assume that we want to visualize Microsoft’s stock performance from 1986 to 2012. You want to see how the price changes in this period. You go ahead and plot the data as OHLC chart on a form, and get something more or less similar to this:

As you can see, we are plotting a very large data set over a very small area and everything looks cramped up. What if we were able to select a specific portion of the chart and get a zoomed in view on that period?

With this in mind I am happy to introduce to you, RadRangeSelector for WinForms. Now, let’s dive deeper in what this control is capable of and how you get it working for you.

What is RadRangeSelector?

RadRangeSelector is a Windows Forms control which works in conjunction with Chart View and allows users to focus specifically a subset of data. Users can interactively and visually select a range in the chart. The range is then visualized separately allowing users to see and focus the specific data, free & uncluttered from rest of the information displayed in the main chart.

Supposing that you already have a RadChart filled with data, you can easily make RadRangeSelector to start displaying that data by setting its AssociatedControl property to the RadChartView instance:

Of course, you can do that at design-time as well:

As you can see from the output, the whole data is plotted in RadRangeSelector and we get the guides to select a percentage of the data. Once the guides are set, RadRangeSelector will colalborate with RadChartView to show only the selected data points instead of all of them. That’s all there is to using the RadRangeSelector.

 From there on, you have plenty of options to customize RadRangeSelector behavior and appearance. The end-user also has a deal of pulls and lever to work with in order to get the best view of his data.

Let’s take a look at the end-user functionality and then check how we can modify it.

Main preview window

RadRangeSelector allows the end user to increase or decrease the amount of data that would be displayed by RadChartView in its viewport. This is possible thanks to the two handles on the left and right sides of preview window in RadRangeSelector. In other words, this means that the user can now change the zoom factor of the data displayed in RadChartView.

You can also control the span of the preview window by defining the StartRange and EndRange properties (in the range of 0 and 100):

 

which will result in this:

 Zooming RadRangeSelector

For extra large data, one may need to zoom in RadRangeSelector itself, so that data is easier to follow. And yes, RadRangeSlider is able to do that by the handles at the bottom. After the data is zoomed the area between the handles starts acting like a scrollbar thumb.

Labels

Moreover, in the cases of lots of data, you would hardly show all the series’ labels at once without having these labels overlapping each other. In order to save you some time measuring strings and calculating whether they should appear or not, RadRangeSelector has a built-in mechanism for hiding labels in the cases where overlapping could occur. Check the screens below. In the beginning we see just the labels which could be plotted in the labels strip. Then, as we zoom in the data, we give the labels more space to be plotted, hence more labels are shown:





You can also control the minimum distance between each two labels by the LabelsOffset property. If two labels have to take positions that break this minimum distance, one of them gets hidden. By default the value of LabelsOffset is 5, let’s try to set it to 0 in the ScaleInitializing event and check the result:




You can also customize the labels themselves by handling the LabelInitializing event:


You can change not only the styling of the labels, but the text of the labels as well.

Handles

RadRangeSelector provides handles for easy movement of the main preview window by a given step:

Or, if you don’t need these handler, you can hide them by setting the ShowButtons property to false:

this.radRangeSelector1.ShowButtons = false;

Changing series

We have changed some styling, some pulls and levers. But what level of customization we would have if we can’t change the main part – the series type. You can easily do that by handling the SeriesInitializing event. Until now, we have been following examples with a line chart, hence line chart presentation in RadRangeSlider. Let’s change this presentation to bar series:

As you see, using RadRangeSelector is no sweat and can be done with minimal coding. Hope you are excited to try out this control in UI for Windows Forms suite. Do download a trial and get started.

Happy coding!