Home / Community & Support / Developer Productivity Tools Forums / WinForms > Chart > How to create a Gantt Chart with Data Items on Y-Axis and time on X-Axis

• jr

  Posted on Dec 11, 2008 (permalink)

  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.

  Reply

• Dwight Dwight

  Posted on Dec 12, 2008 (permalink)

  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.

  Attached files

  • CustomRanges.zip

  Reply

• jr

  Posted on Dec 12, 2008 (permalink)

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

  Reply

• jr

  Posted on Dec 12, 2008 (permalink)

  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.
  
  

  Reply

• Dwight Dwight

  Posted on Dec 15, 2008 (permalink)

  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.

  Reply

• Giuliano Caetano

  Posted on Dec 2, 2011 (permalink)

  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
  
  
  
  

  Reply

• Ves Ves

  Posted on Dec 7, 2011 (permalink)

  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.

  Reply

• Giuliano Caetano

  Posted on Jan 30, 2012 (permalink)

  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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WinForms > Chart > How to create a Gantt Chart with Data Items on Y-Axis and time on X-Axis