View Full Version : Chart inside grid

9 Jul 2010, 12:50 AM

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

9 Jul 2010, 6:14 AM
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.

10 Jul 2010, 12:10 AM
Try a column renderer like:

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

14 Jul 2010, 7:32 AM
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 ;-)

21 Oct 2010, 5:30 PM
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

21 Oct 2010, 11:50 PM
Yes, you can use it for all components, but please be aware of the risk of leaking memory when updating or deleting records!

18 Jan 2012, 11:26 AM
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

renderer: function (v, meta, r) {
if (r.chart) {
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]);
return '';

Any idea why it is throwing these errors?

Thanks in advance,

8 Apr 2013, 2:29 AM
did you get it run?