customize color of doughnut chart at runtime

[cielo valdoz]

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 Object, ByVal 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 String) As Brush

Return New SolidColorBrush(Me.GetColorFromHexString(color))

End Function


Private Function GetColorFromHexString(ByVal s As String) As 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(Me, New 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 Double, ByVal 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(Me, New 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>

 

 

[Giuseppe]

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.

[cielo valdoz]

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.

[Giuseppe]

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.

[cielo valdoz]

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?

[Giuseppe]

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.

[cielo valdoz]

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

[Giuseppe]

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.