1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    57
    Vote Rating
    0
    vikramiyer is on a distinguished road

      0  

    Default Sencha Touch Charts View Refresh(Axis)

    Sencha Touch Charts View Refresh(Axis)


    Hi,

    I have a requirement where a chart is refreshed upon picker selection. Every option selected in the picker makes an Ajax call to fetch new contents which then updates the store and the chart refreshes.

    The only thing that doesn't change is the x-axis and the y-axis. As a result the chart either becomes small or goes out of scope since the axis is fixed. The axis is not getting refreshed. How do I refresh my view to modify the axis.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,650
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    First thing is why not just load the store setting a param to be sent in the request?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    57
    Vote Rating
    0
    vikramiyer is on a distinguished road

      0  

    Default


    As far as I see its only the y-axis that doesn't update the x-axis reflects as soon as the store has a change . Below is the code

    Code:
    /**
     * @class Namespace.view.Graph
     * @extends Ext.tab.Panel
     * Description
     */
    Ext.define('Namespace.view.Graph', {
        extend: 'Ext.Panel',
        requires: ['Ext.chart.Chart','Ext.chart.series.Line','Ext.chart.axis.Numeric','Ext.chart.axis.Category','Ext.TitleBar','Ext.picker.Picker'],
        xtype: 'graphpanel',
    
    
        config: {
           cls: 'card1',
           layout: 'fit',
           title: 'Graph',
           iconCls: 'time',
         
           items: [
            {
                
                xtype: 'chart',
                store: 'GraphStore',                
                series: [{
                                                       type: 'line',                                                               
                                                    xField: 'name',
                                                    yField: 'data1', 
                                                      labelField: 'data1', 
                                                    style: {                                                
                                                        stroke: Namespace.view.ColorPatterns.getBaseColors(1),
                                                        fillOpacity: 0.6,
                                                        miterLimit: 4,
                                                        lineCap: 'miter',
                                                        lineWidth: 2
                                                    },
                                                    marker: {
                                                            type: 'circle',
                                                            size: 3,
                                                            radius: 3,
                                                            'stroke-width': 3
                                                    }                               
                                            },{
                                                       type: 'line',                                
                                                    xField: 'name',
                                                    yField: 'data2', 
                                                    labelField: 'data2',  
                                                    style: {
                                                        fill: Namespace.view.ColorPatterns.getBaseColors(0),
                                                        stroke: Namespace.view.ColorPatterns.getBaseColors(0),
                                                        fillOpacity: 0.5,
                                                        miterLimit: 3,
                                                        lineCap: 'miter',
                                                        lineWidth: 2
                                                    },
                                                    marker: {
                                                        type: 'circle',
                                                        size: 3,
                                                        radius: 3,
                                                        'stroke-width': 2
                                                    }
                 }],
                 axes: [{
                                                      type: 'numeric',
                                                      position: 'left',
                                                    fields: ['data1','data2'],               
                                                    title: {
                                                        text: 'Hours',
                                                        fontSize: 20
                                                    }
    
    
                                                },{
                                                    type: 'category',
                                                    position: 'bottom',
                                                    fields: ['name'],
                                                    title: {
                                                        text:'Date',
                                                        fontSize: 20
                                                    }
    
    
                }]
            },
            {
                 xtype: 'picker',
                
                 id: 'graphPicker',
                useTitles: true,
                slots: [
                        {
                             name: 'graph',
                             xtype: 'pickerslot',                        
                              title: 'Select Date',
                               store: 'SlotStore'                     
                        }
                 ]
             }]          
        },
        initialize: function() {
            this.callParent(arguments);
        }
    });

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    57
    Vote Rating
    0
    vikramiyer is on a distinguished road

      0  

    Default


    Burndown.jpgMitchell do you have any pointers based on the code uploaded? I have attached a screenshot of what's happening.... The first time the axis shows just fine... The next time onwards... The axis is fixed and the values are relative.

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    57
    Vote Rating
    0
    vikramiyer is on a distinguished road

      0  

    Default


    Here is another observation... The axis loads properly now when the device is rotated but not when the store is synced. However to rotate the device for the graph to refresh its axis is ugly.

Thread Participants: 1

Tags for this Thread