Telerik Forums / UI for ASP.NET AJAX Forum / HtmlChart /

Stepping

Telerik UI for ASP.NET AJAX
Resources Buy Try

8 posts, 0 answers

Jon

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();
Danail Vasilev
Admin

1502 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.
Jon

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();

                };
Danail Vasilev
Admin

1502 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.
Jon

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">

<html xmlns="http://www.w3.org/1999/xhtml" >

    <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>
Danail Vasilev
Admin

1502 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.
Jon

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
Danail Vasilev
Admin

1502 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:

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

Stepping

Jon

Danail Vasilev

Jon

Danail Vasilev

Jon

Danail Vasilev

Jon

Danail Vasilev