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

Stepping

7 Answers 110 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 14 Apr 2015, 09:51 AM

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

7 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 16 Apr 2015, 01:03 PM
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.

 
0
Jon
Top achievements
Rank 1
answered on 16 Apr 2015, 01:20 PM

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

0
Danail Vasilev
Telerik team
answered on 17 Apr 2015, 02:28 PM
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.

 
0
Jon
Top achievements
Rank 1
answered on 20 Apr 2015, 08:05 AM

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>

 

 

0
Danail Vasilev
Telerik team
answered on 21 Apr 2015, 08:19 AM
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.

 
0
Jon
Top achievements
Rank 1
answered on 21 Apr 2015, 08:24 AM

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

0
Danail Vasilev
Telerik team
answered on 22 Apr 2015, 11:00 AM
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.

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