Home / Community & Support / Developer Productivity Tools Forums / WPF > Chart > Doughnut Custom item

• Massimo Veutro

  Posted on Feb 12, 2010 (permalink)

  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>

  Reply

• Velin Velin

  Posted on Feb 17, 2010 (permalink)

  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.

  Attached files

  • wpfapplication1.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > Chart > Doughnut Custom item