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

RadChart Gantt Chart Grouping

9 Answers 262 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Ehab
Top achievements
Rank 1
Ehab asked on 08 Jun 2009, 07:17 AM

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

 

9 Answers, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 10 Jun 2009, 10:29 AM
Hi Ehab,

It is possible to achieve your goal. While RadChart will not automatically align its items according to a string value, this can be done for a numeric value. So, if your column MemberID actually contains the member ID (i.e. 1 <-> Member1, 2<-> Member2), you can take advantage of this column and use it to set XValue to ChartSeriesItems. Two ChartSeriesItems with the same XValue will appear at the same position along the X axis.

Second problem would be the DataLabelsColumn usage for the X axis. As RadChart will create a new axis item for each entry in the datasource, this would trigger the behavior you have observed -- multiple appearance of the same name. One possible workaround would be to create the chart axis items manually.

I have attached a small example showing this.

Regards,
Ves
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.
0
Shumaila Imran
Top achievements
Rank 1
answered on 27 Jul 2010, 03:03 PM
I'm using the same approach to show Login Sessions on Gantt Chart. The way you are mapping MemberName with the MemberID on x-axis, I'm mapping Weekdays with ID on x-axis. But the problem is my ID column does not have values say from 1 to 20.
It has missing values like starting from 20 and going upto 50 with some values missing in-between (which is usually the case with auto- generated ID values).

How can I make it work in this scenario ?

Regards,
skhan




0
Giuseppe
Telerik team
answered on 30 Jul 2010, 12:27 PM
Hello Shumaila Imran,

You can use this modified version of the RadChart1_ItemDataBound handler for the generation of the axis items in your scenario:

protected void Page_Load(object sender, EventArgs e)
{
 
    DataTable tbl = new DataTable();
    DataColumn col = new DataColumn("MemberID");
    col.DataType = typeof(int);
    tbl.Columns.Add(col);
    col = new DataColumn("MemberName");
    col.DataType = typeof(string);
    tbl.Columns.Add(col);
    col = new DataColumn("StartDate");
    col.DataType = typeof(string);
    tbl.Columns.Add(col);
    col = new DataColumn("EndDate");
    col.DataType = typeof(string);
    tbl.Columns.Add(col);
 
    DateTime today = DateTime.Today;
 
    tbl.Rows.Add(new object[] { 1, "Name1", today.ToOADate(), today.AddDays(20).ToOADate() });
    tbl.Rows.Add(new object[] { 1, "Name1", today.AddDays(21).ToOADate(), today.AddDays(45).ToOADate() });
    tbl.Rows.Add(new object[] { 2, "Name2", today.ToOADate(), today.AddDays(11).ToOADate() });
    tbl.Rows.Add(new object[] { 2, "Name2", today.AddDays(12).ToOADate(), today.AddDays(22).ToOADate() });
    tbl.Rows.Add(new object[] { 2, "Name2", today.AddDays(23).ToOADate(), today.AddDays(41).ToOADate() });
    tbl.Rows.Add(new object[] { 5, "Name5", today.ToOADate(), today.AddDays(11).ToOADate() });
    tbl.Rows.Add(new object[] { 5, "Name5", today.AddDays(12).ToOADate(), today.AddDays(22).ToOADate() });
    tbl.Rows.Add(new object[] { 5, "Name5", today.AddDays(23).ToOADate(), today.AddDays(41).ToOADate() });
    tbl.Rows.Add(new object[] { 10, "Name10", today.ToOADate(), today.AddDays(14).ToOADate() });
    tbl.Rows.Add(new object[] { 10, "Name10", today.AddDays(26).ToOADate(), today.AddDays(35).ToOADate() });
 
    RadChart1.Legend.Visible = false;
    RadChart1.AutoLayout = true;
    RadChart1.DataSource = tbl;
    RadChart1.DataBind();
}
 
int value = 0;
string label = "";
protected void RadChart1_ItemDataBound(object sender, Telerik.Charting.ChartItemDataBoundEventArgs e)
{
    string memberName = (e.DataItem as DataRowView)["MemberName"].ToString();
    if (memberName != label)
    {
        label = memberName;
 
        // Add axis items for the data "gaps" between the actual data
        decimal memberID = decimal.Parse((e.DataItem as DataRowView)["MemberID"].ToString());
        int axisItemCount = (int)(memberID - value);
        for (int i = 0; i < axisItemCount - 1; i++)
        {
            ChartAxisItem axisItem = new ChartAxisItem("X");
            axisItem.Value = ++value;
            RadChart1.PlotArea.XAxis.Items.Add(axisItem);
        }
 
        // Add the axis item for the actual data
        ChartAxisItem axisItem2 = new ChartAxisItem(label);
        axisItem2.Value = ++value;
        RadChart1.PlotArea.XAxis.Items.Add(axisItem2);
    }
}

Hope this helps.


