Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
160
how to show DTP and Button Control on XamWebChart
posted

Hi Every One

             i have create a Pie Chart using XamWebChart. i need to get data from between two date, for this i need to add two DTP on this chart , How can i add DTP and Button on this? for filter data and show Pie chart.

  • 816
    Suggested Answer
    posted

    Let me know if this code sample puts you on the right track.

    XAML

    <UserControl x:Class="SL_xamWebChart.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:igChart="clr-namespace:Infragistics.Silverlight.Chart;assembly=InfragisticsSL4.Controls.Charts.XamWebChart.v10.3"
                 xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
    
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="200"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            
            <StackPanel Grid.Row="0">
                <TextBlock Text="Start Date" HorizontalAlignment="Center" />
                <sdk:DatePicker Name="datePicker1" Grid.Row="1" Height="30" Width="100" />
                <TextBlock Text="End Date" HorizontalAlignment="Center" />
                <sdk:DatePicker Name="datePicker2" Grid.Row="1" Height="30" Width="100" />
                <Button Content="Show Chart!" HorizontalAlignment="Center" Click="Button_Click"/>
            </StackPanel>
            
            <igChart:XamWebChart Grid.Row="1" Name="chart1" Height="200" Width="300" VerticalAlignment="Top">
                <igChart:XamWebChart.Series>
                    <igChart:Series ChartType="Pie">
                        <igChart:Series.DataPoints>
                            <igChart:DataPoint Value="10" />
                            <igChart:DataPoint Value="30" />
                            <igChart:DataPoint Value="20" />
                            <igChart:DataPoint Value="40" />
                        </igChart:Series.DataPoints>
                    </igChart:Series>
                </igChart:XamWebChart.Series>
            </igChart:XamWebChart>
        </Grid>
        
    </UserControl>
    

    Code-behind

    private void Button_Click(object sender, RoutedEventArgs e)
            {
                DateTime? t1 = this.datePicker1.SelectedDate;
                DateTime? t2 = this.datePicker2.SelectedDate;
                if (t1 != null && t2 != null)
                {
                    Series s = GetDataForTimeRange(t1.Value, t2.Value);
                    this.chart1.Series.Clear();
                    this.chart1.Series.Add(s);
                }
            }
    
            private Series GetDataForTimeRange(DateTime t1, DateTime t2)
            {
                // re-write this method to get the appropriate data
                Series series = new Series();
                series.ChartType = ChartType.Pie;
                series.DataPoints.Add(new DataPoint() { Value = 10 });
                series.DataPoints.Add(new DataPoint() { Value = 20 });
                series.DataPoints.Add(new DataPoint() { Value = 30 });
                return series;
            }