Hello,
A while back I was using the normal RadChart and not the HTML version. Once the HTML version came out I switched everything over to it and have been pretty happy. Recently I have come across the problem where I have too many labels on the pie chart (i.e. there are many items that are 2% or less making up the chart) which makes the chart look pretty messy.
In the normal RadChart there was a way to hide the labels on the databind event if the value of the dataitem was less than a certain percentage. However, I cannot seem to find a way to do this with the HTML chart.
Does anyone have an example how I can hide label that are less than a certain percentage on the HTML pie chart?
Thanks,.
Ron
A while back I was using the normal RadChart and not the HTML version. Once the HTML version came out I switched everything over to it and have been pretty happy. Recently I have come across the problem where I have too many labels on the pie chart (i.e. there are many items that are 2% or less making up the chart) which makes the chart look pretty messy.
In the normal RadChart there was a way to hide the labels on the databind event if the value of the dataitem was less than a certain percentage. However, I cannot seem to find a way to do this with the HTML chart.
Does anyone have an example how I can hide label that are less than a certain percentage on the HTML pie chart?
Thanks,.
Ron
11 Answers, 1 is accepted
0
Accepted
Hi Ron,
You can achieve the desired functionality by using the ClientTemplates of the RadHtmlChart. For example:
where the highlighted text is the condition of the function that returns values for the labels which percentage is greater than 2%.
Kind regards,
Danail Vasilev
the Telerik team
You can achieve the desired functionality by using the ClientTemplates of the RadHtmlChart. For example:
<
telerik:RadHtmlChart
runat
=
"server"
ID
=
"PieChart"
Width
=
"600"
Height
=
"400"
>
<
PlotArea
>
<
Series
>
<
telerik:PieSeries
>
<
Items
>
<
telerik:SeriesItem
YValue
=
"130"
/>
<
telerik:SeriesItem
YValue
=
"150"
/>
<
telerik:SeriesItem
YValue
=
"5"
/>
<
telerik:SeriesItem
YValue
=
"2"
/>
</
Items
>
<
LabelsAppearance
ClientTemplate="#if(percentage > 0.02){# #= value# #}#">
</
LabelsAppearance
>
</
telerik:PieSeries
>
</
Series
>
</
PlotArea
>
</
telerik:RadHtmlChart
>
where the highlighted text is the condition of the function that returns values for the labels which percentage is greater than 2%.
Kind regards,
Danail Vasilev
the Telerik team
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
Ron
Top achievements
Rank 2
answered on 15 May 2013, 12:34 PM
This worked perfectly, thank you.
0
MBEN
Top achievements
Rank 2
Veteran
answered on 31 Jul 2014, 06:43 PM
I am looking for something similar. Instead of based on a percentage, I want to display top 4 values and club all the rest together and display as one item and mark the legend as "All Others". How can I do that?
Below is my code:
Below is my code:
ASPX:
<
telerik:RadHtmlChart
runat
=
"server"
ID
=
"_pieChart"
Transitions
=
"false"
>
<
Appearance
>
<
FillStyle
BackgroundColor
=
"Transparent"
></
FillStyle
>
</
Appearance
>
<
Legend
>
<
Appearance
BackgroundColor
=
"Transparent"
Position
=
"Left"
Visible
=
"true"
>
<
TextStyle
Margin
=
"-7"
FontSize
=
"10"
/>
</
Appearance
>
</
Legend
>
<
PlotArea
>
<
Appearance
>
<
FillStyle
BackgroundColor
=
"Transparent"
></
FillStyle
>
</
Appearance
>
<
Series
>
</
Series
>
</
PlotArea
>
</
telerik:RadHtmlChart
>
.CS
public void DrawPie(DataView dv, string YValue, string XValue)
{
_pieChart.PlotArea.Series.Clear();
PieSeries pieSeries = new PieSeries();
//create the series items
List<
SeriesItem
> items = new List<
SeriesItem
>();
List<
String
> xValues = new List<
String
>();
foreach (DataRowView row in dv)
{
SeriesItem si = new SeriesItem();
string xVal = (string)row[XValue];
decimal yVal = Decimal.Round(Convert.ToDecimal(row[YValue]), 2);
si.Name = xVal;
si.YValue = yVal;
items.Add(si);
xValues.Add(xVal);
}
//calculate the sum
decimal sum = 0.0M;
for (int i = 0; i <
items.Count
; i++)
{
sum += (decimal)items[i].YValue;
}
//calculate percentages
List<decimal> percentages = new List<
decimal
>();
for (int i = 0; i <
items.Count
; i++)
{
decimal
nextPercentage
=
Decimal
.Round(100 * ((decimal)items[i].YValue / sum), 2);
percentages.Add(nextPercentage);
}
//Add color palette
List<Color> colors = new List<
Color
>();
for (int i = 0; i <
items.Count
; i++)
{
colors.Add(Utility.MBPalette[i]);
}
//configure the series
pieSeries.DataFieldY
=
"yValue"
;
pieSeries.ColorField
=
"colorValue"
;
pieSeries.NameField
=
"xValue"
;
string
template
=
"#= kendo.format(\"
{0:N0}\", dataItem.percentageValue)#%";
string
tooltipTemplate
=
"#= dataItem.xValue# (#= dataItem.percentageValue#%)"
;
pieSeries.LabelsAppearance.ClientTemplate
=
template
;
pieSeries.TooltipsAppearance.ClientTemplate
=
tooltipTemplate
;
pieSeries.LabelsAppearance.Position
=
Telerik
.Web.UI.HtmlChart.PieAndDonutLabelsPosition.OutsideEnd;
pieSeries.LabelsAppearance.TextStyle.Margin
=
"-5"
;
pieSeries.LabelsAppearance.TextStyle.FontSize
=
Unit
.Pixel(10);
pieSeries.StartAngle
=
90
;
_pieChart.PlotArea.Series.Add(pieSeries);
//databind the chart
_pieChart.DataSource
=
GetData
(items, xValues, percentages, colors);
_pieChart.DataBind();
_pieChart.BorderColor
= Color.Transparent;
}
protected DataTable GetData(List<SeriesItem> items, List<
String
> xValues, List<
decimal
> percentages, List<
Color
>colors)
{
DataTable table = new DataTable();
table.Columns.Add(new DataColumn("xValue"));
table.Columns.Add(new DataColumn("yValue"));
table.Columns.Add(new DataColumn("percentageValue"));
table.Columns.Add(new DataColumn("colorValue"));
table.Columns.Add(new DataColumn("legendValueValue"));
for (int i = 0; i < items.Count; i++)
{
table.Rows.Add(new object[] { xValues[i], items[i].YValue, percentages[i], ColorTranslator.ToHtml(colors[i]) });
}
return table;
}
0
MBEN
Top achievements
Rank 2
Veteran
answered on 04 Aug 2014, 03:19 PM
Hi Telerik Team,
Any update on this?
Any update on this?
0
Hello,
What I can suggest is that you create a new data source that will have five rows - the first four rows will contain the top four values while the last row will sums up the rest. After that you can manually change the value in the fifth row, the column responsible for the PieSeriesItems names to "All Others", so that it can appear in the legend.
Note that this is a custom data source manipulation that is not directly related to Telerik UI controls and must be manually handled by the developer in order to fit in with his own requirements.
Regards,
Danail Vasilev
Telerik
What I can suggest is that you create a new data source that will have five rows - the first four rows will contain the top four values while the last row will sums up the rest. After that you can manually change the value in the fifth row, the column responsible for the PieSeriesItems names to "All Others", so that it can appear in the legend.
Note that this is a custom data source manipulation that is not directly related to Telerik UI controls and must be manually handled by the developer in order to fit in with his own requirements.
Regards,
Danail Vasilev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
0
Hi Manu,
You can increase the margin of the chart's plot area - http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/troubleshooting/common-issues#there-is-a-redundant-space-between-pie-or-donut-chart-and-its-legend
Regards,
Danail Vasilev
Telerik
You can increase the margin of the chart's plot area - http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/troubleshooting/common-issues#there-is-a-redundant-space-between-pie-or-donut-chart-and-its-legend
Regards,
Danail Vasilev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Ron
Top achievements
Rank 2
answered on 29 Apr 2016, 07:45 PM
Hello,
Recently I have upgraded my Telerik control suite and had to adjust the HTML from the initial answer to the following for it to work:
<
telerik:PieSeries
Name
=
"Percent of Total Servers"
DataFieldY
=
"percent"
>
<
LabelsAppearance
Position
=
"OutsideEnd"
>
<
ClientTemplate
>
#if(percentage > 0.02){# #= value# %#}#
</
ClientTemplate
>
</
LabelsAppearance
>
<
TooltipsAppearance
>
<
ClientTemplate
>
#=dataItem.key#<
br
/>#=dataItem.value#
</
ClientTemplate
>
</
TooltipsAppearance
>
</
telerik:PieSeries
>
I also had to adjust the Position from "Circle" to "OutsideEnd" as Circle was no longer a supported value. Everything works as expected with the exception of one little problem: even though a label does not appear because it is below the 2% threshold, the line for that label still appears where previously it did not.
How can I prevent the lines from still drawing when the labels are not there?
Thanks,
Ron
0
Hello Ron,
I have tested with old versions and the line still appears. Can you check which is the version that you have been using before the upgrade?
However, you can prevent this to happen by assigning the template through the client-side widget of Kendo Chart and its seriesDefaults option instead through the series one.
Regards,
Ianko
Telerik
I have tested with old versions and the line still appears. Can you check which is the version that you have been using before the upgrade?
However, you can prevent this to happen by assigning the template through the client-side widget of Kendo Chart and its seriesDefaults option instead through the series one.
<
telerik:RadHtmlChart
runat
=
"server"
ID
=
"PieChart"
Width
=
"600"
Height
=
"400"
>
<
PlotArea
>
<
Series
>
<
telerik:PieSeries
>
<
Items
>
<
telerik:SeriesItem
YValue
=
"130"
/>
<
telerik:SeriesItem
YValue
=
"150"
/>
<
telerik:SeriesItem
YValue
=
"5"
/>
<
telerik:SeriesItem
YValue
=
"2"
/>
</
Items
>
</
telerik:PieSeries
>
</
Series
>
</
PlotArea
>
<
ClientEvents
OnLoad
=
"OnLoad"
/>
</
telerik:RadHtmlChart
>
<
script
>
function OnLoad(sender, args) {
sender.get_kendoWidget().setOptions({ "seriesDefaults": { "labels": { "template": "#if(percentage > 0.02){# #= value# #}#" } } })
}
</
script
>
Regards,
Ianko
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Julie
Top achievements
Rank 1
answered on 08 Mar 2019, 03:34 PM
I am having a similar problem. If my value is zero it does not display the label. But it still displays the connector to the label
0
Hi Julie,
I have already answered your support ticket on this matter, the solution can be seen in the following KB article:
https://www.telerik.com/support/kb/aspnet-ajax/chart-(html5)/details/hide-piechart-labels-for-specific-values
Regards,
Vessy
Progress Telerik
I have already answered your support ticket on this matter, the solution can be seen in the following KB article:
https://www.telerik.com/support/kb/aspnet-ajax/chart-(html5)/details/hide-piechart-labels-for-specific-values
Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.