Wednesday, October 17, 2012

Zoom and Pan in Silverlight Line Chart?

Zoom and Pan in Silverlight Line Chart?

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 ;)

Answers & Comments...

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

by : Sajeetharanhttp://stackoverflow.com/users/1749403




No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog