Telerik blogs

I guess you are following us closely, so you are aware of the great RadChartView control introduced in Q2 2012 which aims to replace the old RadChart implementation. Today, I would like to introduce two cool RadChartView features and demonstrate how you can engage them. Namely, these features are Trackball and Selection.

Trackball

So, what is Trackball? Trackball displays a vertical line across the chart plot area and also displays little visual indicators (circles by default) at points where the trackball line crosses the visualization of a series object. For example when the trackball line crosses a line series line segment, a small circle is drawn highlighting the value of the series at this point. The last capability of the trackball behavior is to display a small popup, similar to the tooltip, in order to provide more detailed information about the closest points to the track ball line's cross section.
In order to demonstrate how Trackball looks and works, let’s first set up the environment in the form of two line series:
radChartView1.AreaType = ChartAreaType.Cartesian;
LineSeries lineSeries1 = new LineSeries();
lineSeries1.Name = "Company A";
  
lineSeries1.DataPoints.Add(new CategoricalDataPoint(10, "1"));
lineSeries1.DataPoints.Add(new CategoricalDataPoint(4, "2"));
lineSeries1.DataPoints.Add(new CategoricalDataPoint(23, "3"));
lineSeries1.DataPoints.Add(new CategoricalDataPoint(11, "4"));
lineSeries1.DataPoints.Add(new CategoricalDataPoint(15, "5"));
lineSeries1.DataPoints.Add(new CategoricalDataPoint(10, "6"));
lineSeries1.DataPoints.Add(new CategoricalDataPoint(4, "7"));
  
radChartView1.Series.Add(lineSeries1);
  
LineSeries lineSeries2 = new LineSeries();
lineSeries2.Name = "Company B";
  
lineSeries2.DataPoints.Add(new CategoricalDataPoint(6, "1"));
lineSeries2.DataPoints.Add(new CategoricalDataPoint(20, "2"));
lineSeries2.DataPoints.Add(new CategoricalDataPoint(7, "3"));
lineSeries2.DataPoints.Add(new CategoricalDataPoint(8, "4"));
lineSeries2.DataPoints.Add(new CategoricalDataPoint(4, "5"));
lineSeries2.DataPoints.Add(new CategoricalDataPoint(10, "6"));
lineSeries2.DataPoints.Add(new CategoricalDataPoint(24, "7"));
radChartView1.Series.Add(lineSeries2);

Now all we should do to enable the Trackball is set the ShowTrackBall property to true:

radChartView1.ShowTrackBall = true;

As you can see below, the Trackball feature outlines the data points plotted on the X coordinate that is closest to the mouse pointer.

ChartView for WinForms Trackball by Telerik

Selection

The Selection feature allows you to select a data point from series. This may come in handy when you want to execute an action based on the selection action. For example, let’s set up the following pie chart:

radChartView1.AreaType = ChartAreaType.Pie;
PieSeries pieSeries = new PieSeries();
pieSeries.ShowLabels = true;
pieSeries.PointSize = new SizeF(15, 15);
pieSeries.DataPoints.Add(new PieDataPoint(10));
pieSeries.DataPoints.Add(new PieDataPoint(5));
pieSeries.DataPoints.Add(new PieDataPoint(40));
pieSeries.DataPoints.Add(new PieDataPoint(22));
pieSeries.DataPoints.Add(new PieDataPoint(11));
pieSeries.DataPoints.Add(new PieDataPoint(20));
radChartView1.Series.Add(pieSeries);

Now, we need to engage the Selection feature. This is done through a ChartSelectionController object. This object throws the SelectedPointChanged event when the selection is changed. You can also choose whether only one or multiple data points can be selection by setting the SelectionMode property:

ChartSelectionController selectionController = new ChartSelectionController();
selectionController.SelectionMode = ChartSelectionMode.MultipleDataPoints;
selectionController.SelectedPointChanged += new ChartViewSelectedChangedEventHandler(selectionController_SelectedPointChanged);
radChartView1.Controllers.Add(selectionController);

For the purposes of the example, let’s put the selected pie pieces further from the pie center. This should be done in the SelectedPointChanged event:

void selectionController_SelectedPointChanged(object sender, ChartViewSelectedPointChangedEventArgs args)
{
    if (args.NewSelectedPoint != null)
    {
        UpdateSelectedPoint(args.NewSelectedPoint);
    }
    if (args.OldSelectedPoint != null)
    {
        UpdateSelectedPoint(args.OldSelectedPoint);
    }
}
  
void UpdateSelectedPoint(DataPoint point)
{
    PieDataPoint pieDataPoint = point as PieDataPoint;
    if (pieDataPoint != null)
    {
        if (pieDataPoint.IsSelected)
        {
            pieDataPoint.OffsetFromCenter = 0.1;
        }
        else
        {
            pieDataPoint.OffsetFromCenter = 0;
        }
    }
}

Clicking the 5% and 10% pieces of the pie will select these pieces and as a result they will be pulled out of the pie.

ChartView for WinForms Selection by Telerik

Happy coding!

 

Download RadControls for WinForms by Telerik


About the Author

Nikolay Diyanov

Diyanov is the Product Manager of the Native Mobile UI division at Progress. Delivering outstanding solutions that make developers' lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.

Find him on Twitter @n_diyanov or on LinkedIn.

Related Posts

Comments

Comments are disabled in preview mode.