Line chart with ability to turn lines on/off

Hi Jason. In the Line Chart demo, yo've got the Legend showing Mark, Chris, and Samuel. What if I wanted to only show Mark and Chris, maybe by unchecking Samuel in the legend. Does Mindscape let me turn lines on/off in the charts, and if so, can you point me to an example? Thanks!

Hello,

I'm not Jason, but I just implemented that last night.

You can turn on or off the Visibility on a line, you can bind that to a boolean value using the BoolToVisibilityConverter.

It's working pretty well for me.

Thanks

B

Hello Leah

Bruce is right, you can hide/show series by setting the series Visibility property. Here is an example of creating a custom legend item template to display a CheckBox that affects the visibility:

  <local:VisibilityToBooleanConverter x:Key="vbc" />

  <DataTemplate x:Key="LegendItemTemplate">
    <StackPanel Orientation="Horizontal">
      <CheckBox IsChecked="{Binding DataSeries.Visibility, Mode=TwoWay, Converter={StaticResource vbc}}" />
      <ContentPresenter Content="{Binding}" ContentTemplate="{Binding LegendIconTemplate}" VerticalAlignment="Center" Margin="7,0,0,0"  />
      <TextBlock Text="{Binding LegendLabel}" Margin="7,0,0,0" VerticalAlignment="Center" />
    </StackPanel>
  </DataTemplate>

  <Style x:Key="LegendStyle" TargetType="ms:Legend">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Header" Value="Legend" />
    <Setter Property="Margin" Value="0,6,6,0" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="Padding" Value="6" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <Grid>
            <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Margin="{TemplateBinding Margin}">
              <Border BorderThickness="0" BorderBrush="#EFF6FF" Background="{TemplateBinding Background}" CornerRadius="3">
                <StackPanel Margin="{TemplateBinding Padding}">
                  <ContentControl Content="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}"
                                  ContentTemplate="{Binding HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                  Foreground="{TemplateBinding Foreground}" />
                  <ItemsControl ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource TemplatedParent}}"
                                ItemTemplate="{StaticResource LegendItemTemplate}" Margin="5,0,5,2" />
                </StackPanel>
              </Border>
            </Border>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

The legend item template contains a CheckBox which directly binds to the visibility property of the legend items data series. I had implemented a simple converter called VisibilityToBooleanConverter to make this binding possible. This template is then used in the custom legend style which can be applied by setting the LegendStyle property of the Chart control.

If you need your model to know/control the visibility state of each series, you'll also want boolean properties in your model which the Visibility property of the series can bind to - this time using a BooleanToVisibilityConverter.

Let me know if you have any questions about this.

-Jason Fauchelle

Thanks Bruce and Jason, I will give it a whirl! Glad that it's so simple.