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

RadHtmlChart PlotArea.XAxis.Step

3 Answers 409 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Anthony
Top achievements
Rank 1
Anthony asked on 02 May 2014, 03:02 PM
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

3 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 07 May 2014, 08:38 AM
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.

 
0
Anthony
Top achievements
Rank 1
answered on 08 May 2014, 05:14 PM
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
0
Danail Vasilev
Telerik team
answered on 12 May 2014, 12:52 PM
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.

 
Tags
Chart (HTML5)
Asked by
Anthony
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Anthony
Top achievements
Rank 1
Share this question
or