Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: chart zooming

  1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    7
    Vote Rating
    0
      0  

    Default chart zooming

    Any hint on how to implement zooming functionality on a chart?
    I'd like to select part of the chart surface and zoom in on the selected area...

  2. #2
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    59
    Vote Rating
    2
      0  

    Default

    Sample configuration on how to zoom into a selected area in a chart exists in the API at Ext.chart.Mask. There you will find the following description:

    Code:
    Defines a mask for a chart's series. The 'chart' member must be set prior to rendering.
    
    A Mask can be used to select a certain region in a chart. When enabled, the select event will be triggered when a region is selected by the mask, allowing the user to perform other tasks like zooming on that region, etc.
    
    In order to use the mask one has to set the Chart mask option to true, vertical or horizontal. Then a possible configuration for the listener could be:
    
        items: {
            xtype: 'chart',
            animate: true,
            store: store1,
            mask: 'horizontal',
            listeners: {
                select: {
                    fn: function(me, selection) {
                        me.setZoom(selection);
                        me.mask.hide();
                    }
                }
            },
    In this example we zoom the chart to that particular region. You can also get a handle to a mask instance from the chart object. The chart.mask element is a Ext.Panel.
    Just add the properties

    Code:
     mask: 'horizontal',
            listeners: {
                select: {
                    fn: function(me, selection) {
                        me.setZoom(selection);
                        me.mask.hide();
                    }
                }
            },
    To your chart and you will be able to zoom into a selection.

    Quote Originally Posted by 3dm View Post
    Any hint on how to implement zooming functionality on a chart?
    I'd like to select part of the chart surface and zoom in on the selected area...

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    14
    Vote Rating
    0
      0  

    Default

    Thanks, now i can zoom my charts BUT...how the hell can we reset the zoom ? in Ext 3.x, when zooming, a "reset chart" link appeared on the chart but not anymore.
    I tried to add a click listener to my chart calling resetZoom() but, no luck, when fired i got an error that resetZoom() method is not defined in the object, as It is, as setZoom, when fired from the 'select' listener.

  4. #4
    Sencha User
    Join Date
    Aug 2010
    Posts
    7
    Vote Rating
    0
      0  

    Default

    I dug around a bit, and found that aChart.restoreZoom() works like a charm (assuming you have a reference to your chart in aChart). Not sure why this isn't documented and I wonder if this might change in the future...but it works as of 4.0.2 for me.

  5. #5
    Sencha User edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    11
      0  

    Default

    Quote Originally Posted by jmitchell.br View Post
    I dug around a bit, and found that aChart.restoreZoom() works like a charm (assuming you have a reference to your chart in aChart). Not sure why this isn't documented and I wonder if this might change in the future...but it works as of 4.0.2 for me.
    Thanks for the feedback, will make sure this gets documented asap
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  6. #6
    Ext JS Premium Member
    Join Date
    Jul 2010
    Location
    UK
    Posts
    534
    Vote Rating
    29
      0  

    Default

    Just spotted that this is now documented in 4.0.6

  7. #7
    Sencha User edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    11
      0  

    Default

    Quote Originally Posted by MrSparks View Post
    Just spotted that this is now documented in 4.0.6
    BTW these updates do get pushed up to the public docs app pretty frequently (every week or so), so even though 4.0.6 is support subscriber only everyone still benefits from doc patches
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  8. #8
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Bangladesh
    Posts
    38
    Vote Rating
    0
      0  

    Default

    Hi,
    I'm trying to add zoom functionality on chart. But not getting success. The select event never fires and also not getting any handle element to zoom. I'm using ExtJS-4.1-RC3 and trying to modify the Line chart sample within the ExtJS SDK examples directory to add the zoom functionality. Following is some portion of the code where I'm inserting the mask and listener for select event:

    Code:
    ar chart = Ext.create('Ext.chart.Chart', {
    				xtype : 'chart',
    				style : 'background:#fff',
    				animate : true,
    				store : store1,
    				shadow : true,
    				theme : 'Category1',
    				legend : {
    					position : 'right'
    				},
    				mask : true,
    				listeners : {
    					select : {
    						fn : function(me, selection) {
    							me.setZoom(selection);
    							me.mask.hide();
    						}
    					}
    				}
    And my output is like the attached screenshot:
    needtozoom.jpg

    Can you please give me direction that I can get the zoom functionality for Charting?

    Thanks

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Posts
    10
    Vote Rating
    0
      0  

    Default

    I have the exact same problem in 4.1
    Even the horizontal selection line which used to show up in 4.0.7 does not appear on graph on mouse hover.
    Here's my sample code:

    Code:
    Ext.onReady(function () {
        window.generateData = function(n, floor){
            var data = [],
                p = (Math.random() *  11) + 1,
                i;
            floor = (!floor && floor !== 0)? 20 : floor;
            for (i = 0; i < (n || 12); i++) {
                data.push({
                    name: Ext.Date.monthNames[i % 12],
                    data1: Math.floor(Math.max((Math.random() * 100), floor)),
                    data2: Math.floor(Math.max((Math.random() * 100), floor)),
                    data3: Math.floor(Math.max((Math.random() * 100), floor)),
                    data4: Math.floor(Math.max((Math.random() * 100), floor)),
                    data5: Math.floor(Math.max((Math.random() * 100), floor)),
                    data6: Math.floor(Math.max((Math.random() * 100), floor)),
                    data7: Math.floor(Math.max((Math.random() * 100), floor)),
                    data8: Math.floor(Math.max((Math.random() * 100), floor)),
                    data9: Math.floor(Math.max((Math.random() * 100), floor))
                });
            }
            return data;
        };
    
        window.store1 = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
            data: generateData()
        }); 
        
        store1.loadData(generateData(8));
        var chart = Ext.create('Ext.chart.Chart', {
            xtype: 'chart',
            style: 'background:#fff',
            animate: false,
            store: store1,
            mask: 'horizontal',
            listeners: {
                select: {
                    fn: function(me, selection) {
                        me.setZoom(selection);
                        me.mask.hide();
                    }
                }
            },
            shadow: false,
            theme: 'Category1',
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['data1'],
                title: 'Number of Hits',
                minorTickSteps: 1,
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Month of the Year'
            }],
            series: [{
                type: 'line',
                axis: 'left',
                xField: 'name',
                yField: 'data1',
            }]
        });
        
        var win = Ext.create('Ext.Window', {
            width: 900,
            height: 500,
            hidden: false,
            maximizable: true,
            title: 'Line Chart',
            renderTo: Ext.getBody(),
            layout: 'fit',
            items: chart
        });
    });
    and here is a screenshot:
    Untitled.jpg

  10. #10
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Bangladesh
    Posts
    38
    Vote Rating
    0
      0  

Page 1 of 2 12 LastLast

Similar Threads

  1. Image Zooming
    By Bucs in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 24 Feb 2011, 2:44 PM
  2. zooming
    By sway in forum Ext 3.x: Help & Discussion
    Replies: 10
    Last Post: 24 Aug 2010, 12:21 AM
  3. Zooming in
    By halfstep in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 22 Jul 2010, 1:10 PM
  4. Zooming in and out of an image
    By chrizmaster in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 30 Jun 2009, 12:37 AM
  5. google map style panning/zooming
    By fetchinson in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 26 Jun 2009, 7:25 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •