PDA

View Full Version : Chart inside grid



piccard
9 Jul 2010, 12:50 AM
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 ;-)

anshumap
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.

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

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

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

valfumble
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
valsar

Condor
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!

pavanextjs
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) {
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.

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