PDA

View Full Version : Chart in Grid Panel



TotoraSorin
6 Jul 2018, 2:36 AM
Hi there,

I want to make a bar chart in a grid cell using the following values as in this example: here (https://i.imgur.com/MoRqzb8.png)

My code:

xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var store = Ext.getStore('Chart'); // my store
rec = record.get('TOUA04'); // record to change for every row
Ext.apply(store.getProxy().extraParams, {'tou':rec});
store.load();

var id = Ext.id();
Ext.defer(function (id) {
//applying the record to my ajax
var chart = Ext.create('Ext.chart.Chart', { //my chart
flex: 1,
height: 100,
width: 200,
colors: [
'#0ad88d',
'#d63030'
],
store: store,
//theme: 'muted',
flipXY: true,
axes: [
{
type: 'category',
fields: [
'TOUA04'
],
position: 'left'
},
{
type: 'numeric',
fields: [
'KOMMIS',
'OFFEN'

],
position: 'top'
}
],
series: [
{
type: 'bar',
highlight: true,
label: {
display: 'insideEnd',
field: 'y',
color: '#333',
'text-anchor': 'middle'
},
xField: 'TOUA04',
yField: [
'KOMMIS',
'OFFEN'
]
}
],

renderTo: id
});
}, 50, undefined, [id]);

return "<div id='" + id + "'></div>";

How do I save the state of the store for each row values so that it displays the correct data? It always loads the last.
Thank you!