<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" GridLines="None" PageSize="25" AutoGenerateColumns = "false" ShowFooter="true" ShowGroupPanel="True" ><ClientSettings AllowDragToGroup="true"> <Resizing ResizeGridOnColumnResize="True"></Resizing></ClientSettings><GroupingSettings ShowUnGroupButton="true"></GroupingSettings> <MasterTableView TableLayout="Auto" Width="100%" > <%-- AllowGroupCollapse="true" --%> <Columns> <telerik:GridBoundColumn UniqueName="trvAccountGroup" DataField="t_rv_account_group" HeaderText="trvAccountGroup"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="trvSysAccount" DataField="t_rv_sys_account" HeaderText="trvSysAccount"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="trvAccount" DataField="t_rv_account" HeaderText="trvAccount"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="trvGlObject1" DataField="t_rv_gl_object_1" HeaderText="trvGlObject1"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="trvGlObject2" DataField="t_rv_gl_object_2" HeaderText="trvGlObject2"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="trGl" DataField="t_r_gl" HeaderText="trGl"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="trcId" DataField="t_rc_id" HeaderText="trcId"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mAmt0" DataField="m_amt_0" HeaderText="mAmt0" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mAmt1" DataField="m_amt_1" HeaderText="mAmt1" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mAmt2" DataField="m_amt_2" HeaderText="mAmt2" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mAmt3" DataField="m_amt_3" HeaderText="mAmt3" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mAmt4" DataField="m_amt_4" HeaderText="mAmt4" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mAmt5" DataField="m_amt_5" HeaderText="mAmt5" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mAmt6" DataField="m_amt_6" HeaderText="mAmt6" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mAmt7" DataField="m_amt_7" HeaderText="mAmt7" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mAmt8" DataField="m_amt_8" HeaderText="mAmt8" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mAmt9" DataField="m_amt_9" HeaderText="mAmt9" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mAmtOther" DataField="m_amt_other" HeaderText="mAmtOther" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="mTotalAmt" DataField="m_total_amt" HeaderText="mTotalAmt" DataFormatString="{0:F0}" Aggregate="Avg"></telerik:GridBoundColumn> </Columns></MasterTableView></telerik:RadGrid>
Hi,
I am trying to create a Leave chart for the employees in the company. I am having some problems in grouping data in Telerik Gantt chart. The datasource that is fed to the chart is shown below.
MemberID MemberName StartDate EndDate
----------------------------------------------------------------------------------------
1 Name1 30987 31723
2 Name1 31908 31999
3 Name2 35678 36321
4 Name3 34245 34909
etc...
I want to display the member names on one axis, and the dates on the other axis. If you notice, Name1 has two records, so this should be reflected in the chart by showing two bars for one name (name1). I am getting the correct chart without grouping (however if a member has two leave periods, his name will be shown twice). Unfortunately with grouping, I am not being able to get the results printed on the chart as required. The code I am using is shown below. I am creating two series (assuming that a user has a maximum of two leave periods, so that the group column will divide each leave period on a separate series).
I am using version 2.0.0 of Telerik Controls.
//*********************************************************************************************************
// YAxis Properties
radChart.YAxis.ValueFormat =
ChartValueFormat.ShortDate;
radChart.YAxis.LabelRotationAngle = 90;
radChart.YAxis.Label.Visible =
true;
radChart.YAxis.AutoScale =
false;
radChart.YAxis.IsZeroBased =
false;
radChart.YAxis.AddRange(_from.ToOADate(), _maxDate.Value.ToOADate(), 1);
// YAxis2 Properties
radChart.YAxis2.ValueFormat =
ChartValueFormat.ShortDate;
radChart.YAxis2.LabelRotationAngle = 90;
radChart.YAxis2.Label.Visible =
true;
radChart.YAxis2.AutoScale =
false;
radChart.YAxis2.IsZeroBased =
false;
radChart.YAxis2.Visible =
AxisVisibility.True;
radChart.YAxis2.AddRange(_from.ToOADate(), _maxDate.Value.ToOADate(), 1);
// General Properties
radChart.DefaultType =
ChartSeriesType.Gantt;
radChart.Legend.Visible =
false;
radChart.Titles.Add(
new ChartTitle("NBK WDG Leave Chart"));
// add data to table
DataTable _table = new DataTable("Leave");
_table.Columns.Add(
"MemberId", typeof(Int32));
_table.Columns.Add(
"MemberName", typeof(String));
_table.Columns.Add(
"StartDate", typeof(Double));
_table.Columns.Add(
"EndDate", typeof(Double));
foreach (Member _member in Members)
{
_table.Rows.Add(_member.MemberId, _member.MemberName, _member.StartDate < _from ? _from.ToOADate() : _member.StartDate.ToOADate(), _member.EndDate.ToOADate());
}
// sort by member name
DataView _view = new DataView();
_view.Table = _table;
_view.Sort =
"MemberName";
// bind data to chart
radChart.DataSource = _view;
// instantiate new series
ChartSeries _series = new ChartSeries();
// define series Properties
_series.Type =
ChartSeriesType.Gantt;
_series.Name =
"Leave Periods";
_series.LabelAppearance.Visible =
false;
_series.DataYColumn =
"StartDate";
_series.DataYColumn2 =
"EndDate";
radChart.Series.Add(_series);
ChartSeries _series2 = new ChartSeries();
_series2.Type =
ChartSeriesType.Gantt;
_series2.Name =
"Leave Periods 2";
_series2.LabelAppearance.Visible =
false;
_series2.DataYColumn =
"StartDate";
_series2.DataYColumn2 =
"EndDate";
radChart.Series.Add(_series2);
radChart.SeriesOrientation =
ChartSeriesOrientation.Horizontal;
radChart.DataGroupColumn =
"MemberId";
// XAxis Properties
radChart.XAxis.DataLabelsColumn =
"MemberName";
radChart.XAxis.Label.Visible =
true;
// bind data
radChart.DataBind();
// show only weekly marks
int i = 1;
foreach (ChartAxisItem _item in radChart.YAxis.Items)
{
if ((i % 7) != 0)
{
_item.Visible =
false;
}
i++;
}
i = 1;
foreach (ChartAxisItem _item in radChart.YAxis2.Items)
{
if ((i % 7) != 0)
{
_item.Visible =
false;
}
i++;
}
Please help.
Regards,
Ehab

