Stepping

8 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 14 Apr 2015 Link to this post

    Hi,

    I am trying various methods for adjusting the minor grid line step value and each one fails.  What is the current JS that I could use to change the minorgridline step value?

    Sample code that I have been trying is shown below.

    Regards

    Jon

     

    var kendoWidget = $find("<%=uxRadHtmlChart.ClientID%>").get_kendoWidget();
    kendoWidget._plotArea.valueAxis.options.minorGridLines.step = 10;
    kendoWidget._plotArea.valueAxis.options.minorUnit = 10;
    kendoWidget.redraw();

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 16 Apr 2015 Link to this post

    Hello Jon,

    You can use options instead of _plotArea. For example

    chart.get_kendoWidget().options.yAxis.majorGridLines.step

    More information is available in this feedback item - http://feedback.telerik.com/Project/108/Feedback/Details/127441

    Regards,
    Danail Vasilev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 16 Apr 2015 in reply to Danail Vasilev Link to this post

    Hi Danail,

    I've tried the one you suggest as well as using the _chartObject bypassing the get kendo object stage (as seen in that link).  Neither method works for me.

    Full js being used is shown below. Hope you have a suggestion !

     

    function pageLoad() {
                        if ($find("uxRadHtmlChart") !== null) {
                            //try {
                            var kendoWidget = $find("<%=uxRadHtmlChart.ClientID%>").get_kendoWidget();
                            kendoWidget.options.series[0].color = function (e) {
                                if (e.value < e.dataItem.RedValue) {
                                    return "red";
                                } else {
                                    if (e.value >= e.dataItem.GreenValue) {
                                        return "green";
                                    } else {
                                        return "orange";
                                    }
                                }
                            }
     
                            kendoWidget.redraw();
                            //} catch (err) {
                            //    // do nothing
                            //}
                            var chart = $find("<%=uxRadHtmlChart.ClientID%>");
                            chart._chartObject.options.yAxis.majorGridLines.step = 5;
                            chart.repaint();
     
     
                        }
                        WindowResize();
                    };

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 17 Apr 2015 Link to this post

    Hi Jon,

    Could you please paste below the chart markup+JavaScript, so that I can run it and investigate it? You can place some dummy data to the chart to make it runnable. Can you also tell us which version of Telerik UI controls you are using?

    Regards,
    Danail Vasilev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 20 Apr 2015 in reply to Danail Vasilev Link to this post

    Hi Danail

    I've created a stand alone project for this and the issue still appears.  Code is pasted below.

    The version of the Web.UI being used is 2015.1.401.45

    Fingers crossed you can duplicate the issue.

    Regards

    Jon

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
        <head runat="server">
            <title>Main Dashboard Page</title>
            <script type="text/javascript">
                function pageLoad() {
                    var chart = $find("uxRadHtmlChart");
                    //chart._chartObject.options.yAxis.majorGridLines.step = 5;
                    chart.get_kendoWidget().options.yAxis.minorGridLines.step = 5;
                    chart.get_kendoWidget().options.yAxis.majorGridLines.step = 10;
                    chart.repaint();
                };
            </script>
        </head>
        <body>
            <form id="form1" runat="server">
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
                <telerik:RadStyleSheetManager ID="uxRadStyleSheetManager" Runat="server"></telerik:RadStyleSheetManager>
                <telerik:RadHtmlChart ID="uxRadHtmlChart" runat="server" Height="30%">
                    <PlotArea>
                        <Series>
                            <telerik:ColumnSeries>
                                <Items>
                                    <telerik:SeriesItem Name="a" YValue="90" />
                                    <telerik:SeriesItem Name="b" YValue="91" />
                                    <telerik:SeriesItem Name="c" YValue="93" />
                                    <telerik:SeriesItem Name="d" YValue="98" />
                                    <telerik:SeriesItem Name="e" YValue="80" />
                                </Items>
                            </telerik:ColumnSeries>
                        </Series>
                        <XAxis Name="category"></XAxis>
                        <YAxis Name="value" MinValue="0" MaxValue="100"></YAxis>
                    </PlotArea>
                </telerik:RadHtmlChart>
            </form>
        </body>
    </html>

     

     

  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 21 Apr 2015 Link to this post

    Hello Jon,

    Thank you for providing us a runnable sample that reproduces the issue.

    You can use valueAxis for category series like Column series and yAxis for numeric series like bubble and scatter, in order to access the y-axis. For example:

    <script type="text/javascript">
        function pageLoad() {
            var chart = $find("uxRadHtmlChart");
            chart.get_kendoWidget().options.valueAxis.minorGridLines.step = 2;
            chart.get_kendoWidget().options.valueAxis.majorGridLines.step = 2;
            chart.repaint();
        };
    </script>

    Regards,
    Danail Vasilev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  8. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 21 Apr 2015 in reply to Danail Vasilev Link to this post

    Hi Danail

    Sorry that doesn't work either.  That said it does affect the chart though.  As soon as I use that all horizontal grid lines are removed on the chart...

     Regards

    Jon

  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 22 Apr 2015 Link to this post

    Hi Jon,

    If you want to change the step of the y-axis you can use the YAxis.Step property. If you want to change the step through which major/grid lines render you should use the code I have provided in my previous post, which works properly on my side. Note that if you set a higher value for the grid lines step it is normal for them to no appear because there may not be such slots.

    You can make a test with the code below, where is illustrated how to set the step of the yaxis and major/minor grid lines. For your convenience I have also created a snapshot with short description to get a better understanding - http://screencast.com/t/qOavfgziio

    ASPX:
    <head id="Head1" runat="server">
        <title>Main Dashboard Page</title>
        <script type="text/javascript">
            function pageLoad() {
                var chart = $find("uxRadHtmlChart");
                chart.get_kendoWidget().options.valueAxis.minorGridLines.step = 2;
                chart.get_kendoWidget().options.valueAxis.majorGridLines.step = 2;
                chart.repaint();
            };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <telerik:RadStyleSheetManager ID="uxRadStyleSheetManager" runat="server"></telerik:RadStyleSheetManager>
            <telerik:RadHtmlChart ID="uxRadHtmlChart" runat="server" Height="30%">
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries>
                            <Items>
                                <telerik:SeriesItem Name="a" YValue="90" />
                                <telerik:SeriesItem Name="b" YValue="91" />
                                <telerik:SeriesItem Name="c" YValue="93" />
                                <telerik:SeriesItem Name="d" YValue="98" />
                                <telerik:SeriesItem Name="e" YValue="80" />
                            </Items>
                        </telerik:ColumnSeries>
                    </Series>
                    <XAxis Name="category"></XAxis>
                    <YAxis Name="value" MinValue="0" MaxValue="100" Step="25"></YAxis>
                </PlotArea>
            </telerik:RadHtmlChart>
        </form>
    </body>
    </html>


    http://screencast.com/t/qOavfgziio


    Regards,
    Danail Vasilev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017