This is a migrated thread and some comments may be shown as answers.
customize color of doughnut chart at runtime
7 Answers 56 Views
This is a migrated thread and some comments may be shown as answers.
cielo valdoz
Top achievements
Rank 1
cielo valdoz asked on 22 Mar 2010, 08:43 AM
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> 
 

 

 

7 Answers, 1 is accepted

Sort by
0
Giuseppe
Telerik team
answered on 24 Mar 2010, 12:37 PM
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.
0
cielo valdoz
Top achievements
Rank 1
answered on 25 Mar 2010, 03:33 AM
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.
0
Giuseppe
Telerik team
answered on 29 Mar 2010, 11:39 AM
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.
0
cielo valdoz
Top achievements
Rank 1
answered on 06 Apr 2010, 11:00 AM
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?
0
Giuseppe
Telerik team
answered on 06 Apr 2010, 11:46 AM
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.
0
cielo valdoz
Top achievements
Rank 1
answered on 07 Apr 2010, 05:52 AM
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
0
Giuseppe
Telerik team
answered on 07 Apr 2010, 10:28 AM
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.
Tags
Chart
Asked by
cielo valdoz
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
cielo valdoz
Top achievements
Rank 1
Share this question
or