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

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

7 Answers 334 Views
Chart (obsolete as of Q1 2013)
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
jr
Top achievements
Rank 1
jr asked on 11 Dec 2008, 02:24 PM
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.

7 Answers, 1 is accepted

Sort by
0
Dwight
Telerik team
answered on 12 Dec 2008, 01:07 PM
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.
0
jr
Top achievements
Rank 1
answered on 12 Dec 2008, 07:58 PM
Yes, this is exactly what I needed! Thanks again!

- Jr
0
jr
Top achievements
Rank 1
answered on 12 Dec 2008, 10:11 PM
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.

0
Dwight
Telerik team
answered on 15 Dec 2008, 10:39 AM
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.
0
Giuliano Caetano
Top achievements
Rank 1
answered on 02 Dec 2011, 02:10 PM
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



0
Ves
Telerik team
answered on 07 Dec 2011, 09:43 AM
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.

0
Giuliano Caetano
Top achievements
Rank 1
answered on 30 Jan 2012, 03:27 PM
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
Tags
Chart (obsolete as of Q1 2013)
Asked by
jr
Top achievements
Rank 1
Answers by
Dwight
Telerik team
jr
Top achievements
Rank 1
Giuliano Caetano
Top achievements
Rank 1
Ves
Telerik team
Share this question
or