Saturday 25 August 2012

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…

No comments :