How to enable XAxis gridlines for Gantt with horizontal series orientation

Thread is closed for posting
4 posts, 0 answers
  1. Jerry
    Jerry avatar
    2 posts
    Member since:
    Jun 2010

    Posted 24 Feb 2011 Link to this post

    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();       
    }
  2. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 01 Mar 2011 Link to this post

    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!
  3. Jerry
    Jerry avatar
    2 posts
    Member since:
    Jun 2010

    Posted 01 Mar 2011 Link to this post

    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.
  4. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 04 Mar 2011 Link to this post

    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!
Back to Top