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

[Solved] Color for custom legend items cannot be set

1 Answer 191 Views

Chart (Obsolete)

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

Masoud asked on 14 May 2013, 05:11 PM

RadChartLegendFirst.png

Hi there,

I have an asp.net page (code at the end of posting) with a RadChart. The RadChart is used to show the progress of a project as a Gantt diagram. The client organizes thier projects in the following manner
- a project is split into milestones
- a milestone is split into phases

Only the phases should be displayed on the diagram and not the milestones. The phases should be colored according to the milestone. The colors of the milestones should be shown as legend. Please see the attached image.

I have the following issues:
I don't seem to get the legend working properly. I use PreRender of the RadChart to reset the legend and create its elements manually. The colors shown however don't correspnd with the ones assigned.

Following is the code.

Thank you for your help!

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Projektplan.aspx.cs" Inherits="Test.Pages.Projektplan" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:scriptreference assembly="Telerik.Web.UI" name="Telerik.Web.UI.Common.Core.js"></asp:scriptreference>

<asp:scriptreference assembly="Telerik.Web.UI" name="Telerik.Web.UI.Common.jQuery.js"></asp:scriptreference>

<asp:scriptreference assembly="Telerik.Web.UI" name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:scriptreference>

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>

<telerik:RadChart ID="ProjektPlan" runat="server" SeriesOrientation="Horizontal" OnPreRender="ProjektPlan_OnPreRender" DefaultType="Gantt" />

</div>

</form>

</body>

</html>

using System;

using System.Drawing;

using Telerik.Charting;

using Telerik.Charting.Styles;

using Telerik.Web.UI;

namespace Test.Pages

