Chart Data Point Selection (MVVM)

Another new feature in the 2012 v3 version of the ComponentOne XAML chart controls is selection support. We’ve always been able to detect which plot element is clicked on using either the PlotElementLoaded event or DataIndexFromPoint method, but this new selection feature makes it especially easier when working in MVVM scenarios because there's no code-behind required. Charts are not typically used as a means for selection, such as a ListBox or DataGrid, but in some scenarios they work quite nicely. For example, column, bar and pie charts lend themselves very well to selection. The following new properties were added to support selection: ChartData.SelectionAction – specifies how the user shall select elements; by mouse click or by mouse over. The selection feature is enabled by setting this property. For example:

C1Chart1.Data.SelectionAction = SelectionAction.LeftMouseDown;  

DataSeries.SelectedItemStyle – defines the optional appearance of selected elements, such as an overlay or border. For example to fill the plot element red:

<Style x:Key="selected" TargetType="c1:PlotElement">  
    <Setter Property="Fill" Value="Red" />  
</Style>  

For example to outline the plot element:

<Style x:Key="selected" TargetType="c1:PlotElement">  
    <Setter Property="Stroke" Value="Red" />  
    <Setter Property="StrokeThickness" Value="4" />  
</Style>  

DataSeries.SelectedItemLabelTemplate – defines an optional label to be displayed only by the selected element. Within this template you can bind to properties of the data point just like regular data labels. For example:

<DataTemplate x:Key="label">  
    <TextBlock Text="{Binding Value}"/>  
</DataTemplate>  

Styles and DataTemplates should go in your application or UserControl resources. Don’t forget to set the SelectedItemStyle and SelectedItemLabelTemplate properties on C1Chart:

<c1:C1Chart Name="chart">  
    <c1:C1Chart.Data>  
    <c1:ChartData SelectionAction="MouseDown">  
        <c1:DataSeries ValueBinding="{Binding Price}"  
            SelectedItemStyle="{StaticResource selected}"  
            SelectedItemLabelTemplate="{StaticResource label}"/>  
    </c1:ChartData>  
  </c1:C1Chart.Data>  
</c1:C1Chart>  

And lastly, the chart’s ItemsSource must implement the ICollectionView interface in order to support selection. Common implementations of ICollectionView include CollectionView, ListCollectionView and PagedCollectionView. The ICollectionView interface acts as a layer on top of the data objects that allows us to define rules for sorting, grouping, selection, etc. In essence, the C1Chart control supports selection through the ICollectionView and not completely on its own. Meaning the new properties listed above will only work on your chart if its data source is an ICollectionView. Here is a sample data source.

// create sample data  
var items = new ObservableCollection<Product>();  
for (int i = 0; i < 5; i++)  
  items.Add(new Product() { Name = "Product " + i, Price = i });  
var collectionView = new PagedCollectionView(items);  

// set data source  
chart.Data.ItemsSource = collectionView;