This is a migrated thread and some comments may be shown as answers.
How to enable XAxis gridlines for Gantt with horizontal series orientation
3 Answers 32 Views
This is a migrated thread and some comments may be shown as answers.
Jerry
Top achievements
Rank 1
Jerry asked on 24 Feb 2011, 03:49 PM
I have a horizontal Gantt chart with a single series date data loaded for the two YAxis'. I'd like to be able to turn on the XAxis MajorGridLines so that a line appears from left side of the chart to right in order to make the XAxis item labels line up with the bars.

Is this possible?

My chart is below:
<telerik:RadChart ID="radchartPCSUserItems" Width="910" EnableViewState="False" runat="server" Skin="Web20" 
        SeriesOrientation="Horizontal" Legend-Visible="false" AutoLayout="false">
    <Series>
        <telerik:ChartSeries Type="Gantt" Name="Series 1">
        </telerik:ChartSeries>                
    </Series>
    <PlotArea Appearance-Dimensions-Width="700">
        <YAxis IsZeroBased="False" AutoScale="False">
            <Appearance MinorGridLines-Visible="false">                        
                <LabelAppearance RotationAngle="60" Position-AlignedPosition="top"></LabelAppearance>
            </Appearance>
        </YAxis>
        <YAxis2 IsZeroBased="False" AutoScale="False" >
              
        </YAxis2>
              
        <XAxis AutoScale="False" Step="10">
            <AxisLabel TextBlock-Text="Item"></AxisLabel>
            <Appearance MajorGridLines-Visible="true">
                <LabelAppearance Position-AlignedPosition="left"></LabelAppearance>
            </Appearance>
        </XAxis>
        <Appearance Dimensions-Margins="2px, 3px, 5px, 25%" Dimensions-Paddings="0%, 0%, 5px, 0%" ></Appearance>
    </PlotArea>
    <Legend Visible="False"></Legend>
    <Appearance Border-Visible="False"></Appearance>
    <ChartTitle Visible="False"></ChartTitle>
</telerik:RadChart>

My chart

private void BindGanttChart(PCSUserItemCollection pcsUserItemCol)
 
    DateTime dtMaxDate = pcsUserItemCol[0].DueDate;
    DateTime dtMinDate = pcsUserItemCol[0].StartDate;
  
    foreach(PCSUserItem useritem in pcsUserItemCol)
      
        if (useritem.DueDate > dtMaxDate) // get the max date
        {    
            dtMaxDate = useritem.DueDate;
        }
  
        if (dtMinDate > useritem.StartDate) // get the min date
        {
            dtMinDate = useritem.StartDate;
        }
  
        // Create the Chart Data Points
        Telerik.Charting.ChartSeriesItem chartItem = new Telerik.Charting.ChartSeriesItem();
  
        chartItem.YValue = useritem.StartDate.ToOADate();
        chartItem.YValue2 = useritem.DueDate.ToOADate();
  
        chartItem.Label.TextBlock.Text = useritem.DueDate.ToShortDateString();
        chartItem.Label.TextBlock.Appearance.TextProperties.Font = new System.Drawing.Font("Arial", 7, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point);        
  
        chartItem.Name = useritem.ID.ToString();
  
        radchartPCSUserItems.Series[0].Items.Add(chartItem);
  
        // Set the X-Axis label's text
        Telerik.Charting.ChartAxisItem chartAxisItem = new Telerik.Charting.ChartAxisItem();
        chartAxisItem.TextBlock.Text = useritem.Title;
          
        radchartPCSUserItems.PlotArea.XAxis.Items.Add(chartAxisItem);
    }
  
    // Define the Chart MinVal, MaxVal & Step (Scale)
    if (dtMaxDate != DateTime.MinValue)
    {
        radchartPCSUserItems.PlotArea.YAxis.Step = 30;
        radchartPCSUserItems.PlotArea.YAxis.MinValue = dtMinDate.AddMonths(-1).ToOADate();
        radchartPCSUserItems.PlotArea.YAxis.MaxValue = dtMaxDate.AddDays(30).ToOADate();
  
        radchartPCSUserItems.PlotArea.YAxis2.Step = 30;
        radchartPCSUserItems.PlotArea.YAxis2.MinValue = dtMinDate.AddMonths(-1).ToOADate();
        radchartPCSUserItems.PlotArea.YAxis2.MaxValue = dtMaxDate.AddDays(30).ToOADate();
    }
  
    radchartPCSUserItems.PlotArea.YAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortDate;
    radchartPCSUserItems.DataBind();       
}

3 Answers, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 01 Mar 2011, 03:33 PM
Hi Jerry,

I am not sure I followed you question completely. Do you need to modify the positioning of X axis labels? You can check the Layout section in this help topic. It shows vertical chart, but the feature would work in the same way for the horizontal ones. If that does not seem to help, please send us an image of the chart you get and an example (might be a simple scratch) that shows the expected result.

Best regards,
Ves
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Jerry
Top achievements
Rank 1
answered on 01 Mar 2011, 06:16 PM
The positioning is fine. We just want veritical and horizontal gridlines so that chart is easier to read.

My rendered chart looks like ChartImage.png.

We would like the chart to look similar to ChartImageWithXLines.png.
0
Ves
Telerik team
answered on 04 Mar 2011, 11:01 AM
Hi Jerry,

Thank you for the additional detail. Your code shows that you have already set the MajorGridLines to be visible. However, the appearance of the gridlines is influenced by the skin used, so you will need to add a bit to their configuration. You need to set the width and according to the image -- the PenStyle:

<XAxis>
     <Appearance MajorGridLines-Visible="true" MajorGridLines-Width="2" MajorGridLines-PenStyle="Solid">


Best regards,
Ves
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Asked by
Jerry
Top achievements
Rank 1
Answers by
Ves
Telerik team
Jerry
Top achievements
Rank 1
Share this question
or