Question

I have this silverlight line chart and I would like to implement zooming and pan, since it is difficult to analyze the data in this view (Datapoints are hidden because they make the chart look like a mess, but I would like to enable it again in a certain level of zoom).

Any ideas/examples?

My chartwindow.xaml:

     <controls:ChildWindow x:Class="HuginOdinSilverlight.Views.UserStats.chartwindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:DV="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
       xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" Title="Advanced LineChart" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="422" d:DesignWidth="1029">
<controls:ChildWindow.Resources>
    <Style x:Key="LegendItemStyle" TargetType="DVC:LegendItem">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DVC: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" />
                                    <DV:Title Content="{TemplateBinding Content}"/>
                                </StackPanel>
                            </ControlTemplate>
                        </CheckBox.Template>
                    </CheckBox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</controls:ChildWindow.Resources>
<Grid x:Name="LayoutRoot" Margin="2" Height="385" Width="1007">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />

    </Grid.RowDefinitions>
    <DVC:Chart x:Name="userChart2" BorderBrush="{x:Null}" Visibility="Visible" Padding="20,10,20,20" Margin="0,0,0,0">
        <DVC:AreaSeries Name="lseries" IndependentValueBinding="{Binding Path=label}" DependentValueBinding="{Binding Path=number}" />


    </DVC:Chart>

        <CheckBox Content="affectedDocs" Height="21" HorizontalAlignment="Left" Margin="900,352,0,0" Name="checkBox1" VerticalAlignment="Top" Width="95" Checked="checkBox1_Checked" Unchecked="checkBox1_Unchecked" />
</Grid>

My chartwindow.xaml.cs:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using HuginOdinSilverlight.ServiceReference1;
    using System.Windows.Data;
    using System.Windows.Controls.DataVisualization;
    using System.Windows.Controls.DataVisualization.Charting;

    namespace HuginOdinSilverlight.Views.UserStats
    {
        public partial class chartwindow : ChildWindow
        {
            List<List<Service2ef_chart>> thelist;
    List<object> names = new List<object>();
    public chartwindow(List<List<Service2ef_chart>> list, List<object> comboitems)
    {
        InitializeComponent();
        thelist = list;
        names = comboitems;
        refreshChart();

    }

    private void checkBox1_Checked(object sender, RoutedEventArgs e)
    {
        refreshChart();
    }

    void refreshChart()
    {
        int i = 0;
        int palindex = 0;
        userChart2.Series.Clear();

        foreach (List<Service2ef_chart> each in thelist)
        {
            Style newStyle = new Style(typeof(LineDataPoint));
            newStyle.Setters.Add(new Setter(LineDataPoint.BackgroundProperty, userChart2.Palette[palindex]["Background"]));
            newStyle.Setters.Add(new Setter(LineDataPoint.HeightProperty, 0));
            newStyle.Setters.Add(new Setter(LineDataPoint.WidthProperty, 0));

            userChart2.Series.Add(new LineSeries
            {
                ItemsSource = each,
                IndependentValueBinding = new Binding("label"),
                DependentValueBinding = (bool)checkBox1.IsChecked ? new Binding("number2") : new Binding("number"),
                Title = names[i].ToString(),
                LegendItemStyle = (Style)Resources["LegendItemStyle"],
                DataPointStyle = newStyle
            });

            i++;
            ++palindex;

            if (palindex >= userChart2.Palette.Count)
            {
                palindex = 0;
            }
        }
    }

    private void checkBox1_Unchecked(object sender, RoutedEventArgs e)
    {
        refreshChart();
    }



     //adds or removes series from the linechart when clicking on the legend:
    private void CheckBox_Click(object sender, RoutedEventArgs e)
    {
        CheckBox chk = (sender as CheckBox);
        Series ser = userChart2.Series.Cast<Series>().Where(s => s.Title.ToString() == chk.Tag.ToString()).ElementAtOrDefault(0);
        if (chk.IsChecked.Value)
        {
            chk.Opacity = 1;
            ser.Visibility = Visibility.Visible;
            try { ((LineSeries)ser).ItemsSource = thelist[names.IndexOf(chk.Tag.ToString())]; }
            catch (Exception yy) { MessageBox.Show(yy.Message); }
        }
        else
        {
            chk.Opacity = 0.25;
            ser.Visibility = Visibility.Collapsed;
            ((LineSeries)ser).ItemsSource = null;
        }
    }


}

}

Btw, ideas to make the code nicer are strongly appreciated 😉

Answer 1

Plesae go through the following links to implement zoom and pan in silver light chart.

Zoom and pan for silver light chart

Zoom and pan for silver light