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.
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.
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.
Happy coding!
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.