extjs chart in extjs grid

[abhinavchugh]

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.

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
        }
    });

[scottmartin]

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

Regards,
Scott.

[abhinavchugh]

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

[scottmartin]

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

[jlawton]

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