RadHtmlChart PlotArea.XAxis.Step

4 posts, 0 answers
  1. Anthony
    Anthony avatar
    3 posts
    Member since:
    Aug 2008

    Posted 02 May 2014 Link to this post

    I'm using RadHtmlChart control and trying to configure the XAxis Major Grid Line to show every 7th value.

    I tried setting PlotArea.XAxis.Step = 7 but it doesn't appear to have any impact.

    Does RadHtmlChart have built-in functionality to display major grid lines every Xth value?

    Thanks,
    Anthony
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1491 posts

    Posted 07 May 2014 Link to this post

    Hello Anthony,

    I have tried to reproduce the mentioned issue but to no avail. You can watch the short video test in the attached archive and then tell me what I am missing.

    Could you please try to reproduce the issue with the attached archive and then tell us what changes you have made, so that I can proceed further with the investigation?

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Anthony
    Anthony avatar
    3 posts
    Member since:
    Aug 2008

    Posted 08 May 2014 Link to this post

    Basically I was trying use Date x-axis and have it display every 7th day. The final chart would have major gridline displaying every 7th day and minor gridline every day.  It turns out I wasn't able to achieve this using LineSeries.

    With some digging, I stumbled to your demo of using Date x-axis <http://www.telerik.com/help/aspnet-ajax/htmlchart-date-axis.html>. This demo is actually using ScatterLineSeries instead of LineSeries but it does what I need (x-axis = date, y-axis = value). However, now using ScatterLineSeries, I'm faced with new issues.

    First issue is that I need to specify the first date in x-axis. It seems even if I defined the MinDateValue in x-axis, RadHtmlChart control is ignoring it and rendering with dates outside of my DataSource.

    Second issue is that RadHtmlChart is still not rendering Minor Gridlines properly.  I've set the x-axis Step = 7 so now my Major Gridlines and x-axis Labels are displayed every 7th day. However, if I count the number of Minor Gridlines in betwen the Major Gridline, I only see 4.  (See the screenshot attached)

    It appears I can't attach zip file of my project so I've upload to my OneDrive. You can find it here <https://onedrive.live.com/redir?resid=8B7A46E77E8D240D!457&authkey=!AHGR1EHNaMtqu78&ithint=file%2c.zip>

    Any help will be much appreciated.

    Thanks,
    Anthony
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1491 posts

    Posted 12 May 2014 Link to this post

    Hi Anthony,

    It seems that you want to set step for the minor and major x-axis gridlines. If that is so, you can do that through the chartObject, as illustrated in this feedback item (you can also raise the priority of the item by voting on it). For example:
    ASPX:
        <script>
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart._chartObject.options.categoryAxis.majorGridLines.step = 6;
                chart._chartObject.options.categoryAxis.minorGridLines.step = 2;
                chart.repaint();
            }
        </script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Height="210px">
            <PlotArea>
                <Series>
                    <telerik:LineSeries DataFieldY="MyCompany" MissingValues="Gap">
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <TooltipsAppearance>
                            <ClientTemplate>
                DATE: #= kendo.format(\'{0:d}\', value.x)#<br/>Value: #= kendo.format(\'{0:n0}\', value.y)#
                            </ClientTemplate>
                        </TooltipsAppearance>
                    </telerik:LineSeries>
                </Series>
                <XAxis BaseUnit="Days" MinDateValue="2/24/2014" MaxDateValue="3/9/2014"  DataLabelsField="DataDate">
                    <MajorGridLines Color="#efefef" Width="2" />
                    <MinorGridLines Color="#f7f7f7" Width="1" />
                </XAxis>
                <YAxis>
                    <MajorGridLines Color="#efefef" Width="1" />
                    <MinorGridLines Visible="false" />
                </YAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
    </form>

    Regarding the MinDateValue and MaxDateValue properties they are only available for category series (see Configuring Axes help article).

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top