001.<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>002. 003.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">004. 005.<html xmlns="http://www.w3.org/1999/xhtml">006.<head runat="server">007. <title></title>008. <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />009.</head>010.<body>011. <form id="form1" runat="server">012. <telerik:RadScriptManager ID="RadScriptManager1" runat="server">013. <Scripts>014. <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2014.2.708.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.Core.js" />015. <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2014.2.708.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQuery.js" />016. <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2014.2.708.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQueryInclude.js" />017. </Scripts>018. </telerik:RadScriptManager>019. <script type="text/javascript">020. var fullAreaChartDataSource;021. var isFirstLoad = true;022. 023. function SaveFullAreaChartDataSource() {024. var areaChart = $find('<%=AreaChart.ClientID %>');025. fullAreaChartDataSource = eval(areaChart.get_dataSourceJSON());026. isFirstLoad = false;027. }028. 029. function SetSelectedTimSpanToAreaChart() {030. if (isFirstLoad) {031. SaveFullAreaChartDataSource();032. }033. var startDate = $find('<%=from.ClientID %>').get_selectedDate();034. var endDate = $find('<%=to.ClientID %>').get_selectedDate();035. 036. var filteredData = [];037. $(fullAreaChartDataSource).each(function () {038. if ((this.date >= startDate) && (this.date <= endDate)) filteredData.push(this);039. });040. 041. var areaChart = $find('<%=AreaChart.ClientID %>');042. 043. //Set the new datasource044. areaChart.set_dataSource(filteredData);045. 046. //Turning animation on before repainting the chart047. areaChart.set_transitions(true);048. 049. //Redrawing the chart050. areaChart.repaint();051. }052. 053. function UpdateDatePickerAllowedValues() {054. var startDate = $find('<%=from.ClientID %>').get_selectedDate();055. var endDate = $find('<%=to.ClientID %>').get_selectedDate();056. 057. var allowedMaxDateForStartDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() - 1);058. var allowedMinDateForEndDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 1);059. 060. $find('<%=from.ClientID %>').set_maxDate(allowedMaxDateForStartDate);061. $find('<%=to.ClientID %>').set_minDate(allowedMinDateForEndDate);062. SetSelectedTimSpanToAreaChart();063. }064. </script>065. <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">066. </telerik:RadAjaxManager>067. <div>068. <table>069. <tr>070. <td><span class="riSingle RadInput RadInput_IBB riResizable"><label class="riLabel">Von:</label></span></td>071. <td>072. <telerik:RadDatePicker runat="server" ID="from" Skin="MetroTouch" DatePopupButton-ToolTip="Wählen Sie das Startdatum für die anzuzeigenden Registrierungen" Calendar-FirstDayOfWeek="Monday" Calendar-NavigationCaption="Titel und Navigation" Calendar-NavigationSummary="Titel und Navigation die das aktuelle Jahr und den aktuellen Monat anzeigen können" DateInput-ShortYearCenturyEnd="2113" DateInput-ToolTip="Das Startdatum">073. <DatePopupButton />074. <Calendar ID="Calendar2" runat="server" EnableMonthYearFastNavigation="False">075. </Calendar>076. <ClientEvents OnDateSelected="UpdateDatePickerAllowedValues" />077. </telerik:RadDatePicker>078. </td>079. <td><span class="riSingle RadInput RadInput_IBB riResizable"><label class="riLabel">Bis:</label></span></td>080. <td>081. <telerik:RadDatePicker runat="server" ID="to" Skin="MetroTouch" DatePopupButton-ToolTip="Wählen Sie das Enddatum für die anzuzeigenden Registrierungen" Calendar-FirstDayOfWeek="Monday" Calendar-NavigationCaption="Titel und Navigation" Calendar-NavigationSummary="Titel und Navigation die das aktuelle Jahr und den aktuellen Monat anzeigen können" DateInput-ShortYearCenturyEnd="2113" DateInput-ToolTip="Das Enddatum">082. <DatePopupButton />083. <Calendar ID="Calendar1" runat="server" EnableMonthYearFastNavigation="False">084. </Calendar>085. <ClientEvents OnDateSelected="UpdateDatePickerAllowedValues" />086. </telerik:RadDatePicker></td>087. </tr>088.</table>089.<telerik:RadHtmlChart runat="server" ID="AreaChart" Skin="MetroTouch"> 090. <ChartTitle Text="Itemübersicht"></ChartTitle>091. <Legend>092. <Appearance Position="Bottom" Visible="True"></Appearance>093. </Legend>094. <PlotArea>095. <Series>096. <telerik:ColumnSeries Name="Items pro tag" DataFieldY="perDayValue">097. <TooltipsAppearance Color="#FFFFFF">098. <ClientTemplate>099. #if(value > 1) {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # neue Items #} else {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # neues Item #} #100. </ClientTemplate>101. </TooltipsAppearance>102. <Appearance FillStyle-BackgroundColor="#007B9A"></Appearance>103. <LabelsAppearance Visible="false" />104. </telerik:ColumnSeries>105. 106. <telerik:AreaSeries Name="Items insgesamt" DataFieldY="absoluteValue" MissingValues="Interpolate">107. <TooltipsAppearance Color="#FFFFFF">108. <ClientTemplate>109. #if(value > 1) {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # Items #} else {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # Item #} #110. </ClientTemplate>111. </TooltipsAppearance>112. <LineAppearance LineStyle="Normal" Width="2px" />113. <Appearance FillStyle-BackgroundColor="#00ADCC"></Appearance>114. <LabelsAppearance Visible="false" />115. </telerik:AreaSeries>116. </Series>117. <XAxis DataLabelsField="date" Type="Date" MajorTickType="None" MinorTickType="None">118. <LabelsAppearance Visible="false"></LabelsAppearance>119. <MinorGridLines Visible="false" />120. <MajorGridLines Visible="false" />121. </XAxis>122. <YAxis>123. <MinorGridLines Visible="false" />124. <MajorGridLines Visible="false" />125. <TitleAppearance Position="Center" RotationAngle="0" Text="Items" />126. <LabelsAppearance DataFormatString="{0}" />127. </YAxis>128.</PlotArea>129.</telerik:RadHtmlChart>130. </div>131. </form>132.</body>133.</html>01.using System;02.using System.Data;03. 04.public partial class Default : System.Web.UI.Page 05.{06. protected void Page_Load(object sender, EventArgs e)07. {08. this.InitializeControls();09. }10. 11. /// <summary>12. /// Initializes the date pickers with min, max and selected value. Also 13. /// creates connect the dummy dataset to the chart and bind it.14. /// </summary>15. private void InitializeControls()16. {17. this.from.MinDate = DateTime.Parse("13.05.2014");18. this.from.SelectedDate = DateTime.Parse("13.05.2014");19. this.from.MaxDate = DateTime.Parse("04.07.2014");20. 21. this.to.MinDate = DateTime.Parse("14.05.2014");22. this.to.SelectedDate = DateTime.Parse("05.07.2014");23. this.to.MaxDate = DateTime.Parse("05.07.2014");24. 25. this.AreaChart.DataSource = this.GetDummyDataSource();26. this.AreaChart.DataBind();27. }28. 29. /// <summary>30. /// Creates a dataset containing some dummy data.31. /// </summary>32. /// <returns><c>the dummy data dataset</c></returns>33. private DataSet GetDummyDataSource()34. {35. DataTable table = new DataTable("itemData");36. 37. string dateColumnName = "date";38. string absolutValueColumnName = "absoluteValue";39. string perDayValueColumnName = "perDayValue";40. 41. DataColumn dateColumn = new DataColumn(dateColumnName, Type.GetType("System.DateTime"));42. DataColumn absoluteValueColumn = new DataColumn(absolutValueColumnName, Type.GetType("System.Int32"));43. DataColumn perDayValueColumn = new DataColumn(perDayValueColumnName, Type.GetType("System.Int32"));44. 45. table.Columns.Add(dateColumn);46. table.Columns.Add(absoluteValueColumn);47. table.Columns.Add(perDayValueColumn);48. 49. DataRow firstTestEntry = table.Rows.Add();50. firstTestEntry[dateColumnName] = DateTime.Parse("13.05.2014");51. firstTestEntry[absoluteValueColumn] = 1;52. firstTestEntry[perDayValueColumn] = 1;53. 54. DataRow secondTestEntry = table.Rows.Add();55. secondTestEntry[dateColumnName] = DateTime.Parse("15.05.2014");56. secondTestEntry[absoluteValueColumn] = 2;57. secondTestEntry[perDayValueColumn] = 1;58. 59. DataRow thirdTestEntry = table.Rows.Add();60. thirdTestEntry[dateColumnName] = DateTime.Parse("10.06.2014");61. thirdTestEntry[absoluteValueColumn] = 5;62. thirdTestEntry[perDayValueColumn] = 3;63. 64. DataRow fourthTestEntry = table.Rows.Add();65. fourthTestEntry[dateColumnName] = DateTime.Parse("11.06.2014");66. fourthTestEntry[absoluteValueColumn] = 7;67. fourthTestEntry[perDayValueColumn] = 2;68. 69. DataRow fifthTestEntry = table.Rows.Add();70. fifthTestEntry[dateColumnName] = DateTime.Parse("16.06.2014");71. fifthTestEntry[absoluteValueColumn] = 8;72. fifthTestEntry[perDayValueColumn] = 1;73. 74. DataRow sixthTestEntry = table.Rows.Add();75. sixthTestEntry[dateColumnName] = DateTime.Parse("05.07.2014");76. sixthTestEntry[absoluteValueColumn] = 10;77. sixthTestEntry[perDayValueColumn] = 2;78. 79. DataSet ds = new DataSet();80. ds.Tables.Add(table);81. 82. return ds;83. }84.}