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

Build PieChart from Code Behind

1 Answer 258 Views

Chart (HTML5)

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

Tim asked on 23 May 2013, 02:41 PM

I have this *mostly* working but I'm having trouble converting from the UI version.

I *was* using this.

<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>

I've now switched to doing it from the code behind, but I'm having trouble using the ClientTemplate Feature, as well as the Kendo.

<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>

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("Low").ToString, LowQuery, System.Drawing.ColorTranslator.FromHtml("#9BFF00")))

risklevels.Add(New RiskLevel(Master.GetTranslation("Medium").ToString, MediumQuery, System.Drawing.ColorTranslator.FromHtml("#FFE300")))

risklevels.Add(New RiskLevel(Master.GetTranslation("High").ToString, HighQuery, System.Drawing.ColorTranslator.FromHtml("#FF6300")))

RiskLevelsChart.ChartTitle.Text = Master.GetTranslation("RiskLevels").ToString

Dim chartData As New PieSeries

chartData.StartAngle = "90"

chartData.LabelsAppearance.Position = HtmlChart.PieLabelsPosition.Circle

chartData.LabelsAppearance.DataFormatString = "{0}"

chartData.TooltipsAppearance.DataFormatString = "{0} %"

For Each value As RiskLevel In risklevels

Dim item As New SeriesItem

item.Name = value.RiskLevelName

item.YValue = value.RiskLevelCount

item.BackgroundColor = value.RiskLevelColor

chartData.Items.Add(item)

Next

RiskLevelsChart.PlotArea.Series.Add(chartData)

Build PieChart from Code Behind

1 Answer, 1 is accepted