Change the slice color programatically

5 posts, 1 answers
  1. Tim
    Tim avatar
    40 posts
    Member since:
    Sep 2012

    Posted 22 May 2013 Link to this post


    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
  2. Tim
    Tim avatar
    40 posts
    Member since:
    Sep 2012

    Posted 23 May 2013 Link to this post

    strange I just want to cancel this posting but there's no way for me to do that.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 23 May 2013 Link to this post

    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.
  5. Tim
    Tim avatar
    40 posts
    Member since:
    Sep 2012

    Posted 23 May 2013 Link to this post

    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



  6. Tim
    Tim avatar
    40 posts
    Member since:
    Sep 2012

    Posted 23 May 2013 Link to this post

    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!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017