change type chart (columns to lines)

[pancho.munyoz]

I have a chart type 'colums'

chartTypeColumn.JPG

When i select line button, i want change chart type to Line, but i can´t...
any idea how i do?

[Farish]

I am not sure if its possible to dynamically change the series of a chart. I have one possible solution which is to use card layout for a parent panel and create 2 charts (line and column) and place them inside this parent panel. Then you may change the active view of the parent panel when the toolbar button is clicked. Here is a sample:

Ext.onReady(function() {
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    var grid1 = Ext.create('Ext.grid.Panel', {
        title: 'Line',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
        ]
    });
    
    var grid2 = Ext.create('Ext.grid.Panel', {
        title: 'Column',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
        ]
    });

    var parent = Ext.create('Ext.panel.Panel', {
        //title: 'Parent',
        layout: 'card',
        width: 400,
        height: 400,
        renderTo: Ext.getBody(),
        items: [grid1, grid2],  // place the 2 charts here
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            items: 
            [
                {text: 'Line', handler: function() {parent.getLayout().setActiveItem(grid1);} },
                {text: 'Column', handler: function() {parent.getLayout().setActiveItem(grid2);} }
            ]
        }]
    });
});

[pancho.munyoz]

I using MVC architecture...
my series are dynamic