Results 1 to 3 of 3

Thread: Restrict load data to pie chart extjs

  1. #1
    Sencha User
    Join Date
    Dec 2013
    Posts
    5

    Default Restrict load data to pie chart extjs

    I have store with model and pie chart, this data also are shown in some grid. My chart show graph for one column, I want to show in chart just data, which more some value. Put minimum in axes didn't help.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    You can change the store filters as needed. See the following:

    Code:
    Ext.define('MyStore', {
        extend: 'Ext.data.Store',
        alias: 'store.mystore',
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone', 'data'],
        data:{'items':[
            { 'name': 'Lisa',  'email':'[email protected]',  'phone':'555-111-1224', 'data': 10 },
            { 'name': 'Bart',  'email':'[email protected]',  'phone':'555-222-1234', 'data': 7  },
            { 'name': 'Homer', 'email':'[email protected]',  'phone':'555-222-1244', 'data': 5  },
            { 'name': 'Marge', 'email':'[email protected]', 'phone':'555-222-1254', 'data': 27 }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.onReady(function () {
        
        var grid = Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: {
                type: 'mystore' // create instance
            },
            columns: [
                { header: 'Name',  dataIndex: 'name' },
                { header: 'Email', dataIndex: 'email', flex: 1 },
                { header: 'Phone', dataIndex: 'phone' },
                { header: 'Data', dataIndex: 'data' }
            ],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
        
        // get instance created by grid; or use grid.getStore()
        var chartStore = Ext.data.StoreManager.lookup('simpsonsStore');
    
        // filter that instance
        chartStore.filter({
            property: 'name',
            value: 'Bart'
        });
    
        var chart = Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 350,
            animate: true,
            
            store: {
                type: 'mystore' // new store instance; separate data
            },
    
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                angleField: 'data',
                showInLegend: true,
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28
                },
                highlight: {
                    segment: {
                        margin: 20
                    }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            }],
    
            listeners: {
                render: function(me) {
                    // create a filter on the chart store
                    me.getStore().filter({
                        property: 'name',
                        value: 'Homer'
                    });
                }
                
            }        
        });
    
    });

  3. #3
    Sencha User
    Join Date
    Dec 2013
    Posts
    5

    Default

    Ok, thank you. I thought, like you wrote, but hoped, that there can be some configuration.

Posting Permissions

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