RadChart Gantt Chart Grouping

Thread is closed for posting
10 posts, 0 answers
  1. Ehab
    Ehab avatar
    4 posts
    Member since:
    Jun 2009

    Posted 08 Jun 2009 Link to this post

    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

     

  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 10 Jun 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 27 Jul 2010 Link to this post

    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




  5. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 30 Jul 2010 Link to this post

    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
  6. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 30 Jul 2010 Link to this post

    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







  7. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 05 Aug 2010 Link to this post

    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
  8. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 06 Aug 2010 Link to this post

    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);
        }
  9. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 11 Aug 2010 Link to this post

    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
  10. Viral
    Viral avatar
    1 posts
    Member since:
    May 2014

    Posted 15 Aug 2014 Link to this post

    i want to get following output using telrik gantt chart .......
    its for window from application(visul studio 2013)
     its possible........
    pls help me.........
  11. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 15 Aug 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017