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

Doughnut Custom item

1 Answer 93 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Massimo Veutro
Top achievements
Rank 1
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

Sort by
0
Velin
Telerik team
answered on 17 Feb 2010, 11:10 AM
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"
    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.
Tags
Chart
Asked by
Massimo Veutro
Top achievements
Rank 1
Answers by
Velin
Telerik team
Share this question
or