Only Chart without Chart Area

[amisha]

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.

[Sia]

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

[amisha]

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

[amisha]

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

[Sia]

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

[amisha]

Hello,

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

Thanks,
Amisha