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

Stepping

7 Answers 21 Views

Chart (HTML5)

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

7 Answers, 1 is accepted

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

};

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

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

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.

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:

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