[Solved] Switch between two charts

[Avi]

Hello,

I want to create a bar chart. When I click on one of the columns I will show a new graph with specific details of a on the column that was pressed. I saw the example you wrote at "first look" because there many charts and some events it is difficult to filter out what's relevant to my use and what not. I'd love to get a small and specific example of my use. Attaching a file, this will illustrate the application.

I tried the following code but there are many problems :
a. no supporty for StartTransitionAnimation
b. telerik:ChartArea Command="{Binding ChartArea1ClickCommand}" --> I get "The property command was not found in type 'ChartArea'"
c. TransitionControlStyle get an error "property TransitionControlStyle not found"


Thanks,
Aviv

public SilverlightControl2()
        {
            InitializeComponent();
            AttachClickEvent();
        }

        private void AttachClickEvent()
        {
            barChart.DefaultView.ChartArea.ItemClick += this.ChartArea_ItemClick;
        }

        private void ChartArea_ItemClick(object sender, ChartItemClickEventArgs e)
        {
            barChart.DefaultView.ChartArea.StartTransitionAnimation();
            lineChart.DefaultView.ChartArea.StartTransitionAnimation();
            (sender as ChartArea).ItemClick -= this.ChartArea_ItemClick;
        }

        private void GoBack1_Click(object sender, RoutedEventArgs e)
        {
            barChart.DefaultView.ChartArea.StartTransitionAnimation();
            lineChart.DefaultView.ChartArea.StartTransitionAnimation();

            this.AttachClickEvent();
        }

<UserControl.Resources>
       <Style TargetType="telerik:RadChart">
           <Setter Property="Background" Value="Transparent" />
           <Setter Property="FontSize" Value="10" />
       </Style>
       <Style TargetType="telerik:ChartLegend">
           <Setter Property="Header" Value=" " />
       </Style>
       <Style TargetType="telerik:RadLinearSparkline">
           <Setter Property="Margin" Value="0,2,0,3" />
       </Style>
       <Style TargetType="telerik:RadButton">
           <Setter Property="HorizontalAlignment" Value="Left" />
           <Setter Property="Height" Value="22" />
       </Style>
       <!--
           <Style x:Key="TransitionControlStyle" TargetType="telerik:RadTransitionControl">
           <Setter Property="Transition">
           <Setter.Value>
           <telerik:FadeTransition />
           </Setter.Value>
           </Setter>
           </Style>
       -->
       <Style TargetType="telerik:ChartArea">
           <Setter Property="EnableAnimations" Value="False" />
           <Setter Property="TransitionControlStyle" Value="{StaticResource TransitionControlStyle}" />
       </Style>
       <Style x:Key="H1" TargetType="TextBlock">
           <Setter Property="FontFamily" Value="Segoe UI Light" />
           <Setter Property="FontSize" Value="18" />
       </Style>
       <Style x:Key="H2" TargetType="TextBlock">
           <Setter Property="FontFamily" Value="Segoe WP Semibold" />
           <Setter Property="FontSize" Value="9" />
       </Style>
   </UserControl.Resources>

   <Grid x:Name="LayoutRoot" Background="White">
       <telerik:RadButton x:Name="GoBackButton1"
                          Grid.Column="1"
                          Click="GoBack1_Click"
                          Command="{Binding GoBack1Command}"
                          Content="Go Back" />
       <telerik:RadChart x:Name="barChart"
                         Grid.Row="2"
                         Grid.ColumnSpan="2"
                         ItemsSource="{Binding Data}"
                         SeriesMappings="{Binding BarChartSeriesMappings}">
           <telerik:RadChart.DefaultView>
               <telerik:ChartDefaultView>
                   <telerik:ChartDefaultView.ChartLegend>
                       <telerik:ChartLegend Name="legend1" />
                   </telerik:ChartDefaultView.ChartLegend>
                   <telerik:ChartDefaultView.ChartArea>
                       <telerik:ChartArea Grid.ColumnSpan="2"
                                          Command="{Binding ChartArea1ClickCommand}"
                                          ItemWidthPercent="50"
                                          LegendName="legend1">
                           <telerik:ChartArea.AxisX>
                               <telerik:AxisX DefaultLabelFormat="{Binding AxisXLabelFormat}" />
                           </telerik:ChartArea.AxisX>
                           <telerik:ChartArea.AxisY>
                               <telerik:AxisY ExtendDirection="None" IsZeroBased="True" />
                           </telerik:ChartArea.AxisY>
                       </telerik:ChartArea>
                   </telerik:ChartDefaultView.ChartArea>
               </telerik:ChartDefaultView>
           </telerik:RadChart.DefaultView>
       </telerik:RadChart>
       <telerik:RadChart Name="lineChart"
                         Grid.Row="3"
                         ItemsSource="{Binding Data}"
                         SeriesMappings="{Binding LineChartSeriesMappings}">
           <telerik:RadChart.DefaultView>
               <telerik:ChartDefaultView>
                   <telerik:ChartDefaultView.ChartLegend>
                       <telerik:ChartLegend Name="legend3" />
                   </telerik:ChartDefaultView.ChartLegend>
                   <telerik:ChartDefaultView.ChartArea>
                       <telerik:ChartArea LegendName="legend3">
                           <telerik:ChartArea.AxisX>
                               <telerik:AxisX DefaultLabelFormat="{Binding AxisXLabelFormat}" LayoutMode="Between" />
                           </telerik:ChartArea.AxisX>
                           <telerik:ChartArea.AxisY>
                               <telerik:AxisY DefaultLabelFormat="#VAL{P0}" ExtendDirection="None" />
                           </telerik:ChartArea.AxisY>
                       </telerik:ChartArea>
                   </telerik:ChartDefaultView.ChartArea>
               </telerik:ChartDefaultView>
           </telerik:RadChart.DefaultView>
       </telerik:RadChart>
   </Grid>

[Yavor]

Hi Avi,

Based on the supplied information, it is hard to determine what is causing this unwanted behavior. If the exceptions persist, you can open a formal support ticket, and send us a small working sample, incorporating your logic and showing the unwanted behavior. We will debug it locally, and advise you further.

All the best,
Yavor
the Telerik team