Switch between two charts

2 posts, 0 answers
  1. Avi
    Avi avatar
    25 posts
    Member since:
    Oct 2010

    Posted 24 Jul 2011 Link to this post

    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>
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 27 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top