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

[jr]

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.

[Dwight]

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.

[jr]

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

- Jr

[jr]

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.

[Dwight]

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.

[Giuliano Caetano]

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

[Ves]

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

[Giuliano Caetano]

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