Display Both 'Number' and '%' in Stacked Bar

[Irving]

Hi guys,

 

I am having a RadHTMLChart which it shown in my attached file. I was wondering how do go about displaying number and the percentage base on each stacked column. Currently I am using the code snippet which is shown below:

DataTable source = getData(); // getting my data soruce

ColumnSeries colOnTime = new ColumnSeries();
colOnTime.Name = "WO on Time";
colOnTime.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.Center;
colOnTime.Stacked = true;
colOnTime.Appearance.FillStyle.BackgroundColor = System.Drawing.ColorTranslator.FromHtml("#33CC33");
colOnTime.LabelsAppearance.ClientTemplate = "#if (value > 0) {# #=value# #} else {# #} #";

ColumnSeries colLate = new ColumnSeries();
colLate.Name = "WO less than " + ConfigurationManager.AppSettings["KPIThreshold"] + " days overdued";
colLate.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.Center;
colLate.Stacked = true;
colLate.LabelsAppearance.ClientTemplate = "#if (value > 0) {# #=value# #} else {# #} #";

ColumnSeries colVeryLate = new ColumnSeries();
colVeryLate.Name = "WO more than " + ConfigurationManager.AppSettings["KPIThreshold"] + " days overdued";
colVeryLate.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.Center;
colVeryLate.Appearance.FillStyle.BackgroundColor = System.Drawing.ColorTranslator.FromHtml("#B80000");
colVeryLate.Stacked = true;
colVeryLate.LabelsAppearance.ClientTemplate = "#if (value > 0) {# #=value# #} else {# #} #";

ColumnSeries grandTotal = new ColumnSeries();
grandTotal.Stacked = true;
grandTotal.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.OutsideEnd;
grandTotal.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.Transparent;
grandTotal.LabelsAppearance.ClientTemplate = "#if (value > 0) {# #=value# #} else {# #} #";

foreach (DataRow row in source.Rows)
{
    int? wo = Convert.ToInt32(row["onTime"]);
    colOnTime.SeriesItems.Add(wo);
    wo = Convert.ToInt32(row["late"]);
    colLate.SeriesItems.Add(wo);
    wo = Convert.ToInt32(row["verylate"]);
    colVeryLate.SeriesItems.Add(wo);
}
    chrtKPI.PlotArea.Series.Add(colOnTime);
    chrtKPI.PlotArea.Series.Add(colLate);
    chrtKPI.PlotArea.Series.Add(colVeryLate);
    chrtKPI.PlotArea.YAxis.LabelsAppearance.TextStyle.Padding = "5px";
    chrtKPI.DataBind();

[Ianko]

Hi Irving,

Percent values are available only in donut and pie series. The same is explained here—http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview#main-properties-used-in-a-clienttemplate.

Also, with column series, there is no built-in calculation for percent, even if the are stacked. What it should  represent this percent value, percent from the items of the group or from the items in the stack?

However, you can also calculate some values programmatically and save them in the database, so to show them in the client-template as shown here—http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview#showing-database-values-using-a-clienttemplate.

Regards,
Ianko
Telerik

[Irving]

Hi Ianko,

Thanks for your reply, yes my intention is to calculate the values of each stacked column in terms of percentage base on the total sum and display it beside my values. I can work with your 2nd alternate solution, so I will keep you posted if I encounter any issues. Thanks again.

 Cheers