PDA

View Full Version : ExtJs Chart zoom in / out



roja@12
15 Apr 2013, 9:35 PM
I need Chart Zoom In / Out in my application.

offshoreteam
16 Apr 2013, 2:48 AM
Refer below link..
http://docs.sencha.com/ext-js/4-1/#!/example/charts/TipsChart.html

slemmon
17 Apr 2013, 9:42 AM
You might look at the snippet at the top of the API docs for Ext.chart.Mask:
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.chart.Mask

There's an example there of how to zoom with a drag mask.

Though, there was a bug opened earlier so if it's not acting like you thought it would you might refer to this thread:
http://www.sencha.com/forum/showthread.php?261495

rozenman
19 Aug 2014, 6:16 AM
but how do you zoom out?I searched for hours and couldn't find anything about zooming back out...

slemmon
19 Aug 2014, 9:17 AM
The restoreZoom() method should be what restores the zoom back to where it was previously. I haven't tested that with Ext4 / Ext Charts recently. I know that zoom was buggy with Ext4 charts and may still be with Ext5's Ext Charts package.

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.chart.Navigation-method-restoreZoom

And if you're looking for a reason to venture into Ext5 using the new Sencha Charts package that will be receiving the bulk of engineering development going forward you might check out this example:
http://dev.sencha.com/ext/5.0.0/examples/kitchensink/?charts=true#line-crosszoom

rozenman
20 Aug 2014, 1:21 AM
Thanks! That works great!
I have seen how beautiful charts are in version 5. I might upgrade..
One last question: when using the zoom as described here, I get 2 problems:
1. the line is out of chart range
2. the dots are not aligned with the x-axis (y-axis is fine)
Any suggestions?
and thanks again!

50080

slemmon
22 Aug 2014, 11:45 PM
I'm afraid there is still an existing bug with zoom on the Ext Charts package. The Ext Charts package will still see some development in the way of bug fixes going forward, but will not receive the bulk of the attention from engineering. I would definitely consider upgrading to ExtJS 5 using the Sencha Charts package (both the Ext Charts package and the Sencha Charts package are available in 5.x currently, but Sencha Charts is the package that will be the primary supported option going forward).