Client-Side API
RadChart has been deprecated since Q3 2014 and is no longer recommended for use, as it does not support modern browsers. We strongly recommend using RadHtmlChart, Telerik's modern client-side charting component. To transition from RadChart to RadHtmlChart, refer to the following migration articles:
Explore the RadHtmlChart documentation and online demos to determine how it fits your development needs.
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.