Results 1 to 8 of 8

Thread: Chart inside grid

  1. #1
    Sencha User
    Join Date
    Aug 2009
    Posts
    56

    Default Chart inside grid

    Hello,

    can anybody tell me the best way to render a chart inside a grid's cell?
    if there's an example around, it would be great.
    thanx ;-)

  2. #2
    Sencha User
    Join Date
    Jul 2010
    Posts
    59

    Default

    hi piccard,

    do the following and u will get the chart in the grid:
    create a chart class you can take any chart from the chart examples.

    now in the model put the name of the class wid reference and set the ref with chart. Get this chart in some panel and display it on the window.

    let me know if this helps.

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Try a column renderer like:
    Code:
    renderer: function(v, meta, r){
      if (r.chart) {
        r.chart.destroy();
      }
      r.chart = new Ext.chart.Chart(...);
      var id = Ext.id();
      meta.attr = 'id="' + id +'"';
      r.chart.render.defer(1, r.chart, [id]);
      return '';
    }

  4. #4
    Sencha User
    Join Date
    Aug 2009
    Posts
    56

    Default

    sorry for taking so long for answering, but I haven't been around.
    So thank you both for your ideas.

    at least I took the renderer-idea of condor, which works by the way great-. thank you very much ;-)

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    68

    Default

    This approach helps me with the problem of putting a panel in cell too.

    Unless it is not the ideal way to do so,

    thansk a lot
    valsar

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Yes, you can use it for all components, but please be aware of the risk of leaking memory when updating or deleting records!

  7. #7
    Ext JS Premium Member pavanextjs's Avatar
    Join Date
    Jul 2008
    Posts
    118

    Default

    Hi Condor,

    I am trying to put a stacked bar chart inside a grid cell. But it is thowing me errors saying el is null for each row.

    ExtJS Ver: 4.1.0Beta
    Browsers: FF9.0.1/IE9/Chrome

    Code:
    renderer: function (v, meta, r) {
        if (r.chart) {
            r.chart.destroy();
        }
        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['year', 'comedy', 'action', 'drama'],
            data: [{
                year: 2008,
                comedy: 60,
                action: 20,
                drama: 20
            }]
        });
        r.chart = new Ext.chart.Chart({
            xtype: 'chart',
            animate: true,
            shadow: true,
            store: store,
            insetPadding: 0,
            //legend: {
            //    position: 'right'
            //},
            axes: [{
                type: 'Numeric',
                position: 'bottom',
                fields: ['comedy', 'action', 'drama'],
                title: false,
                grid: false,
                hidden: true,
                label: {
                    renderer: function (v) {
                        return String(v).replace(/(.)00000$/, '.$1M');
                    }
                },
                roundToDecimal: false
            },
            {
                type: 'Category',
                position: 'left',
                fields: ['year'],
                hidden: true,
                title: false
            }],
            series: [{
                type: 'bar',
                axis: 'bottom',
                gutter: 0,
                xField: 'year',
                yField: ['comedy', 'action', 'drama'],
                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(r.chart.render, 100, r.chart, [id]);
        //r.chart.render(id);
        return '';
    }
    Any idea why it is throwing these errors?

    Thanks in advance,
    Pavan.

  8. #8
    Sencha User
    Join Date
    Jan 2008
    Posts
    212

    Default

    did you get it run?

Similar Threads

  1. Chart not working as module inside of namespace
    By yerajeff in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 22 Jun 2010, 8:58 AM
  2. listener itemclick in chart inside Ext.Window
    By bdom in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 11 Mar 2010, 5:01 AM
  3. [solved] Grid inside Tabs inside Panel ... grid wont render
    By amegahed in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 4 Jul 2009, 6:43 AM
  4. grid doesn't size correctly inside tabpanel inside panel
    By pflammer in forum Ext 2.x: Help & Discussion
    Replies: 15
    Last Post: 5 Jan 2009, 12:00 PM

Posting Permissions

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