Only Chart without Chart Area

6 posts, 0 answers
  1. amisha
    amisha avatar
    4 posts
    Member since:
    Nov 2010

    Posted 06 Dec 2010 Link to this post

    Hi,

    I am trying to display a simple Pie chart. I have to display the Pie charts on a map on specific locations. For this I want to turn the background of chart area(i.e rectangular portion) off and display just the circular pie chart.

    I have done this in XAML :
    <Grid x:Name="LayoutRoot" Height="80" Width="80" VerticalAlignment="Center" HorizontalAlignment="Center" Background="White">

            <telerik:RadChart x:Name="RadChart1" Height="80" Width="80" HorizontalAlignment="Center" telerikQuickStart:ThemeAwareBackgroundBehavior.IsEnabled="True"/>

        </Grid>

    And behind the code I have turned of Legend and Chart Title like this :
                RadChart1.DefaultView.ChartTitle.Visibility = System.Windows.Visibility.Collapsed;
                RadChart1.DefaultView.ChartLegend.Visibility = System.Windows.Visibility.Collapsed;

    If I try to turn of the Chart Area in similar manner i.e :
    RadChart1.DefaultView.ChartArea.Visibility = System.Windows.Visibility.Collapsed;

    Now chart is not being shown, and if I don't turn it off then I get chart with rectangular boundaries.

    How should I proceed? Any ideas would be greatly appreciated. It is kind of urgent need.
  2. Sia
    Admin
    Sia avatar
    766 posts

    Posted 07 Dec 2010 Link to this post

    Hello Amisha,

    Here is an example which demonstrates the look you need. Please take a look at the code behind. Below is the function where you can find what you need:

    private void InitializeChart(RadChart chart, Location location)
          {
              this.SetChartDimensions(chart);
     
              chart.BorderThickness = new Thickness(0);
              chart.DefaultView.ChartArea.Background = new SolidColorBrush(Colors.Transparent);
              chart.DefaultView.ChartArea.Margin = new Thickness(0);
              chart.DefaultView.ChartArea.Padding = new Thickness(0);
              chart.Background = new SolidColorBrush(Colors.Transparent);
              chart.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;
              chart.DefaultView.ChartTitle.Visibility = Visibility.Collapsed;
              chart.DefaultSeriesDefinition = new PieSeriesDefinition() { ShowItemLabels = false };
              chart.ItemsSource = new double[] { rand.Next(100000, 500000), rand.Next(100000, 500000), rand.Next(100000, 500000) };
     
              chart.SetValue(MapLayer.LocationProperty, location);
              this.InformationLayer.Items.Add(chart);
          }

    The idea is that you don't have to collapse the chart area, just to set its background to be transparent.

    Regards,
    Sia
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  3. amisha
    amisha avatar
    4 posts
    Member since:
    Nov 2010

    Posted 07 Dec 2010 Link to this post

    Hello Sia,

    Thanks for the reply. This solution worked for me.

    Although I do have one more requirement, how do I set animation, so that when I hover on the Pie chart, the size of the pie chart increases depending on factor of some dynamic value within the code?

    Thanks,
    Amisha
  4. amisha
    amisha avatar
    4 posts
    Member since:
    Nov 2010

    Posted 09 Dec 2010 Link to this post

    Hello,

    I did a little digging and found out that HoverScope to be set to a series (InteractivityScope.Series) in Radial Charts(Pie chart) is not possible.
    Source : http://www.telerik.com/help/silverlight/radchart-features-interactivity-effects.html

    Now if I want the whole chart(i.e whole pie series) to change its size on hover, is that even possible using Interactivity Scope by overriding any of its property or is not possible?

    Thanks,
    Amisha
  5. Sia
    Admin
    Sia avatar
    766 posts

    Posted 10 Dec 2010 Link to this post

    Hi Amisha,

    Is it an appropriate solution for you to set RenderTransform to RadChart on MouseEnter and to reset it on MouseLeave?
    <telerik:RadChart x:Name="RadChart1" MouseEnter="RadChart1_MouseEnter" MouseLeave="RadChart1_MouseLeave" RenderTransformOrigin="0.5,0.5">

    private void RadChart1_MouseEnter(object sender, MouseEventArgs e)
    {
        this.RadChart1.RenderTransform = new ScaleTransform() { ScaleX = 1.5, ScaleY = 1.5};
    }
     
    private void RadChart1_MouseLeave(object sender, MouseEventArgs e)
    {
        this.RadChart1.RenderTransform = null;
    }

    You can make the pie takes up bigger part of the Chart Area's space by playing with the RadiusFactor property.
    <telerikCharting:PieSeriesDefinition RadiusFactor="1"/>

    Please try it and let us know how it goes.

    Greetings,
    Sia
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  6. amisha
    amisha avatar
    4 posts
    Member since:
    Nov 2010

    Posted 10 Dec 2010 Link to this post

    Hello,

    Thanks for your reply. That worked for me. :)

    Thanks,
    Amisha
Back to Top