Populating Silverlight Chart on clicking on Legend Items

To get single graph on clicking on to legend Items

In the following article we will add three areaseries to a chart. On clicking to each LegendItem we can get that particular legend series.

Please add the refrence of following assembly
    1)System.Windows.Controls.DataVisualization.Toolkit
    2)System.Windows.Controls.DataVisualization.Toolkit

Create a class YearlyCarSold.cs and copy and paste following code

public class YearlyCarSold
    {
        private string _Year;
        private int _NoOfCars;

        public YearlyCarSold(string year, int cars)
        {
            _Year = year;
            _NoOfCars = cars;
        }

        public string Year
        {
            get { return _Year; }
            set { _Year = value; }
        }

        public int NoOfCars
        {
            get { return _NoOfCars; }
            set { _NoOfCars = value; }
        }

    }

Create another class SeriesData.cs  and copy and paste following code

public class SeriesData
    {
         public List<YearlyCarSold> GetSeriesData(string val,int k)
        {
            List<YearlyCarSold> list = new List<YearlyCarSold>();
            list.Add(new YearlyCarSold("2002" + val, 8000 + k));
            list.Add(new YearlyCarSold("2003" + val, 9000 + k));
            list.Add(new YearlyCarSold("2004" + val, 10000 + k));
            list.Add(new YearlyCarSold("2005" + val, 11000 + k));
            list.Add(new YearlyCarSold("2006" + val, 12000 + k));
            list.Add(new YearlyCarSold("2007" + val, 9000 + k));
            list.Add(new YearlyCarSold("2008" + val, 500 + k));
            list.Add(new YearlyCarSold("2009" + val, 1000 + k));
            return list;
        }
    }

Now Create a MainPage.xaml

<UserControl x:Class="bargraph.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:vc="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
             xmlns:vc1="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
              xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
            
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <Style x:Key="LegendItemStyle" TargetType="toolkit:LegendItem">
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="toolkit: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>
                            <ToolTipService.ToolTip>
                                <ToolTip Content="Click to hide/show."></ToolTip>
                            </ToolTipService.ToolTip>
                        </CheckBox>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <toolkit:Chart x:Name="chartSample" Background="Silver"  BorderBrush="Black" BorderThickness="3" UseLayoutRounding="False" >
           
        </toolkit:Chart>
    </Grid>
</UserControl>

And  Copy and paste following code in MainPage.xaml.cs

   public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            System.Windows.Controls.DataVisualization.Charting.Compatible.ColumnSeries perf1 = GetMethod("1", 1);
            System.Windows.Controls.DataVisualization.Charting.Compatible.ColumnSeries perf2 = GetMethod("2", 2);
            System.Windows.Controls.DataVisualization.Charting.Compatible.ColumnSeries perf3 = GetMethod("3", 3);
            try
            {
                //chartSample.Series.Clear();
                chartSample.Series.Add(perf1);
                chartSample.Series.Add(perf2);
                chartSample.Series.Add(perf3);
                chartSample.Title = "Last 24 Hours Disk Utilization (% Total Available Free Space)";//% Used Space)";
              

                // this.chartSample.Legend = legend1;

            }
            catch (Exception ex)
            {
                throw ex;
            }
        
        }


        System.Windows.Controls.DataVisualization.Charting.Compatible.ColumnSeries GetMethod(string k, int l)
        {
            SeriesData seriesData = new SeriesData();
            // COLUMNSERIES
            System.Windows.Controls.DataVisualization.Charting.Compatible.ColumnSeries perf = new System.Windows.Controls.DataVisualization.Charting.Compatible.ColumnSeries();

            //UNCOMMENT FOR BARSERIES//
            // System.Windows.Controls.DataVisualization.Charting.Compatible.BarSeries perf = new System.Windows.Controls.DataVisualization.Charting.Compatible.BarSeries();            //System.Windows.Controls.DataVisualization.Charting.Compatible.ColumnSeries perf = new System.Windows.Controls.DataVisualization.Charting.Compatible.ColumnSeries();

            //UNCOMMENT FOR LineSeries//
            //System.Windows.Controls.DataVisualization.Charting.Compatible.LineSeries perf = new System.Windows.Controls.DataVisualization.Charting.Compatible.LineSeries();

            //UNCOMMENT FOR PieSeries//
            //PieSeries perf = new PieSeries();

            //UNCOMMENT FOR PieSeries//
            // System.Windows.Controls.DataVisualization.Charting.Compatible.ScatterSeries perf = new System.Windows.Controls.DataVisualization.Charting.Compatible.ScatterSeries();
            perf.Name = k;
            perf.IsSelectionEnabled = true;

            perf.ItemsSource = seriesData.GetSeriesData(k, l);
            perf.IndependentValueBinding = new System.Windows.Data.Binding("NoOfCars");
            perf.DependentValueBinding = new System.Windows.Data.Binding("Year");
            //perf.TransitionDuration = new TimeSpan(0, 0, 5);
            perf.Title = k;
            Style style = this.Resources["LegendItemStyle"] as Style;
            perf.LegendItemStyle = style;

            return perf;
        }

       
           private void CheckBox_Click(object sender, RoutedEventArgs e)
        {
            CheckBox chk = (sender as CheckBox);

            System.Windows.Controls.DataVisualization.Charting.Compatible.ColumnSeries ls = this.chartSample.Series.Cast<System.Windows.Controls.DataVisualization.Charting.Compatible.ColumnSeries>().Where(s => s.Title.ToString() == chk.Tag.ToString()).ElementAtOrDefault(0);

            chartSample.Series.Clear(); // Clears the chart
            chartSample.Series.Add(ls); // Add Single series

            // Uncomment to check for all three graph
            //if (chk.IsChecked.Value)
            //    chk.Opacity = ls.Opacity = 1;
            //else
            //{
            //    chk.Opacity = 0.5;
            //    ls.Opacity = 0;
            //}
        }
    }

And that’s it….enjoy playing with graph…