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

[Solved] Change the slice color programatically

4 Answers 228 Views

Chart (HTML5)

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

Tim asked on 22 May 2013, 07:57 PM

Hello, I have the below working perfectly, however, I need to be able to change the Slice colors based on the Data..

i.e., The High slice should be red, Medium Yellow and Low Green. I can't seem to figure out that piece..

<telerik:RadHtmlChart runat="server" ID="RiskLevelsChart" Height="400px" Width="400px" Transitions="true" RenderMode="Lightweight"

Skin="Forest">

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<ChartTitle>

<Appearance Align="Center" BackgroundColor="White" Position="Top"></Appearance>

</ChartTitle>

<Legend>

<Appearance BackgroundColor="White" Position="Right" Visible="true"></Appearance>

</Legend>

<PlotArea>

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<Series>

<telerik:PieSeries StartAngle="90" dataFieldY="RiskLevelCount" NameField="RiskLevelName" Name="RiskLevelName">

<LabelsAppearance Position="Circle" DataFormatString="{0} %" DataField="RiskLevelName" ClientTemplate="#=dataItem.RiskLevelName# (#=dataItem.RiskLevelCount#)">

</LabelsAppearance>

<TooltipsAppearance ClientTemplate=" #=kendo.format(\'{0:P0}\', percentage)# " Visible="true" />

</telerik:PieSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart

>




Private Sub DoChart1(ByVal Assessment As List(Of ExtendedRiskAssessment))
 
    Dim query = From r In Assessment
    Dim HighQuery = Assessment.Where(Function(x) x.RiskLevel = 3).Count
    Dim MediumQuery = Assessment.Where(Function(x) x.RiskLevel = 2).Count
    Dim LowQuery = Assessment.Where(Function(x) x.RiskLevel = 1).Count
 
    Dim risklevels As New List(Of RiskLevel)()
    risklevels.Add(New RiskLevel(Master.GetTranslation("High").ToString, HighQuery, Color.Red))
    risklevels.Add(New RiskLevel(Master.GetTranslation("Medium").ToString, MediumQuery, Color.Yellow))
    risklevels.Add(New RiskLevel(Master.GetTranslation("Low").ToString, LowQuery, Color.Green))
 
 
    RiskLevelsChart.ChartTitle.Text = Master.GetTranslation("RiskLevels").ToString
 
 
    RiskLevelsChart.DataSource = risklevels
    RiskLevelsChart.DataBind()
 
End Sub

4 Answers, 1 is accepted

Accepted

answered on 23 May 2013, 05:41 PM

Hi Tim,

You can use the ColorField property of the Series, in order to indicate the databound chart to the field of the datasource that contains the colors. You can find useful this online example that shows this approach. You can also may find interesting HtmlChart - Conditional Item Colorization and HtmlChart - Chart Element Customization online demos.

Regards,
Danail Vasilev
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 23 May 2013, 05:56 PM

Unfortunately, I had tried that and when I do the below, it merely turns my entire chart Black..

When I inspect my DataSoruce, this is whats being passed for a Color
"{Name=ff9bff00, ARGB=(255, 155, 255, 0)}"

<telerik:RadHtmlChart runat="server" ID="RiskLevelsChart" Height="400px" Width="400px" Transitions="true" RenderMode="Lightweight"

Skin="Forest">

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<ChartTitle>

<Appearance Align="Center" BackgroundColor="White" Position="Top"></Appearance>

</ChartTitle>

<Legend>

<Appearance BackgroundColor="White" Position="Right" Visible="true"></Appearance>

</Legend>

<PlotArea>

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<Series>

<telerik:PieSeries StartAngle="90" dataFieldY="RiskLevelCount" NameField="RiskLevelName" Name="RiskLevelName" ColorField="RiskLevelColor">

<LabelsAppearance Position="Circle" DataFormatString="{0} %" DataField="RiskLevelName" ClientTemplate="#=dataItem.RiskLevelName# (#=dataItem.RiskLevelCount#)">

</LabelsAppearance>

<TooltipsAppearance ClientTemplate=" #=kendo.format(\'{0:P0}\', percentage)# " Visible="true" />

</telerik:PieSeries>

</Series>

</PlotArea>

</telerik:RadHtmlChart>

Public Sub New(ByVal riskLevelName As String, ByVal riskLevelCount As Integer, ByVal RiskLevelColor As Color)

_riskLevelName = riskLevelName

_riskLevelCount = RiskLevelCount

_riskLevelColor = RiskLevelColor

End Sub

Private _riskLevelName As String

Public Property RiskLevelName() As String

Get

Return _riskLevelName

End Get

Set(ByVal value As String)

_riskLevelName = value

End Set

End Property

Private _riskLevelCount As Integer

Public Property RiskLevelCount() As Integer

Get

Return _riskLevelCount

End Get

Set(ByVal value As Integer)

_riskLevelCount = value

End Set

End Property

Private _riskLevelColor As Color

Public Property RiskLevelColor() As Color

Get

Return _riskLevelcolor

End Get

Set(ByVal value As Color)

_riskLevelcolor = value

End Set

End Property