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

Change the slice color programatically

4 Answers 151 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
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

Sort by
0
Tim
Top achievements
Rank 1
answered on 23 May 2013, 02:38 PM
strange I just want to cancel this posting but there's no way for me to do that.
0
Accepted
Danail Vasilev
Telerik team
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.
0
Tim
Top achievements
Rank 1
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



0
Tim
Top achievements
Rank 1
answered on 23 May 2013, 06:01 PM
Argh, I looked through that Demo and the Color (hex) code is being passed as a string. once I did that, everything worked fine!!

Thanx!
Tags
Chart (HTML5)
Asked by
Tim
Top achievements
Rank 1
Answers by
Tim
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or