1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    11
    Vote Rating
    0
    pancho.munyoz is on a distinguished road

      0  

    Default Unanswered: change type chart (columns to lines)

    Unanswered: change type chart (columns to lines)


    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?

  2. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Vote Rating
    96
    Answers
    113
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    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:

    Code:
    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);} }
                ]
            }]
        });
    });

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    11
    Vote Rating
    0
    pancho.munyoz is on a distinguished road

      0  

    Default


    I using MVC architecture...
    my series are dynamic

Thread Participants: 1

Tags for this Thread