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

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

2 Answers 314 Views

Chart (HTML5)

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

Irving asked on 03 Jul 2015, 09:41 AM

kpi.png

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();

2 Answers, 1 is accepted

answered on 06 Jul 2015, 12:41 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items