customize color of doughnut chart at runtime

8 posts, 0 answers
  1. cielo valdoz
    cielo valdoz avatar
    33 posts
    Member since:
    Dec 2009

    Posted 22 Mar 2010 Link to this post

    Hi, 

    How can i customize the color of doughnut chart? I want to have only 2 colors (red, green). This is to display the stock health of the items. If item <QtyOnHand the color of doughnut is red otherwise the color is green. The code below doesnt make a doughnut chart, its just a circle filled by color green or red. I also attach screenshot of the chart.
    Thanks.

    Code-behind

     

     

    Dim doughnutSeries As New DataSeries()  
     
    doughnutSeries.Definition = New DoughnutSeriesDefinition()  
     
    doughnutSeries.Definition.ShowItemToolTips = True 
     
    doughnutSeries.Definition.ShowItemLabels = False 
     
    doughnutSeries.Definition.ItemStyle = TryCast(Me.Resources("CustomDoughnut"), Style)  
     
    Me.FillWithSalesData(doughnutSeries)  
     
    ChartStockHealth.DataSeries.Add(doughnutSeries)  
     
     

     

    Public Function GetSalesData() As List(Of StockViewModel)

     

     

     

    Dim salesData As List(Of StockViewModel)

     

     

     

    Dim sales As New List(Of Stock)()

     

     

     

    Dim StockStatus As XDocument

     

    StockStatus = XDocument.Load(

     

    "XML/StockStatus.XML", LoadOptions.SetBaseUri)

     

     

     

    Dim Items = From Stock In StockStatus.Descendants("Item") _

     

     

     

    Select Value = Stock.Element("Value").Value, _

     

    Name = Stock.Element(

     

    "Name").Value

     

     

     

     

    For index As Integer = 0 To Items.Count - 1

     

    sales.Add(

     

    New Stock(Items(index).Value, Items(index).Name))

     

     

     

    Next

     

     

    salesData =

    New List(Of StockViewModel)()

     

     

     

    For Each sale As Stock In sales

     

    salesData.Add(

     

    New StockViewModel(sale))

     

     

     

    Next

     

     

     

    Return salesData

     

     

     


    End
    Function

     

     

     
    Private Sub FillWithSalesData(ByVal series As DataSeries)  
     
    For Each item As StockViewModel In Me.GetSalesData()  
     
    Dim point As New DataPoint()  
     
    point.YValue = item.StockStatus.Health  
     
    point.XCategory = "" 
     
    point.DataItem = item  
     
    series.Add(point)  
     
    Next 
     
    End Sub 
     

    Class StockModelView.Vb

    Imports System.ComponentModel  
     
     
    Imports System.Windows.Media  
     
     
    Public Class StockViewModel  
     
    Implements INotifyPropertyChanged  
     
    Private _stock As Stock  
     
    Public Property StockStatus() As Stock  
     
    Get 
     
     
    Return _stock  
     
    End Get 
     
     
    Private Set(ByVal value As Stock)  
     
    _stock = value  
     
    End Set 
     
     
    End Property 
     
     
    Private _stockHealthColor As Brush  
     
    Public Property StockHealthColor() As Brush  
     
    Get 
     
     
    Return _stockHealthColor  
     
    End Get 
     
     
    Private Set(ByVal value As Brush)  
     
    _stockHealthColor = value  
     
    End Set 
     
     
    End Property 
     
     
    Public Sub New(ByVal stock As Stock)  
     
    Me.StockStatus = stock  
     
    AddHandler stock.PropertyChanged, AddressOf HandleCashDataPropertyChanged  
     
    Me.UpdateStockColor()  
     
    End Sub 
     
     
    Private Sub HandleCashDataPropertyChanged(ByVal sender As ObjectByVal e As PropertyChangedEventArgs)  
     
    If e.PropertyName = "Stock" Then 
     
     
    Me.UpdateStockColor()  
     
    End If 
     
     
    End Sub 
     
     
    Private Sub UpdateStockColor()  
     
    If Me.StockStatus.Health <= 0 Then 
     
     
    Me.StockHealthColor = Me.CreateBrush("#FFFF3D40")  
     
    Else 
     
     
    Me.StockHealthColor = Me.CreateBrush("#FF1CD64D")  
     
    End If 
     
     
    Me.OnPropertyChanged("StockHealthColor")  
     
    End Sub 
     
     
    Private Function CreateBrush(ByVal color As StringAs Brush  
     
    Return New SolidColorBrush(Me.GetColorFromHexString(color))  
     
    End Function 
     
     
    Private Function GetColorFromHexString(ByVal s As StringAs Color  
     
    s = s.Replace("#"String.Empty)  
     
    Dim a As Byte = System.Convert.ToByte(s.Substring(0, 2), 16)  
     
    Dim r As Byte = System.Convert.ToByte(s.Substring(2, 2), 16)  
     
    Dim g As Byte = System.Convert.ToByte(s.Substring(4, 2), 16)  
     
    Dim b As Byte = System.Convert.ToByte(s.Substring(6, 2), 16)  
     
    Return Color.FromArgb(a, r, g, b)  
     
    End Function 
     
     
    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged  
     
    Protected Overridable Sub OnPropertyChanged(ByVal propertyName As String)  
     
    RaiseEvent PropertyChanged(MeNew PropertyChangedEventArgs(propertyName))  
     
    End Sub 
     
    End Class 
     
     
     

    Class Stock.Vb

     

    Imports System.ComponentModel  
     
     
    Imports System.Windows.Media  
     
     
    Public Class Stock  
     
    Implements INotifyPropertyChanged  
     
    Private _stock As Double 
     
     
    Private _outlet As String 
     
     
    Public Property Health() As Double 
     
     
    Get 
     
     
    Return Me._stock  
     
    End Get 
     
     
    Set(ByVal value As Double)  
     
    Me._stock = value  
     
    Me.OnPropertyChanged("Stock")  
     
    End Set 
     
     
    End Property 
     
     
    Public Property Outlet() As String 
     
     
    Get 
     
     
    Return Me._outlet  
     
    End Get 
     
     
    Set(ByVal value As String)  
     
    Me._outlet = value  
     
    End Set 
     
     
    End Property 
     
     
    Public Sub New(ByVal stock As DoubleByVal outlet As String)  
     
    Me.Health = stock  
     
    Me.Outlet = outlet  
     
    End Sub 
     
     
    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged  
     
    Protected Overridable Sub OnPropertyChanged(ByVal propertyName As String)  
     
    RaiseEvent PropertyChanged(MeNew PropertyChangedEventArgs(propertyName))  
     
    End Sub 
     
    End Class 
     
     

     

     

     

     

     

     

    Style of Chart

    <Style TargetType="telerikCharting:Doughnut" x:Name="CustomDoughnut">  
     
    <Setter Property="Template" > 
     
    <Setter.Value> 
     
    <ControlTemplate TargetType="telerikCharting:Doughnut">  
     
    <Canvas> 
     
    <Path x:Name="PART_DefiningGeometry" 
     
    Data="{TemplateBinding FigurePath2}" 
     
    Style="{TemplateBinding ItemStyle}"/>  
     
    <Ellipse  
     
    Fill="{Binding DataItem.StockHealthColor}" 
     
    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> 
     
     

     

     


    XML

     

    <?xml version="1.0" encoding="utf-8"?>  
    <StockHealth> 
        <Caption>Stock Health</Caption> 
        <SubCaption>7/01/2009-7/31/2009</SubCaption> 
        <Decimals>2</Decimals> 
        <Item> 
            <Name>SM Megamall</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>SM Mall of Asia</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>Robinsons Galleria</Name> 
            <Value>5</Value> 
        </Item> 
        <Item> 
            <Name>Grand Central</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>Robinsons Ermita</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>SM City Manila</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>SM City San Lazaro</Name> 
            <Value>3</Value> 
        </Item> 
        <Item> 
            <Name>Taft Avenue</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>Dela Rosa</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>Delco</Name> 
            <Value>17</Value> 
        </Item> 
        <Item> 
            <Name>Glorietta 3</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>Market Market</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>Greenhills Shopping Center</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>Trinoma</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>SM Centerpoint</Name> 
            <Value>10</Value> 
        </Item> 
        <Item> 
            <Name>SM City Annex</Name> 
            <Value>10</Value> 
        </Item> 
        <Item> 
            <Name>SM City North Edsa</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>SM City Fairview</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>Quezon Avenue</Name> 
            <Value>0</Value> 
        </Item> 
        <Item> 
            <Name>Katipunan</Name> 
            <Value>0</Value> 
        </Item> 
    </StockHealth> 
     

     

     

  2. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 24 Mar 2010 Link to this post

    Hello cielo valdoz,

    You can use the MVVM approach demonstrated here to achieve the desired effect. We have attached a runnable sample application that demonstrates doughnut with red  / green slices based on the slice value to get you started.

    Hope this helps.


    Greetings,
    Freddie
    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.
  3. DevCraft banner
  4. cielo valdoz
    cielo valdoz avatar
    33 posts
    Member since:
    Dec 2009

    Posted 24 Mar 2010 Link to this post

    Hi Freddie,

    Thanks for your reply. I have another question, how can i set the thickness of doughnut chart? I want to have equal thickness for each slice because right now the thickness is base on the YValue. If the YValue=0 the color should be red otherwise green.
  5. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 29 Mar 2010 Link to this post

    Hello cielo valdoz,

    There must be some misunderstanding here -- the whole idea of the Doughnut / Pie chart types is to display slices representing fractional parts of a whole and the YValue field represents the distinct fractional parts. If you would like to have equal width for the slices, you need to set equal YValue for all of them. As for slice with YValue=0 -- such slice would not be visualized in the doughnut chart as it represents 0 fractional parts of the whole.


    Sincerely yours,
    Freddie
    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.
  6. cielo valdoz
    cielo valdoz avatar
    33 posts
    Member since:
    Dec 2009

    Posted 06 Apr 2010 Link to this post

    Hi Freddie,

    Yes I set Y to equal values but the tooltip being shown for each slice has the same value. How can i set the tooltip of Doughnut chart that is not getting from the YValues?
  7. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 06 Apr 2010 Link to this post

    Hi cielo valdoz,

    Generally there are two approaches that you can use to achieve the desired effect:

    • Specify a format expression to use for the DoughnustSeriesDefinition.ItemToolTipFormat property.
    • Specify the actual tooltip value either manually (setting the DataPoint.ToolTip property if you are building the DataSeries by hand), or through databinding (by specifying an ItemMapping for the DataPointMember.Tooltip enumeration value -- in this way you will specify which data field from your data source should be displayed as a tooltip).

    Let us know if you face any specific problems with the implementation.


    Kind regards,
    Freddie
    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.
  8. cielo valdoz
    cielo valdoz avatar
    33 posts
    Member since:
    Dec 2009

    Posted 07 Apr 2010 Link to this post

    Thank you so much Freddie. That's what i've been looking for. I have another problem, I want to display the inventory of all items for a particular outlet. I have to display the MaxQty, MinQty, and InStock of an item but I'm not sure which chart to use. Any suggestion?

    Thanks,
    Cielo
    Junior Programmer
  9. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 07 Apr 2010 Link to this post

    Hello cielo valdoz,

    You can find a listing of the supported chart types alongside short descriptions that highlight the typical usage of each type here.

    Hope this helps.


    All the best,
    Freddie
    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.
Back to Top
DevCraft banner