Client-Side API

RadChart has been replaced by RadHtmlChart, Telerik's client-side charting component. If you are considering RadChart for new development, examine the RadHtmlChart documentation and online demos first to see if it will fit your development needs. If you are already using RadChart in your projects, you can migrate to RadHtmlChart by following these articles: Migrating Series, Migrating Axes, Migrating Date Axes, Migrating Databinding, Features parity. Support for RadChart is discontinued as of Q3 2014, but the control will remain in the assembly so it can still be used. We encourage you to use RadHtmlChart for new development.

The client-side object and API of the control provide programmatic support for the zooming and scrolling feature and are only available if you have enabled scrolling and / or zooming.

Methods:

Telerik.Web.UI.RadChart.scroll method

Telerik.Web.UI.RadChart.scroll(xScrollOffset, yScrollOffset)

Scrolls the chart view to a specified position along the XAxis, YAxis, or both based on the specified offset parameters.

Syntax

var chart = $find("<%=RadChart1.ClientID%>");
chart.scroll(0.2, 0.3);
// scroll to top-left corner
chart.scroll(0, 0); 
// scroll to bottom-right corner 
chart.scroll(1,1); 
// scroll only by XAxis 
chart.scroll(0.4); 
// scroll only by YAxis 
chart.scroll(chart.get_xScrollOffset(),0.4);

Remarks

The offset uses the top-left corner of the plotArea as a starting point i.e. (xAxisOffset=0, yAxisOffset=0) pair represents the top-left corner of the plotArea while (xAxisOffset=1, yAxisOffset=1) - the bottom-right corner of the plotArea. Offset is a float value between 0 and 1.

Telerik.Web.UI.RadChart.zoom method

Telerik.Web.UI.RadChart.zoom(xScale, yScale, xScrollOffset, yScrollOffset)

Zooms the chart view according to a specified scaling factor by the XAxis, the YAxis, or both. You can optionally pass XScrollOffset / YScrollOffset arguments so the scaled view scrolls to a specified position as well.

Syntax

//scale XAxis by factor 3 
var chart = $find("<%=RadChart1.ClientID%>"); 
chart.zoom(3);
//scale XAxis by factor 3 and YAXis by factor 2 
chart.zoom(3, 2); 
//scale only YAxis by factor 2 
chart.zoom(chart.get_xScale(), 2); 
//scale XAxis by factor 3 and YAXis by factor 2 
//scroll to bottom-right corner of the plotArea 
chart.zoom(3, 2, 1, 1);

Remarks

The offset uses the top-left corner of the plotArea as a starting point i.e. (xAxisOffset=0, yAxisOffset=0) pair represents the top-left corner of the plotArea while (xAxisOffset=1, yAxisOffset=1) - the bottom-right corner of the plotArea. Offset is a float value between 0 and 1.

Telerik.Web.UI.RadChart.zoomOut method

Telerik.Web.UI.RadChart.zoomOut()

RadChart provides integrated history support for the zooming actions and this method zooms out the current chart view to the previous scaling step and also restores the scrolled position.

Syntax

var chart = $find("<%=RadChart1.ClientID%>");
chart.zoomOut();

Telerik.Web.UI.RadChart.resetZoom method

Telerik.Web.UI.RadChart.resetZoom()

Resets the scaling factors by XAxis and YAxis to 1 (no scaling applied).

Syntax

var chart = $find("<%=RadChart1.ClientID%>");
chart.resetZoom();

Properties:

To get or set property values for client API properties, you must call property accessor methods that are named with the get_ and set_ prefixes. For example, to get or set a value for a property such as cancel, you call the get_cancel or set_cancel methods.

Telerik.Web.UI.RadChart xScrollOffset Property

Gets a value indicating the XAxis scroll offset ratio.

Syntax

var chart = $find("<%=RadChart1.ClientID%>");
var offset = chart.get_xScrollOffset();

Return Value

The XAxis scroll offset ratio as a float value between 0 and 1.

The offset uses the top-left corner of the plotArea as a starting point i.e. (xAxisOffset=0, yAxisOffset=0) pair represents the top-left corner of the plotArea while (xAxisOffset=1, yAxisOffset=1) - the bottom-right corner of the plotArea.

Telerik.Web.UI.RadChart yScrollOffset Property

Gets a value indicating the YAxis scroll offset ratio.

Syntax

var chart = $find("<%=RadChart1.ClientID%>"); 
var offset = chart.get_yScrollOffset();

Return Value

The YAxis scroll offset ratio as a float value between 0 and 1.

The offset uses the top-left corner of the plotArea as a starting point i.e. (xAxisOffset=0, yAxisOffset=0) pair represents the top-left corner of the plotArea while (xAxisOffset=1, yAxisOffset=1) - the bottom-right corner of the plotArea.

Telerik.Web.UI.RadChart xScale Property

Gets a value indicating the plotarea scale factor by XAxis.

Syntax

var chart = $find("<%=RadChart1.ClientID%>"); 
var scale = chart.get_xScale();

Return Value

The XAxis scale factor as a float value greater or equal to 1.

Telerik.Web.UI.RadChart yScale Property

Gets a value indicating the plotarea scale factor by YAxis.

Syntax

var chart = $find("<%=RadChart1.ClientID%>"); 
var scale = chart.get_yScale();

Return Value

The YAxis scale factor as a float value greater or equal to 1.