Showing and Hiding Series in chart

Lets say we have a chart like this

it kind of looks like too many lines and user doesnt have easy way to see the different trends or easily compare the different measures user wants.

Showing and hiding a particular series will be nice addition to charts to allow the user to pick and choose what to see.   we want the user to be able to click the legenditem to toggle the display of the series.

we will start adding a style for the LegendItem, the original style looks like this

 <Style TargetType=”charting:LegendItem”>
        <Setter Property=”IsTabStop” Value=”False” />
        <Setter Property=”Template”>
            <Setter.Value>
                <ControlTemplate TargetType=”charting:LegendItem”>
                    <StackPanel Orientation=”Horizontal”>
                        <Rectangle Width=”8″ Height=”8″ Fill=”{Binding Background}”
                                   Stroke=”{Binding BorderBrush}” StrokeThickness=”1″ Margin=”0,0,3,0″ />
                        <datavis:Title Content=”{TemplateBinding Content}” />
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

and we specify the style on the LineSeries like this

<charting:LineSeries   LegendItemStyle=”{StaticResource LegendItemStyle}” Title=”Total Visits”
                                     IndependentValueBinding=”{Binding OrderDate}”
                                     DependentValueBinding=”{Binding Visits}” />            

As we want to provide a way for the user to toggle the visibility of the Series. we will re-style the LegendItem to use a CheckBox for this sample

 <Style x:Key=”LegendItemStyle” TargetType=”charting:LegendItem”>
            <Setter Property=”IsTabStop” Value=”False” />
            <Setter Property=”Template”>
                <Setter.Value>
                    <ControlTemplate TargetType=”charting:LegendItem”>
                        <CheckBox Click=”CheckBox_Click” Cursor=”Hand” IsChecked=”true”
                                  Content=”{TemplateBinding Content}” Tag=”{TemplateBinding Content}”>
                            <CheckBox.Template>
                                <ControlTemplate TargetType=”CheckBox”>
                                    <StackPanel Orientation=”Horizontal”>
                                        <Rectangle Width=”8″ Height=”8″ Fill=”{Binding Background}” Stroke=”{Binding BorderBrush}”
                                                   StrokeThickness=”1″ Margin=”0,0,3,0″ />
                                        <datavis:Title Content=”{TemplateBinding Content}” />
                                    </StackPanel>
                                </ControlTemplate>
                            </CheckBox.Template>
                        </CheckBox>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

(After posting I realized that instead of binding again to Tag we could base our condition on the content itself. Too lazy to change the code now)

To start with, we want all the series to be shown so we set the IsChecked property to “true”.

we added a click handler also to checkbox in which we are going to check the IsChecked property and decide if we want the series to be shown or hidden

private void CheckBox_Click(object sender, RoutedEventArgs e)
{
CheckBox chk = (sender as CheckBox);
LineSeries ls = chart1.Series.Cast
().Where(s => s.Title.ToString() == chk.Tag.ToString()).ElementAtOrDefault(0);
if (chk.IsChecked.Value)
chk.Opacity = ls.Opacity = 1;
else
{
chk.Opacity = 0.5;
ls.Opacity = 0;
}
}

you can see a demo here and download the code here