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.

  1. double startX = this.RadChart1.DefaultView.ChartArea.AxisX.ConvertPhysicalUnitsToData(this.plotAreaStartPosition.X);

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.

  1. private void SelectData(double regionXStart, double regionXEnd, double regionYStart, double regionYEnd)
  2. {
  3.     foreach (DataSeries series in this.RadChart1.DefaultView.ChartArea.DataSeries)
  4.     {
  5.         foreach (DataPoint item in series)
  6.         {
  7.             if ((item.XValue >= regionXStart && item.XValue <= regionXEnd)
  8.                 && (item.YValue >= regionYStart && item.YValue <= regionYEnd))
  9.             {
  10.                 this.RadChart1.DefaultView.ChartArea.SelectItem(item);
  11.             }
  12.         }
  13.     }
  14. }

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!

About the Author

Yavor Ivanov

 is Software Developer. 

Related Posts


Comments are disabled in preview mode.