Hi everyone! As you know RadChart supports selection and hover interactivity effects and 2010.Q3 release exposes an API that allows you, the developer, to control it. Now I am going to show you how you can select any number of items only by moving your mouse.
First let’s start with the rectangle selector that the user draws with its mouse. I have added a canvas on top of the Radchart to hold the rectangle. We need to listen to MouseLeftButtonDown, MouseMove and MouseLeftButtonUp events to control the rectangle position and size. The tricky part is how to convert the size of the rectangle to a data range. Well that’s easy, because the Axis exposes methods that allow us to convert physical units to data units.
Having the selected range all we have to do now is to visually “select” the points. With the new Interactivity API that is easy, because ChartArea now has the SelectItem() method. All we need to do is pass the DataPoint corresponding to the visual item.
And that’s all it takes! Combined with the drawing of the rectangle it takes only a few lines of code to get it done. This works with any number of series and any number of items. You can download the full source code here. I hope you find it useful!
Yavor is a senior software developer on the Telerik UI for Xamarin team. His 10+ years of XAML and WPF experience were gained in the Telerik UI for WPF and Silverlight suite as well as many LoB applications. His workday is a mixed bag of Xamarin, WPF and Angular development. Finding the right solution for the job is his main goal. You can find him on GitHub.
Subscribe to be the first to get our expert-written articles and tutorials for developers!