All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Hello
I would like to know if there is a way to determine the range of the X and Y axis on a "zoomed" graph. Particularly when we draw a box on a chart, is there a way to figure out the X and Y ranges of the zoomed/boxed section on Javascript ?
Thanks !
The zoom event of the chart gives you the axis ranges: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/zoom.
For example, if you modify the Pan and Zoom demo (https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/pan-zoom/defaultcs.aspx) as follows, you can get the axes ranges as shown in the screenshot below:
<
script
>
function OnZoomHandler(evt) {
console.log(evt.axisRanges);
}
</
telerik:RadHtmlChart
runat
=
"server"
Height
"650px"
Width
"100%"
ID
"RadHtmlChart1"
Transitions
"false"
DataSourceID
"SqlDataSource1"
ClientEvents
OnZoom
"OnZoomHandler"
/>
Pan
Enabled
"true"
Zoom
MouseWheel
Selection
ModifierKey
"Shift"
PlotArea
Series
telerik:ColumnSeries
DataFieldY
"UnitsInStock"
TooltipsAppearance
Color
"White"
ClientTemplate
#= dataItem.ProductName# : #= dataItem.UnitsInStock#
XAxis
DataLabelsField
"ProductName"
MinValue
"3"
MaxValue
"15"
Name
"myXaxis"
LabelsAppearance
RotationAngle
"90"
></
MinorGridLines
Visible
YAxis
"0"
"125"
"theYaxis"
TitleAppearance
Text
"Quantity"
Legend
Appearance
ChartTitle
"Units in Stock"
Position
"Bottom"
OnLoad
"chartLoad"
Thanks Marin.
This is another solution.
e.sender._zoomSelection.axisRanges[0].range.min; // x axis minimum after zoom
e.sender._zoomSelection.axisRanges[0].range.max; // x axis maximum after zoom
e.sender._zoomSelection.axisRanges[1].range.min; // y axis minimum after zoom
e.sender._zoomSelection.axisRanges[1].range.max; // y axis maximum after zoom