Gantt Chart Overlay

[Dave Myers]

Is it possible to have one gantt chart on top of another?  The reason I ask, is that I would like to have a gantt chart showing a schedule, with another chart overlayed on top that will show the progress.  Basically, trying to re-create a gantt chart from MS Project.

[Ves]

Hello Dave Myers,

You can find attached a sample page showing this functionality. Hope this helps.

All the best,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Dave Myers]

Thanks for the sample.  This is exactly what I wanted to do, but cannot seem to get it to work in my application.  I am creating the series programatically.  Is there some setting either in the series item, series, plot area or chart that would cause the chart bars to stack on top of each other instead of overlay each other (like in your example)?  Below is the code for formatting the series items:

seriesItem = New ChartSeriesItem
                seriesItem.YValue = startMonth
                seriesItem.YValue2 = endMonth
                seriesItem.Name = project.Code

                If project.HasChildren Then
                    seriesItem.Appearance.FillStyle.MainColor = Color.Black
                    seriesItem.Appearance.FillStyle.FillType = Styles.FillType.Solid
                    seriesItem.Appearance.Border.Color = Color.Black
                    seriesItem.Appearance.Border.Width = 1
                Else
                    seriesItem.Appearance.FillStyle.MainColor = Color.FromArgb(156, 154, 255)
                    seriesItem.Appearance.FillStyle.FillType = Styles.FillType.Solid
                    seriesItem.Appearance.Border.Color = Color.Black
                    seriesItem.Appearance.Border.Width = 1
                    If isActive Then
                        seriesItem.Appearance.Border.Color = Color.Red
                    Else
                        seriesItem.Appearance.Border.Color = Color.Black
                    End If
                End If
                seriesItems.Insert(0, seriesItem)

and here is the code for formatting the chart:

'border, background
            GanttChart.PlotArea.Appearance.FillStyle.FillType = Styles.FillType.Solid
            GanttChart.PlotArea.Appearance.FillStyle.MainColor = Color.WhiteSmoke
            GanttChart.PlotArea.Appearance.FillStyle.SecondColor = Color.WhiteSmoke


            'x-axis (projects)
            GanttChart.PlotArea.XAxis.AutoScale = False
            GanttChart.PlotArea.XAxis.AddRange(0, projects.Count - 1, 1)
            For Each project In projects
                GanttChart.PlotArea.XAxis(projects.Count - 1 - projects.IndexOf(project)).TextBlock.Text = project.Code
            Next
            GanttChart.PlotArea.XAxis.Appearance.LabelAppearance.Position.AlignedPosition = Styles.AlignedPositions.Left

            'y-axis (dates)
            GanttChart.PlotArea.YAxis.AutoScale = False
            GanttChart.PlotArea.YAxis2.AutoScale = False

            GanttChart.PlotArea.YAxis.AddRange(0, monthCount, 3)
            GanttChart.PlotArea.YAxis2.AddRange(0, monthCount, 3)

            For i = 0 To GanttChart.PlotArea.YAxis.Items.Count - 1
                GanttChart.PlotArea.YAxis(i).TextBlock.Text = startDate.AddMonths(i * 3).Month & "/" & startDate.AddMonths(i * 3).ToString("yy")
            Next
            GanttChart.PlotArea.YAxis.Appearance.LabelAppearance.RotationAngle = 90
            GanttChart.PlotArea.YAxis.Appearance.LabelAppearance.Position.AlignedPosition = Styles.AlignedPositions.TopLeft
            GanttChart.PlotArea.YAxis.Appearance.MajorGridLines.Width = 2
            GanttChart.PlotArea.YAxis.Appearance.MajorGridLines.Visible = True
            GanttChart.PlotArea.YAxis.Appearance.MajorGridLines.Color = Color.DarkGray
            GanttChart.PlotArea.YAxis.Appearance.MajorGridLines.PenStyle = Drawing2D.DashStyle.Solid
            GanttChart.PlotArea.YAxis.Appearance.MinorGridLines.Width = 1
            GanttChart.PlotArea.YAxis.Appearance.MinorGridLines.Visible = True
            GanttChart.PlotArea.YAxis.Appearance.MinorGridLines.Color = Color.Gainsboro
            GanttChart.PlotArea.YAxis.Appearance.MinorGridLines.PenStyle = Drawing2D.DashStyle.DashDot

            'margins, height, width
            GanttChart.PlotArea.Appearance.Dimensions.Margins.Top = 10
            GanttChart.PlotArea.Appearance.Dimensions.Margins.Right = 10
            GanttChart.PlotArea.Appearance.Dimensions.Margins.Left = 100
            GanttChart.PlotArea.Appearance.Dimensions.Margins.Bottom = 50
            GanttChart.Height = 55 + (20 * projects.Count)
            If GanttChart.PlotArea.YAxis.Items.Count > 11 Then
                GanttChart.Width = 110 + (30 * GanttChart.PlotArea.YAxis.Items.Count)
            Else
                GanttChart.Width = 440
            End If

            GanttChart.SeriesOrientation = ChartSeriesOrientation.Horizontal
            GanttChart.Legend.Visible = False
            GanttChart.ChartTitle.Visible = False

one thing I noticed in the sample you provided was that you were setting the yvalue and yvalue2 differently than I am.  I set the yvalue as the lowest number and the yvalue2 as the highest number (you do the opposite).  I tried changing this in my code and it made no difference.

[Dave Myers]

found it.....
GanttChart.Appearance.BarOverlapPercent = 100

[Chuck Jabbour]

Ves, I like the sample you provided. It was very helpful. Is there anyway to modify this (or maybe just go in a different direction) in order to make the items represent actual "scheduled events" I picture the X-axis being dates and the Y-axis being times of the day (8am, 10am etc) I only see ways to set values of type "Double" in the X-Value and Y-Value properties of the ChartSeriesItem. What kind I do to make this more date/time specific?

[Ves]

Hi Chuck Jabbour,

Indeed, RadChart axes only accept double values. You can use ToOADate() method to convert DateTime values to double and use them in RadChart as shown here.

Alternatively, you can check RadScheduler:

• Online help.
• Online examples.

Hope this helps.

Kind regards,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.