PDA

View Full Version : Display nested JSON data in the EXTJS4 chart in a grid - Please help



ananthk
13 Jul 2013, 11:08 AM
an someone please help me qucily to enable me display the nested JSON chart data in this code. When the store loads it does have the nested JSON data and I have provide the firebug snapshot. I am not sure what am I doing wrong to enable the chart work. I really appreciate your help quickly


Ext.require([
'Ext.picker.*',
'Ext.form.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.chart.*',
'Its.grid.column.Component'
]);




Ext.define('Org.model.MetricsModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'orgname',
type: 'string'
},
{
name: 'successcount',
type:'int'
},
{
name: 'errorcode1',
type:'int'
},
{
name: 'errorcode2',
type:'int'
},
{
name: 'errorcode3',
type:'int'
},
{ name: 'time', type: 'string', mapping: 'chartdata.timeinterval' },
{ name: 'error', type: 'string', mapping: 'chartdata.errorcount' },
{ name: 'success', type: 'string', mapping: 'chartdata.successcount' }


],
hasMany: [
{
model: 'Org.model.ChartModel',
autoLoad: true,
name: 'chartdata'
}

]
}
});
Ext.define('Org.model.ChartModel', {
extend : 'Ext.data.Model',
config : {
idProperty : 'timeinterval',
fields : [
'timeinterval',
'errorcount',
'successcount'
],
belongsTo: 'Org.model.MetricsModel'
}
});


Ext.onReady(function() {


var store = new Ext.data.Store({
autoLoad : true,
model : 'Org.model.MetricsModel',
proxy : {
type : 'ajax',
url : 'data/json.json',
reader : 'json'
},
listeners : {
load : function(store) {
var rec = store.getAt(5),
chartdata = rec.chartdata();


console.log('There are ' + chartdata.getCount() + ' chardata');
//console.log('There is ' + jobDates.getCount() + ' job date');
}
},

data: [
{
"orgname": "MYORG1",
"successcount": 2,
"errorcode1": 2,
"errorcode2": 2,
"errorcode3": 2,

"chartdata": [
{
"timeinterval": "2-3", "successcount": 5,"errorcount": 6
},
{
"timeinterval": "3-4","successcount": 6, "errorcount": 7
},
{
"timeinterval": "5-6", "successcount": 8, "errorcount": 9
},
{
"timeinterval": "7-8", "successcount": 9, "errorcount": 10
},

]

},
{
"orgname": "MYORG3",
"successcount": 2,
"errorcode1": 2,
"errorcode2": 2,
"errorcode3": 2,

"chartdata": [
{
"timeinterval": "2-3", "successcount": 5, "errorcount": 6
},
{
"timeinterval": "3-4", "successcount": 6,"errorcount": 7
},

{
"timeinterval": "5-6", "successcount": 8, "errorcount": 9
},
{
"timeinterval": "7-8", "successcount": 9, "errorcount": 10
},

]

}
]

});




Ext.define('Ext.chart.theme.myTheme', {
extend: 'Ext.chart.theme.Base',
constructor: function(config) {
this.callParent([Ext.apply({
colors: ['#800000','#009900']
}, config)]);
}
});



Ext.create('Ext.grid.Panel', {
title: 'SIPR Ingest',
name : 'task',
store: store,
width: 1900,
height: 950,
renderTo: Ext.getBody(),
columns: [{
text: 'ORGNAME',
width: 150,
dataIndex: 'orgname'
},{ // chart column
xtype: 'itscomponentcolumn',
text : 'Chart',
width: 200,
// dataIndex: 'done',
dataIndex: 'time',

// HOW do I pass the Nested object here?
items: function(value1, value2, value3) {
return {


xtype: 'chart',
width: 200,
height: 150,
style: 'background:#fff',


store: Ext.create('Ext.data.Store', {
storeId:'ingestStore',
fields:['timeinterval', 'errors', 'success'],
data : [{timeinterval: value1}, {errors: value2}, {success: value3} ] // This need ot be changed based on how we can access the nested chartdata
}),
id: 'Barchart',
theme: 'myTheme',
animate: true,
shadow: true,
// store: store,
background: {
fill: '#3333FF'
},

axes: [{
type: 'Numeric',
position: 'left',
fields: ['errors', 'success'],
title: false,
grid: true,
hidden: true
}, {
type: 'Category',
position: 'bottom',
fields: ['timeinterval'],
hidden: true

}],
series: [{

type: 'column',
axis: 'left',
gutter: 0,

style: {
width: 10
//<-- Specify you Column width here
},
xField: 'title',
yField: ['errors', 'success'],
stacked: true,


tips: {
trackMouse: true,
renderer: function(storeItem, item, sprite, record, attr, index, store) {
this.setWidth(100);
this.setHeight(50);
var label = item.value[1] == storeItem.data.errors ? 'errors' : 'success';
this.setTitle(label + '<br />' + item.value[1]);

}
}
}
]

}
}
}


,{
text : 'Success Count',
width: 160,
dataIndex: 'successcount'


},{
text : 'Error Code 1',
width: 160,
dataIndex: 'errorcode1'

},
{
text : 'Error Code2',
dataIndex: 'errorcode2',
width: 200

},

{
text : 'Error Code3',
dataIndex: 'errorcode3',
width: 200

},

{
text : 'Timeinterval',
dataIndex: 'chartdata.time',// I tried accessing the data even in a grid column it does not work
width: 200

}


]
});
});


When the store loads , it has the following structure
data
[Object { orgname="USMC", successcount=2, errorcode1=2, more...}, Object { orgname="ARMY", successcount=2, errorcode1=2, more...}]
0
Object { orgname="MYORG1", successcount=2, errorcode1=2, more...}
chartdata
[Object { timeinterval="2-3", successcount=5, errorcount=6}, Object { timeinterval="3-4", successcount=6, errorcount=7}, Object { timeinterval="5-6", successcount=8, errorcount=9}, Object { timeinterval="7-8", successcount=9, errorcount=10}]
0
Object { timeinterval="2-3", successcount=5, errorcount=6}
errorcount
6
successcount
5
timeinterval
"2-3"
1
Object { timeinterval="3-4", successcount=6, errorcount=7}
errorcount
7
successcount
6
timeinterval
"3-4"
2
Object { timeinterval="5-6", successcount=8, errorcount=9}
errorcount
9
successcount
8
timeinterval
"5-6"
3
Object { timeinterval="7-8", successcount=9, errorcount=10}
errorcount
10
successcount
9
timeinterval
"7-8"
errorcode1
2
errorcode2
2
errorcode3
2
orgname
"USMC"
successcount
2
1
Object { orgname="MYORG2", successcount=2, errorcode1=2, more...}
chartdata
[Object { timeinterval="2-3", successcount=5, errorcount=6}, Object { timeinterval="3-4", successcount=6, errorcount=7}, Object { timeinterval="5-6", successcount=8, errorcount=9}, Object { timeinterval="7-8", successcount=9, errorcount=10}]
errorcode1
2
errorcode2
2
errorcode3
2
orgname
"MYORG2"
successcount
2

Additonally I am getting the chartdata object like this. But it is not reading the values.








New watch expression...




chartdata

[Object { timeinterval="2-3", successcount=5, errorcount=6}, Object { timeinterval="3-4", successcount=6, errorcount=7}, Object { timeinterval="5-6", successcount=8, errorcount=9}, Object { timeinterval="7-8", successcount=9, errorcount=10}]

ananthk
14 Jul 2013, 8:14 AM
I resolved this . Since the data is already in JSON format, ALl I had to do is to declare the same object model is the chart's store and assign data to be chartdata. works fine