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

Gantt Chart Overlay

5 Answers 97 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Dave Myers
Top achievements
Rank 1
Dave Myers asked on 15 Oct 2008, 01:33 PM
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.

5 Answers, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 16 Oct 2008, 07:00 AM
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.
0
Dave Myers
Top achievements
Rank 1
answered on 21 Oct 2008, 09:29 PM
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.
0
Dave Myers
Top achievements
Rank 1
answered on 21 Oct 2008, 09:58 PM
found it.....
GanttChart.Appearance.BarOverlapPercent = 100
0
Chuck Jabbour
Top achievements
Rank 1
answered on 24 Oct 2008, 07:03 PM
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?
0
Ves
Telerik team
answered on 27 Oct 2008, 07:28 AM
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:
Hope this helps.

Kind regards,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Chart (Obsolete)
Asked by
Dave Myers
Top achievements
Rank 1
Answers by
Ves
Telerik team
Dave Myers
Top achievements
Rank 1
Chuck Jabbour
Top achievements
Rank 1
Share this question
or