we´ve been using RadControls for more than one year now. But since version 4.x of RadChart we have problems with ChartSeries Labels.
In case of IntelligentLabelsEnabled="false" all labels are shown, but overwrite each other and do not look very well positioned. If IntelligentLabelsEnabled is set to true, it looks much better, but some labels just disappear or overwrite each other, too.
We now use RadControls for ASP.NET AJAX 2008 1 619.
Here is some code to reproduce the problem:
Default.aspx:
//***************************************
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadChartBugs._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body style="width: 100%">
<form id="form1" runat="server" style="width: 100%">
<asp:Panel ID="Panel1" runat="server" Width="100%" BackColor="AliceBlue">
<telerik:RadChart ID="RadChart1" runat='server' Width="1100px" Height="500px"
IntelligentLabelsEnabled="true" AutoLayout="true">
<PlotArea>
<EmptySeriesMessage TextBlock-Text="(Keine Daten vorhanden)">
</EmptySeriesMessage>
</PlotArea>
<ChartTitle TextBlock-Text="IntelligentLabelsEnabled='true' AutoLayout='true'">
</ChartTitle>
</telerik:RadChart>
<telerik:RadChart ID="RadChart3" runat='server' Width="1100px" Height="500px"
IntelligentLabelsEnabled="false" AutoLayout="true">
<PlotArea>
<EmptySeriesMessage TextBlock-Text="(Keine Daten vorhanden)">
</EmptySeriesMessage>
</PlotArea>
<ChartTitle TextBlock-Text="IntelligentLabelsEnabled='false' AutoLayout='true'">
</ChartTitle>
</telerik:RadChart>
<telerik:RadChart ID="RadChart5" runat='server' Width="1100px" Height="500px"
IntelligentLabelsEnabled="true" AutoLayout="true">
<PlotArea>
<EmptySeriesMessage TextBlock-Text="(Keine Daten vorhanden)">
</EmptySeriesMessage>
</PlotArea>
<ChartTitle TextBlock-Text="IntelligentLabelsEnabled='true' AutoLayout='true'">
</ChartTitle>
</telerik:RadChart>
<telerik:RadChart ID="RadChart7" runat='server' Width="1100px" Height="500px"
IntelligentLabelsEnabled="false" AutoLayout="true">
<PlotArea>
<EmptySeriesMessage TextBlock-Text="(Keine Daten vorhanden)">
</EmptySeriesMessage>
</PlotArea>
<ChartTitle TextBlock-Text="IntelligentLabelsEnabled='false' AutoLayout='true'">
</ChartTitle>
</telerik:RadChart>
<telerik:RadChart ID="RadChart9" runat='server' Width="1100px" Height="500px"
IntelligentLabelsEnabled="true" AutoLayout="true">
<PlotArea>
<EmptySeriesMessage TextBlock-Text="(Keine Daten vorhanden)">
</EmptySeriesMessage>
</PlotArea>
<ChartTitle TextBlock-Text="IntelligentLabelsEnabled='true' AutoLayout='true'">
</ChartTitle>
</telerik:RadChart>
<telerik:RadChart ID="RadChart11" runat='server' Width="1100px" Height="500px"
IntelligentLabelsEnabled="false" AutoLayout="true">
<PlotArea>
<EmptySeriesMessage TextBlock-Text="(Keine Daten vorhanden)">
</EmptySeriesMessage>
</PlotArea>
<ChartTitle TextBlock-Text="IntelligentLabelsEnabled='false' AutoLayout='true'">
</ChartTitle>
</telerik:RadChart>
</asp:Panel>
</form>
</body>
</html>
//***************************************
Default.aspx.cs:
//***************************************
using System.Drawing;
using System;
using Telerik.Web.UI;
using Telerik.Charting.Styles;
using Telerik.Charting;
namespace RadChartBugs
{
public partial class _Default : System.Web.UI.Page
{
const int MAX_PIE_CHART_ITEMS = 10;
static readonly Color[] _pieChartColors = new Color[]{
Color.Red, Color.Purple, Color.Plum,
Color.Blue, Color.Coral, Color.Cyan,
Color.Green, Color.Indigo, Color.Magenta,
Color.Yellow, Color.Teal, Color.Salmon,
Color.OrangeRed
};
protected void Page_Load(object sender, EventArgs e)
{
PrepareChart1(RadChart1);
PrepareChart1(RadChart3);
PrepareChart2(RadChart5);
PrepareChart2(RadChart7);
PrepareChart3(RadChart9);
PrepareChart3(RadChart11);
}
protected void PrepareChart1(RadChart chart)
{
chart.PlotArea.XAxis.Appearance.LabelAppearance.Visible = false;
chart.PlotArea.YAxis.Appearance.ValueFormat = ChartValueFormat.Currency;
ChartSeries dep1Series = new ChartSeries();
dep1Series.Type = ChartSeriesType.Bar;
dep1Series.Name = "Department 1";
dep1Series.AddItem(100000, "Company 1: 100.000");
dep1Series.AddItem(150000, "Company 2: 150.000");
dep1Series.AddItem(125000, "Company 3: 125.000");
dep1Series.AddItem(140000, "Company 4: 140.000");
dep1Series.AddItem(110000, "Company 5: 110.000");
ChartSeries dep2Series = new ChartSeries();
dep2Series.Type = ChartSeriesType.Bar;
dep2Series.Name = "Department 2";
dep2Series.AddItem(140000, "Company 6: 140.000");
dep2Series.AddItem(110000, "Company 7: 110.000");
dep2Series.AddItem(100000, "Company 8: 100.000");
dep2Series.AddItem(150000, "Company 9: 150.000");
dep2Series.AddItem(125000, "Company 10: 125.000");
chart.AddChartSeries(dep1Series);
chart.AddChartSeries(dep2Series);
dep1Series.Appearance.LabelAppearance.RotationAngle = -90;
dep2Series.Appearance.LabelAppearance.RotationAngle = -90;
}
protected void PrepareChart2(RadChart chart)
{
chart.PlotArea.YAxis.Appearance.ValueFormat = ChartValueFormat.Currency;
chart.PlotArea.XAxis.Appearance.ValueFormat = ChartValueFormat.None;
chart.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = -90;
chart.PlotArea.XAxis.AutoScale = false;
chart.PlotArea.XAxis.Items.Clear();
ChartSeries chartSeries = new ChartSeries();
chartSeries.Name = "Turnover total: 400.000€";
chartSeries.Type = ChartSeriesType.Line;
chartSeries.Appearance.LabelAppearance.RotationAngle = -90;
chartSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;
chartSeries.AddItem(150000, "EUR 150.000");
chart.PlotArea.XAxis.Items.Add(new ChartAxisItem("01.2008"));
chartSeries.AddItem(125000, "EUR 125.000");
chart.PlotArea.XAxis.Items.Add(new ChartAxisItem("02.2008"));
chartSeries.AddItem(170000, "EUR 170.000");
chart.PlotArea.XAxis.Items.Add(new ChartAxisItem("03.2008"));
chartSeries.AddItem(165000, "EUR 165.000");
chart.PlotArea.XAxis.Items.Add(new ChartAxisItem("04.2008"));
chartSeries.AddItem(70000, "EUR 70.000");
chart.PlotArea.XAxis.Items.Add(new ChartAxisItem("05.2008"));
chart.AddChartSeries(chartSeries);
chart.Legend.Visible = true;
}
protected void PrepareChart3(RadChart chart)
{
chart.Legend.Visible = false;
ChartSeries chartSeries = new ChartSeries();
chartSeries.Name = "Turnover total: EUR 100.000";
chartSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.Nothing;
chartSeries.Type = ChartSeriesType.Pie;
chartSeries.Appearance.StartAngle = -90;
chartSeries.Appearance.ShowLabelConnectors = true;
chartSeries.Appearance.DiameterScale = 0.6;
chart.PlotArea.YAxis.Appearance.ValueFormat = ChartValueFormat.Percent;
chart.PlotArea.XAxis.Appearance.ValueFormat = ChartValueFormat.Currency;
double sumPercent = 100;
double sumValue = 100000;
for (int i = 1; i < 3; ++i)
{
string label = string.Format("{0}: {1} {2:N2} ({3:N2}%)", "Customer " + i.ToString(), "EUR", (24 + i) * 1000, 24 + i);
chartSeries.AddItem(24 + i, label, _pieChartColors[i % _pieChartColors.Length]);
sumPercent -= 24 + i;
sumValue -= (24 + i) * 1000;
}
for (int i = 1; i < 9; ++i)
{
double d = (12 - i) / 2;
string label = string.Format("{0}: {1} {2:N2} ({3:N2}%)", "Customer " + (i + 2).ToString(), "EUR", d * 1000, d);
chartSeries.AddItem(d, label, _pieChartColors[i % _pieChartColors.Length]);
sumPercent -= d;
sumValue -= d * 1000;
}
chartSeries.AddItem(sumPercent, string.Format("Remain: EUR {0:N2} ({1:N2}%)", sumValue, sumPercent), Color.Pink, true);
chart.AddChartSeries(chartSeries);
chartSeries.Appearance.TextAppearance.MaxLength = 150;
}
}
}
//***************************************
There may be some properties to change the look of labels, we do not know by now. The documentation in some cases is still very rare ;-)
Hope u can help.
Thanx,
Daniel
P.S.: While writing this forum post, I pasted some content into this editor window. An askbox occured, asking me if I want to allow pasting into this window (In German: Möchten Sie zulassen, dass Informationen aus der Zwischenablage in diese Seite eingefügt werden?). If I said "No" the pasted content anyhow sometimes appeared, but appeared everytime when I pasted twice (and answered "No").
5 Answers, 1 is accepted
Onto your questions:
- As for the missing labels -- indeed when the IntelligentLabelsEnabled property is set, it seems the rules applied to the rendering of the labels are inconsistent at times hence the missing labels seem a bit random. In our opinion the behavior for the bar / pie exhibits this problem, while in the case of line series the behavior is consistent -- the engine tries to render all labels on top of the line and if there is not enough space, they are not rendered at all.
- As for the overlapping -- we were unable to observe any overlapping labels with the provided code when the IntelligentLabelsEnabled property is set to true.
We have logged your feedback in our bugtracking system and we will improve the behavior for one of the next versions of the control. Unfortunately at the moment we cannot suggest you a workaround besides switching the property on/off depending on your specific scenario. We have updated your Telerik points for the feedback.
Regards,
Manuel
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Unfortunately we have not been able to improve on the intelligent labels functionality described previously in this thread. We will forward your inquiry to our developers but currently we cannot commit a specific timeframe for the resolution of this issue.
Sorry for the inconvenience.
Best wishes,
Manuel
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 2
Intelligent labels is set to true.
I guess I'm going to have to go with another company's chart tool...
I'll never get away with giving my users this mess...
Any suggestions?
Unfortunately, we will not be fixing this issue anytime soon as our efforts are focused on our Silverlight/WPF charting product. We admit the problem and understand your frustration, however, the solution I can offer is to use our SL chart which works much better. You can check our sales dashboard demo and others to see how to integrate it into your web app.
Once again, please accept our apologies for this inconvenience.
Best wishes,
Vladimir Milev
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items.