RadChart Gantt Chart Grouping

[Ehab]

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

 

[Ves]

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.

[Shumaila Imran]

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

[Giuseppe]

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

[Shumaila Imran]

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

[Giuseppe]

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

[Shumaila Imran]

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

    }

[Giuseppe]

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

[Viral]

i want to get following output using telrik gantt chart .......
its for window from application(visul studio 2013)
 its possible........
pls help me.........

[Danail Vasilev]

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