Best wishes,
Freddie
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
0
Shumaila Imran
Top achievements
Rank 1
answered on 30 Jul 2010, 05:04 PM
Thanks Freddie for your help.

This idea works great if the MemberIDs have smaller values. For instance if we have only 1 record to bind and the ID of the only returned record is 78, the graph will look weird. Or if 3 records are returned with ID values 3, 48 & 110.

This is what I observe when I change the values in the sample Gantt chart code which was posted earlier in the thread.

But when I apply this in my own application, the weekdays are not mapped to x-axis with IDs. Also I don't see the 'X' s' in between the missing values as I see it in the sample application with the modified  ItemDataBound handler.

I don't see the week days on x-axis in both versions of ItemDataBound handler.

The only change in my code is that I'm binding the chart with ObjectDataSource and the LoginSession object has the following properties (with sample data)

ID           LoginTime (in OA format)        LogoutTime (in OA format)         LoginDay (Week Day)
34           40385.7286403935                 40385.8123502701                     Monday
38           40387.8622800926                 40387.9872800926                     Wednesday
42           40388.8478423225                 40388.9154513889                     Thursday

 
If I set the AutoScale = false, I see no bars on my chart and the values from 0 to 7 are shown on x-axis.
And if I set the AutoScale = true, I see the bars on correct points from x-axis. The time on y-axis in both cases is shown as 12:00 PM,  12:00 AM, 12:00PM.... 12:00 AM. I don't see any reason why its showing the time on y-axis with these time points.

One more thing, I have this gantt chart in Nested ViewTemplate, in case if it matters !

I'm unable to figure out the problem in my code, do you have any idea what I'm doing wrong ?

Regards,
skhan







0
Giuseppe
Telerik team
answered on 05 Aug 2010, 12:29 PM
Hi Shumaila,

We have attached a modified version of the application that uses ObjectDataSource. As for the wide "gaps" (between IDs with large margin) -- unfortunately this is a side effect of the custom implementation discussed in this thread. You will probably need to introduce another "special" mapping ID field with smaller values if you want to avoid this problem.


All the best,
Freddie
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
0
Shumaila Imran
Top achievements
Rank 1
answered on 06 Aug 2010, 08:06 AM
Thanks Freddie for your help.

You are right about using special mapping ID field. I was already working on this idea as I thought the same initially. But I wanted to know if there is any other way to make it work without it. I'm now using RowNum returned by the Row_Number() function in my stored procedure as a mapping ID field on x-axis.

As I'm getting the sequential values with RowNum I don't need to use the modified version of ItemDataBound handler.

Everything works great now except that I still don't see the week days being mapped with the ID (RowNum) on x-axis. The time values on y-axis are accurate now. I can also see the bars on correct time values. I don't find any reason why I can't I map the days on x-axis in my case.

Do you have any idea what could be the possible reasons of not having the custom values being mapped with ID on x-axis in RadChart ?

int value = 0;
string label = "";
 
protected void RadChartSessions_ItemDataBound(object sender, Telerik.Charting.ChartItemDataBoundEventArgs e)
{
// find the sessions chart within the parent Grid, since there are many controls nested here, using   //custom FindControlRecursive method
    RadChart RadChartSessions = FindControlRecursive(this.RadGridUsers.MasterTableView, "RadChartSessions") as RadChart;
 
    string dayName = (e.DataItem as DataRowView)["LoginDay"].ToString();
    if (dayName != label)
    {
        label = dayName;
        ChartAxisItem axisItem = new ChartAxisItem(label);
        axisItem.Value = ++value;
        RadChartSessions.PlotArea.XAxis.Items.Add(axisItem);
    }
0
Giuseppe
Telerik team
answered on 11 Aug 2010, 12:41 PM
Hello Shumaila Imran,

Could you open a formal support ticket and send us a runnable sample application that demonstrates your issue (you can modify our sample application as well) as based on the provided information we cannot advise you properly how to proceed.


Best wishes,
Freddie
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
0
Viral
Top achievements
Rank 1
answered on 15 Aug 2014, 09:22 AM
i want to get following output using telrik gantt chart .......
its for window from application(visul studio 2013)
 its possible........
pls help me.........
0
Danail Vasilev
Telerik team
answered on 15 Aug 2014, 11:51 AM
Hi Viral,

If you mean RadGantt for WinForms then you can refer to Telerik UI for WinForms demos and documentation.

If, however, you mean RadGantt for ASP.NET AJAX then you can refer to Telerik UI for ASP.NET AJAX demos and documentation.

I can also suggest that you relate future questions in the forum of the corresponding platform and choose the proper product name.

Thank you for your cooperation.

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.

 
Tags
Chart (Obsolete)
Asked by
Ehab
Top achievements
Rank 1
Answers by
Ves
Telerik team
Shumaila Imran
Top achievements
Rank 1
Giuseppe
Telerik team
Viral
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or