1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    35
    Vote Rating
    0
    abhinavchugh is on a distinguished road

      0  

    Default extjs chart in extjs grid

    extjs chart in extjs grid


    Hi

    I am trying to put the extjs chart in ext js grid cell. Please tell me the approach how to do that. I have tried the following approach, it is giving me the error insertAdjacentHtml is null or not an object.please help me out.

    Code:
    var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            stateful: true,
            
            stateId: 'stateGrid',
            columns: [
                {
                    text     : 'Company',
                    flex     : 1,
                    sortable : false,
                    dataIndex: 'company'
                },
                {
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    renderer : 'usMoney',
                    dataIndex: 'price'
                },
                {
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change'
                },
                {
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                },
                {
                    text     : 'Last Updated',
                    width    : 85,
                    sortable : true,
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                },
                {
                  text     : 'chartDisplay',
                  width    : 85,
                  sortable : false,
                  renderer :  function(v, meta, panel1){
                  var store = Ext.create('Ext.data.JsonStore', {
                         fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
                         data: [
                                 {weeks: 1, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000 }
                 ]});
                  var panel1 = Ext.create('widget.panel', {
                         width: 800,
                         height: 400,
                         title: 'Stacked Bar Chart - Movies by Genre',
                         layout: 'fit',
                         items: {
                             xtype: 'chart',
                             animate: true,
                             shadow: true,
                             store: store,
                             legend: {
                                 position: 'right'
                             },
                             axes: [{
                                 type: 'Numeric',
                                 position: 'bottom',
                                 fields: ['comedy', 'action', 'drama', 'thriller'],
                                 title: false,
                                 grid: true,
                                 label: {
                                     renderer: function(v) {
                                         return String(v).replace(/000000$/, 'M');
                                     }
                                 },
                                 roundToDecimal: false
                             }, {
                                 type: 'Category',
                                 position: 'left',
                                 fields: ['year'],
                                 title: false
                             }],
                             series: [{
                                 type: 'bar',
                                 axis: 'bottom',
                                 gutter: 80,
                                 highlight: true,
                                 xField: 'year',
                                 yField: ['comedy', 'action', 'drama', 'thriller'],
                                 stacked: true,
                                 tips: {
                                     trackMouse: true,
                                     width: 65,
                                     height: 28,
                                     renderer: function(storeItem, item) {
                                         this.setTitle(String(item.value[1] / 1000000) + 'M');
                                     }
                                 }
                             }]
                         }
                     });
                    var id = Ext.id();
                     //meta.attr = 'id="' + id +'"';
                     meta.tdCls = '"' + id + '"';
                     //r.chart.render.defer(1, r.chart, [id]);
                     Ext.Function.defer(panel1.render, 100, panel1, [id]);
                     //r.chart.render(id);
                     return '';
                }
                 },
                
            ],
            height: 350,
            width: 600,
            title: 'Array Grid',
            renderTo: Ext.getBody(),
            viewConfig: {
                stripeRows: true
            }
        });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,079
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Perhaps you could use this extension:
    http://skirtlesden.com/ux/component-column

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    35
    Vote Rating
    0
    abhinavchugh is on a distinguished road

      0  

    Default Fusion chart in ext js grid

    Fusion chart in ext js grid


    Hi Scott

    Thanks a lot for your reply. I am able to put the ext js chart in ext js grid cell.

    Now, Instead of ext js chart i want to put the fusion chart in ext js grid. i tried the approach mentioned in the link provided by you, but it didn't work for fusion chart. please help me out..Thanks in advance

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,079
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    This may be a problem. You will need to find a plugin that supports Fusion Charts, and then make sure the plugin is compatible with component-column. I have seen FC plugins, but I am not sure if they are converted to Ext4
    and will also provide you ability to insert it into a grid column.

    You will have to perform a little research on this issue.

    Regards,
    Scott

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default Is there a solution for newer versions of extjs?

    Is there a solution for newer versions of extjs?


    The examples on skirtle's site seem to apply to extjs 4.0.6/7, and do not work in the newer versions 4.1.x of extjs. Is there a solution for the newer versions?

    thanks

Thread Participants: 2