How to create a Gantt Chart with Data Items on Y-Axis and time on X-Axis

8 posts, 0 answers
  1. jr
    jr avatar
    3 posts
    Member since:
    Dec 2008

    Posted 11 Dec 2008 Link to this post

    Hello,

    I'm totally new to creating charts with Telerik's controls. What I need to create is a gantt chart that will display employee names on the Y-Axis and a time range on the x-axis.

    So basically my data would come in the form of this:

    John Doe - Worked from: 11:00, to: 17:00
    Martha S. - Worked from: 5:00 to 11:00

    So, the names would appear at the vertical plane, while a time range would be at the horizontal plane.

    Help please!

    I know I should've searched, but since i'm really new to this, I wouldn't exactly know what to look for.

    Thanks in advance guys.
  2. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 12 Dec 2008 Link to this post

    Hi jr,

    Thanks for writing. Please, find a sample project attached to this post.

    The project is called CustomRanges as it also demonstrates the custom ranges functionality, for which a customer of ours requested help, i.e. I'm sending the same project, as you might find it useful as well.

    Note, that the code for setting custom range is currently commented, you just need to uncomment it and run the solution.

    Let me know if you need further assistance.

    Best regards,
    Evtim
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. jr
    jr avatar
    3 posts
    Member since:
    Dec 2008

    Posted 12 Dec 2008 Link to this post

    Yes, this is exactly what I needed! Thanks again!

    - Jr
  5. jr
    jr avatar
    3 posts
    Member since:
    Dec 2008

    Posted 12 Dec 2008 Link to this post

    Alright, based on the code you sent me here's what I got so far.

        private void BindData()
        {
            ChartJobs = new RadChart();

            this.ChartJobs.PlotArea.YAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortTime;
            this.ChartJobs.PlotArea.YAxis.Appearance.CustomFormat = "HH:MM";
            this.ChartJobs.PlotArea.YAxis.Appearance.LabelAppearance.RotationAngle = 90;
            this.ChartJobs.PlotArea.YAxis.Appearance.LabelAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Top;
            this.ChartJobs.Series.Clear();

            this.ChartJobs.PlotArea.YAxis.IsZeroBased = false;

            this.ChartJobs.PlotArea.YAxis.AutoScale = false;

            DateTime from = new DateTime(dteStartDate.SelectedDate.Value.Year, dteStartDate.SelectedDate.Value.Month,
                dteStartDate.SelectedDate.Value.Day, Convert.ToDateTime(txtTimeFrom.Text).Hour, Convert.ToDateTime(txtTimeFrom.Text).Minute, 0);
            DateTime to = new DateTime();

            if (DateTime.Compare(Convert.ToDateTime(txtTimeFrom.Text), Convert.ToDateTime(txtTimeTo.Text)) > 0)
            {
                to = new DateTime(dteStartDate.SelectedDate.Value.Year, dteStartDate.SelectedDate.Value.Month,
                    dteStartDate.SelectedDate.Value.Day + 1, Convert.ToDateTime(txtTimeTo.Text).Hour, Convert.ToDateTime(txtTimeTo.Text).Minute, 0);
            }
            else
            {
                to = new DateTime(dteStartDate.SelectedDate.Value.Year, dteStartDate.SelectedDate.Value.Month,
                    dteStartDate.SelectedDate.Value.Day, Convert.ToDateTime(txtTimeTo.Text).Hour, Convert.ToDateTime(txtTimeTo.Text).Minute, 0);        
            }

            this.ChartJobs.PlotArea.YAxis.AddRange(from.ToOADate(), to.ToOADate(), 1);

            this.ChartJobs.DataSource = CreateSource(dteStartDate.SelectedDate.Value.ToShortDateString(), txtTimeFrom.Text, txtTimeTo.Text);
            ChartSeries series = new ChartSeries();

            series.Type = ChartSeriesType.Gantt;
            series.Appearance.LabelAppearance.Visible = false;
            series.DataYColumn = "From";
            series.DataYColumn2 = "To";
            this.ChartJobs.Series.Add(series);

            this.ChartJobs.SeriesOrientation = ChartSeriesOrientation.Horizontal;

            this.ChartJobs.PlotArea.XAxis.DataLabelsColumn = "Name";
            this.ChartJobs.DataBind();
        }

        private static DataTable CreateSource(object SelectedDate, object From, object To)
        {
            DataTable source = CourierJob.GetJobListForGantt(SelectedDate, From, To);

            DataTable result = new DataTable();
            result.Columns.Add("Name", typeof(string));
            result.Columns.Add("From", typeof(string));
            result.Columns.Add("To", typeof(string));

            if (source.Rows.Count > 0)
            {
                foreach (DataRow row in source.Rows)
                {
                    DataRow rowResult = result.NewRow();
                    rowResult["Name"] = row["Driver"];
                    rowResult["From"] = (Convert.ToDateTime(row["JobStart"]).ToShortTimeString());
                    rowResult["To"] = (Convert.ToDateTime(row["JobEnd"]).ToShortTimeString());

                    result.Rows.Add(rowResult);
                }
            }

            return result;
        }

    My problem now is that i'm getting an error that says "The type of column with name  From is not numeric". I'm confused because I set the ShortTime and not numeric.

    Im pretty sure from my code that you can see what I need. The X-Axis as a time range and the Y-Axis  as a bunch of names.

    Sample Data from CourierJob.GetJobListForGantt(SelectedDate, From, To) (I can still reformat the time values):
    Driver: "John Doe @ JOB 32"
    JobStart: "2008-12-12 20:40:00.000"
    JobEnd: "2008-12-12 23:40:00.000"

    Thanks again guys. Any help will be appreciated.

  6. Dwight
    Admin
    Dwight avatar
    475 posts

    Posted 15 Dec 2008 Link to this post

    Hi jr,

    I found the following error in your code:
    In the CreateSource method, you do not set short DateTime, but rather create a string column and set the date-time, converting it to string format:
    result.Columns.Add("From", typeof(string));
    result.Columns.Add("To", typeof(string));

    rowResult["From"] = (Convert.ToDateTime(row["JobStart"]).ToShortTimeString());


    You should create columns of type double and set date-time in the following way:
    rowResult["From"] = Convert.ToDateTime(row["JobStart"]).ToOADate();
    same should be done to the "To" column.

    Kind regards,
    Evtim
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Giuliano Caetano
    Giuliano Caetano avatar
    17 posts
    Member since:
    Nov 2009

    Posted 02 Dec 2011 Link to this post

    Hi Dawight,

    This is a so old Post, but I try get a answer anyway :)
    At this time my question is simple, can I have multiply bars by DataYColumn?

    Any thing like this:
    John Doe - Worked from: 11:00, to: 12:00, from: 14:00, to: 15:00 and from: 16:00, to: 18:00
    Martha S. - Worked from: 5:00 to 09:00, from: from: 11:00, to: 12:00 and from: 14:00, to: 18:00

    This way, both have 3 bars in a single line.

    Thanks. Any help will be appreciated.
    Giuliano Caetano



  8. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 07 Dec 2011 Link to this post

    Hello Giuliano,

    You need to assign the XValue property for each ChartSeriesItem in order to force it to stay at a certain position. In this case you can add multiple ChartSeriesItems with XValue=1 for John and another set for Martha. Here is an example:

    RadChart1.AutoLayout = true;
    RadChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;
     
    ChartSeries ser = new ChartSeries("John");
    ser.Type = ChartSeriesType.Gantt;
    ser.Appearance.LabelAppearance.Visible = false;
     
    ChartSeriesItem item = new ChartSeriesItem() { XValue = 1, YValue = new DateTime(2011, 12, 07, 11, 0, 0).ToOADate(), YValue2 = new DateTime(2011, 12, 07, 12, 0, 0).ToOADate() };
    ser.Items.Add(item);
    item = new ChartSeriesItem() { XValue = 1, YValue = new DateTime(2011, 12, 07, 14, 0, 0).ToOADate(), YValue2 = new DateTime(2011, 12, 07, 13, 0, 0).ToOADate() };
    ser.Items.Add(item);
    item = new ChartSeriesItem() { XValue = 1, YValue = new DateTime(2011, 12, 07, 16, 0, 0).ToOADate(), YValue2 = new DateTime(2011, 12, 07, 18, 0, 0).ToOADate() };
    ser.Items.Add(item);
    RadChart1.Series.Add(ser);
     
    ser = new ChartSeries("Martha");
    ser.Type = ChartSeriesType.Gantt;
    ser.Appearance.LabelAppearance.Visible = false;
     
    item = new ChartSeriesItem() { XValue = 2, YValue = new DateTime(2011, 12, 07, 5, 0, 0).ToOADate(), YValue2 = new DateTime(2011, 12, 07, 9, 0, 0).ToOADate() };
    ser.Items.Add(item);
    item = new ChartSeriesItem() { XValue = 2, YValue = new DateTime(2011, 12, 07, 11, 0, 0).ToOADate(), YValue2 = new DateTime(2011, 12, 07, 12, 0, 0).ToOADate() };
    ser.Items.Add(item);
    item = new ChartSeriesItem() { XValue = 2, YValue = new DateTime(2011, 12, 07, 14, 0, 0).ToOADate(), YValue2 = new DateTime(2011, 12, 07, 18, 0, 0).ToOADate() };
    ser.Items.Add(item);
    RadChart1.Series.Add(ser);
     
    RadChart1.PlotArea.XAxis.AutoScale = false;
    RadChart1.PlotArea.XAxis.AddRange(1, 2, 1);
    RadChart1.PlotArea.XAxis.Items[0].TextBlock.Text = "John";
    RadChart1.PlotArea.XAxis.Items[1].TextBlock.Text = "Martha";
     
    RadChart1.PlotArea.YAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortTime;
    RadChart1.PlotArea.YAxis.AutoScale = false;
    RadChart1.PlotArea.YAxis.AddRange(new DateTime(2011, 12, 07).ToOADate(), new DateTime(2011, 12, 08).ToOADate(), 0.25);


    Kind regards,
    Ves
    the Telerik team

    Q3’11 of RadControls for WinForms is available for download (see what's new). Get it today.

  9. Giuliano Caetano
    Giuliano Caetano avatar
    17 posts
    Member since:
    Nov 2009

    Posted 30 Jan 2012 Link to this post

    Hello Ves,

    I was worked in another thread and just at this moment I test this code. this works nice...
    Thanks for your support..

    Giuliano
Back to Top
UI for WinForms is Visual Studio 2017 Ready