This is a migrated thread and some comments may be shown as answers.

Doughnut Custom item

1 Answer 83 Views

Chart

This is a migrated thread and some comments may be shown as answers.

Massimo Veutro asked on 12 Feb 2010, 01:16 PM

Hi,
I've some questions about Doughnut customization. I've created in viewmodel a colection with this 3 properties

Color
Item Title
Item Value

I need to set that properties in the view (xaml) without using code behind. I would like to put Item Title and Item Value in the item tooltip and color in item background.

I attach the code

<telerik:RadChart Background="Transparent" ItemsSource="{Binding PhoneResultBox}" HorizontalAlignment="Stretch" MaxHeight="230">

                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping>

                        <telerik:SeriesMapping.SeriesDefinition>

                        </telerik:SeriesMapping.SeriesDefinition>

                    <telerik:SeriesMapping.ItemMappings>
                           <telerik:ItemMapping DataPointMember="YValue" FieldName="ItemsCount"> </telerik:ItemMapping>



                        </telerik:SeriesMapping.ItemMappings>

                      </telerik:SeriesMapping>
                    </telerik:RadChart.SeriesMappings>

                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartLegend>
                            <telerik:ChartLegend Visibility="Collapsed" />
                        </telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartDefaultView.ChartTitle>
                            <telerik:ChartTitle Content="Esiti Telefonici"></telerik:ChartTitle>
                        </telerik:ChartDefaultView.ChartTitle>
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea>

                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                    </telerik:ChartDefaultView>


                </telerik:RadChart.DefaultView>


            </telerik:RadChart>

1 Answer, 1 is accepted

answered on 17 Feb 2010, 11:10 AM

wpfapplication1.zip

Hello Massimo Veutro,

Please find attached a small project demonstrating how you could achieve this. Below is the xaml code:

<Window x:Class="WpfApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Window1" Height="500" Width="800"

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"

xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting">

<Grid>

<Grid.Resources>

<RadialGradientBrush x:Key="DoughnutMaskBrush" GradientOrigin="0.5,0.5">

<GradientStop Color="#33FFFFFF" Offset="0.88"/>

<GradientStop Color="#00FFFFFF" Offset="0.66"/>

<GradientStop Color="#19FFFFFF" Offset="0.47"/>

<GradientStop Offset="0.46"/>

<GradientStop Offset="0.89"/>

</RadialGradientBrush>

<Style x:Key="DoughnutStyle"

TargetType="telerikCharting:Doughnut">

<Setter Property="Template" >

<Setter.Value>

<ControlTemplate TargetType="telerikCharting:Doughnut">

<Canvas>

<Ellipse Clip="{TemplateBinding FigurePath}"

Width="{TemplateBinding ItemActualWidth}"

Height="{TemplateBinding ItemActualHeight}"

StrokeThickness="0"

Fill="{Binding DataItem.Color}"

Style="{TemplateBinding ItemStyle}"/>

<Path x:Name="PART_DefiningGeometry"

Data="{TemplateBinding FigurePath2}"

Fill="Transparent"

Style="{TemplateBinding ItemStyle}" />

<Ellipse

Clip="{TemplateBinding FigurePath3}"

Fill="{StaticResource DoughnutMaskBrush}"

Width="{TemplateBinding ItemActualWidth}"

Height="{TemplateBinding ItemActualHeight}"/>

<telerikCharting:SeriesItemLabel x:Name="PART_SeriesItemLabel"

Content="{TemplateBinding SeriesItemLabelText}"

Visibility="{TemplateBinding SeriesItemLabelVisibility}"

Style="{TemplateBinding SeriesItemLabelStyle}"/>

<Canvas.RenderTransform>

<ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />

</Canvas.RenderTransform>

</Canvas>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Grid.Resources>

<telerik:RadChart x:Name="RadChart1">

<telerik:RadChart.SeriesMappings>

<telerikCharting:SeriesMapping>

<telerikCharting:SeriesMapping.SeriesDefinition>

<telerikCharting:DoughnutSeriesDefinition ItemStyle="{StaticResource DoughnutStyle}" ShowItemToolTips="True" ItemToolTipFormat="#DATAITEM.Title"/>

</telerikCharting:SeriesMapping.SeriesDefinition>

<telerikCharting:SeriesMapping.ItemMappings>

<telerikCharting:ItemMapping DataPointMember="YValue" FieldName="YValue"/>

</telerikCharting:SeriesMapping.ItemMappings>

</telerikCharting:SeriesMapping>

</telerik:RadChart.SeriesMappings>

<telerik:RadChart.DefaultView>

<telerikCharting:ChartDefaultView>

<telerikCharting:ChartDefaultView.ChartLegend>

<telerikCharting:ChartLegend Visibility="Collapsed" />

</telerikCharting:ChartDefaultView.ChartLegend>

<telerikCharting:ChartDefaultView.ChartTitle>

<telerikCharting:ChartTitle Content="Esiti Telefonici"/>

</telerikCharting:ChartDefaultView.ChartTitle>

<telerikCharting:ChartDefaultView.ChartArea>

<telerikCharting:ChartArea>

</telerikCharting:ChartArea>

</telerikCharting:ChartDefaultView.ChartArea>

</telerikCharting:ChartDefaultView>

</telerik:RadChart.DefaultView>

</telerik:RadChart>

</Grid>

</Window>

Hope this will help.

All the best,
Velin
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Doughnut Custom item

1 Answer, 1 is accepted