{

public partial class Projektplan : System.Web.UI.Page

{

readonly Color _kickoffcolor = Color.Coral;

readonly Color _longColor = Color.Blue;

readonly Color _pflichtenheftColor = Color.CornflowerBlue;

readonly Color _shortColor = Color.Cornsilk;

readonly Color _entscheidungsvorlageColor = Color.Crimson;

readonly Color _abschlussColor = Color.Cyan;

protected void Page_Load(object sender, EventArgs e)

{

if (Page.IsPostBack)

{

return;

}

ProjektPlan.Height = 600;

ProjektPlan.Width = 800;

ProjektPlan.PlotArea.YAxis.AutoScale = false;

ProjektPlan.PlotArea.YAxis.AxisMode = ChartYAxisMode.Extended;

ProjektPlan.PlotArea.YAxis.Appearance.ValueFormat = ChartValueFormat.ShortDate;

ProjektPlan.PlotArea.YAxis.Appearance.CustomFormat = "MM.yyyy";

ProjektPlan.PlotArea.YAxis.Appearance.LabelAppearance.RotationAngle = 45;

ProjektPlan.PlotArea.YAxis.Appearance.MinorGridLines.Visible = false;

ProjektPlan.PlotArea.XAxis.Appearance.MajorGridLines.Visible = false;

double start = new DateTime(2013, 5, 17).ToOADate();

double ende = new DateTime(2014, 8, 17).ToOADate();

ProjektPlan.PlotArea.YAxis.AddRange(start, ende, 30);

ChartSeries series0 = new ChartSeries { Name = "series 1", Type = ChartSeriesType.Gantt };

series0.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.Nothing;

series0.Appearance.FillStyle.MainColor = Color.Blue;

ChartSeriesItem kickoffSeriesItem = new ChartSeriesItem

{

Name = "Series0Item0",

YValue = new DateTime(2013, 5, 17).ToOADate(),

YValue2 = new DateTime(2013, 6, 17).ToOADate()

};

kickoffSeriesItem.Label.TextBlock.Text = "Kickoff";

kickoffSeriesItem.Label.Appearance.LabelLocation = StyleSeriesItemLabel.ItemLabelLocation.Auto;

kickoffSeriesItem.Appearance.FillStyle.MainColor = _kickoffcolor;

ChartSeriesItem longSeriesItem = new ChartSeriesItem

{

Name = "Series0Item1",

YValue = new DateTime(2013, 7, 20).ToOADate(),

YValue2 = new DateTime(2013, 8, 14).ToOADate()

};

longSeriesItem.Appearance.FillStyle.MainColor = _longColor;

longSeriesItem.Label.TextBlock.Text = "Longlist";

kickoffSeriesItem.Label.Appearance.LabelLocation = StyleSeriesItemLabel.ItemLabelLocation.Auto;

ChartSeriesItem shortSeriesItem = new ChartSeriesItem

{

Name = "Series1Item0",

YValue = new DateTime(2013, 9, 30).ToOADate(),

YValue2 = new DateTime(2013, 11, 17).ToOADate()

};

shortSeriesItem.Appearance.FillStyle.MainColor = _shortColor;

shortSeriesItem.Label.TextBlock.Text = "Shortlist";

kickoffSeriesItem.Label.Appearance.LabelLocation = StyleSeriesItemLabel.ItemLabelLocation.Auto;

ChartSeriesItem abschlussSeriesItem = new ChartSeriesItem

{

Name = "Series1Item1",

YValue = new DateTime(2013, 12, 15).ToOADate(),

YValue2 = new DateTime(2014, 4, 14).ToOADate()

};

abschlussSeriesItem.Appearance.FillStyle.MainColor = _abschlussColor;

abschlussSeriesItem.Label.TextBlock.Text = "Abschluß";

kickoffSeriesItem.Label.Appearance.LabelLocation = StyleSeriesItemLabel.ItemLabelLocation.Auto;

series0.AddItem(abschlussSeriesItem);

series0.AddItem(shortSeriesItem);

series0.AddItem(longSeriesItem);

series0.AddItem(kickoffSeriesItem);

ProjektPlan.AddChartSeries(series0);

}

protected void ProjektPlan_OnPreRender(object sender, EventArgs e)

{

RadChart chart = (RadChart) sender;

LabelItem kickoffLegendItem = new LabelItem("Kickoff");

kickoffLegendItem.Appearance.FillStyle.MainColor = _kickoffcolor;

LabelItem longLegendItem = new LabelItem("Longlist");

longLegendItem.Appearance.FillStyle.MainColor = _longColor;

LabelItem pflichtenheftLegendItem = new LabelItem("Pflichtenheft");

longLegendItem.Appearance.FillStyle.MainColor = _pflichtenheftColor;

LabelItem shortLegendItem = new LabelItem("Shortlist");

shortLegendItem.Appearance.FillStyle.MainColor = _shortColor;

LabelItem entscheidungsvorlageLegendItem = new LabelItem("Entscheidungsvorlage");

shortLegendItem.Appearance.FillStyle.MainColor = _entscheidungsvorlageColor;

LabelItem abschlussLegendItem = new LabelItem("Abschluß");

abschlussLegendItem.Appearance.FillStyle.MainColor = _abschlussColor;

chart.Legend.Items.Clear();

chart.Legend.Items.Add(kickoffLegendItem);

chart.Legend.Items.Add(longLegendItem);

chart.Legend.Items.Add(pflichtenheftLegendItem);

chart.Legend.Items.Add(shortLegendItem);

chart.Legend.Items.Add(entscheidungsvorlageLegendItem);

chart.Legend.Items.Add(abschlussLegendItem);

}

1 Answer, 1 is accepted

Accepted

answered on 17 May 2013, 06:32 PM

ChartImage.png

Hi Klaus,

The problem was that (probably because of copy pasting) you were creating item B and after that setting the color of item A:

LabelItem longLegendItem = new LabelItem("Longlist");

longLegendItem.Appearance.FillStyle.MainColor = _longColor;

LabelItem pflichtenheftLegendItem = new LabelItem("Pflichtenheft");

longLegendItem.Appearance.FillStyle.MainColor = _pflichtenheftColor;

LabelItem shortLegendItem = new LabelItem("Shortlist");

shortLegendItem.Appearance.FillStyle.MainColor = _shortColor;

LabelItem entscheidungsvorlageLegendItem = new LabelItem("Entscheidungsvorlage");

shortLegendItem.Appearance.FillStyle.MainColor = _entscheidungsvorlageColor;

After fixing this you should be able to see the items colors as expected (see attached screenshot).

Regards,
Petar Kirov
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.