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!
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);
}
}
}