PDA

View Full Version : How to load json file into extjs4.0 code



manish@gs
17 Aug 2011, 1:38 AM
Hi,

I am trying to build a line chart based out of some values in JSON format and it works fine. Below is the Line.js code:

Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
Ext.onReady(function () {



var store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1'],
data:[
{'X_AXIS_TENOR_TYP':'1Y','Y_AXIS_VAL_CAMT':2.0201840302},
{'X_AXIS_TENOR_TYP':'2Y','Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'3Y','Y_AXIS_VAL_CAMT':2.0201840302},
{'X_AXIS_TENOR_TYP':'4Y','Y_AXIS_VAL_CAMT':1.0201840302},
{'X_AXIS_TENOR_TYP':'5Y','Y_AXIS_VAL_CAMT':2.0201840302},
{'X_AXIS_TENOR_TYP':'6Y','Y_AXIS_VAL_CAMT':1.0201840302},
{'X_AXIS_TENOR_TYP':'7Y','Y_AXIS_VAL_CAMT':2.0201840302},
{'X_AXIS_TENOR_TYP':'8Y','Y_AXIS_VAL_CAMT':1.0201840302},
{'X_AXIS_TENOR_TYP':'9Y','Y_AXIS_VAL_CAMT':1.0201840302},
{'X_AXIS_TENOR_TYP':'10Y','Y_AXIS_VAL_CAMT':1.0201840302}
]
});


var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
maximizable: true,
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',

items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: store1,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Y_AXIS_VAL_CAMT'],
title: 'Amount',
minorTickSteps: 10,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['X_AXIS_TENOR_TYP'],
title: 'Tenor'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'X_AXIS_TENOR_TYP',
yField: 'Y_AXIS_VAL_CAMT',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, ]
}
});
});

the code for .html file is as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Line Chart</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="extjs/examples/shared/example.css" />
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<!--script type="text/javascript" src="../example-data.js"></script-->
<script type="text/javascript" src="Line.js"></script>
</head>
<body id="docbody">
<h1>Line Chart Example</h1>
<div style="margin: 10px;">
<p>

</p>
</div>
</body>
</html>



Inside Line.js file instead of using hardcoded values I want to load the data through a JSON file named employees.json. The code is as following:
data:[
{'X_AXIS_TENOR_TYP':'1Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'2Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'3Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'4Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'5Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'6Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'7Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'8Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'9Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'10Y,'Y_AXIS_VAL_CAMT':.0201840302}
]



I tried to write below code under Line.js for this but it failed to run:

Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
Ext.onReady(function () {

var store1 = new Ext.data.Store({
model: 'User',
proxy: {
type: 'ajax',
url : '/employees.json',
reader: {
type: 'json',
root: 'employees'
}
},
autoLoad: true
});


var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
maximizable: true,
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
/*tbar: [{
text: 'Reload Data',
handler: function() {
store1.loadData(generateData(8));
}
}],*/
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: store1,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
//fields: ['data1', 'data2', 'data3'],
fields: ['Y_AXIS_VAL_CAMT'],
title: 'Amount',
minorTickSteps: 10,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['X_AXIS_TENOR_TYP'],
title: 'Tenor'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'X_AXIS_TENOR_TYP',
yField: 'Y_AXIS_VAL_CAMT',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, ]
}
});
});

Can anyone please help!!!

Thanks in advance.

manish@gs
17 Aug 2011, 3:51 AM
can anyone please help!!!!!!

arthurakay
17 Aug 2011, 8:32 AM
1. Use the CODE tags when posting code.

2. From what you've posted, your employees.json file isn't valid JSON:



data:[
{'X_AXIS_TENOR_TYP':'1Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'2Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'3Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'4Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'5Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'6Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'7Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'8Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'9Y,'Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'10Y,'Y_AXIS_VAL_CAMT':.0201840302}
]


Run your code through jsonlint.com to debug that part.

manish@gs
18 Aug 2011, 2:08 AM
Hi,

I ran employees,json file which has below code it it:

data:[
{'X_AXIS_TENOR_TYP':'1Y','Y_AXIS_VAL_CAMT':2.0201840302},
{'X_AXIS_TENOR_TYP':'2Y','Y_AXIS_VAL_CAMT':.0201840302},
{'X_AXIS_TENOR_TYP':'3Y','Y_AXIS_VAL_CAMT':2.0201840302},
{'X_AXIS_TENOR_TYP':'4Y','Y_AXIS_VAL_CAMT':1.0201840302},
{'X_AXIS_TENOR_TYP':'5Y','Y_AXIS_VAL_CAMT':2.0201840302},
{'X_AXIS_TENOR_TYP':'6Y','Y_AXIS_VAL_CAMT':1.0201840302},
{'X_AXIS_TENOR_TYP':'7Y','Y_AXIS_VAL_CAMT':2.0201840302},
{'X_AXIS_TENOR_TYP':'8Y','Y_AXIS_VAL_CAMT':1.0201840302},
{'X_AXIS_TENOR_TYP':'9Y','Y_AXIS_VAL_CAMT':1.0201840302},
{'X_AXIS_TENOR_TYP':'10Y','Y_AXIS_VAL_CAMT':1.0201840302}
]


Instead of this it is not displaying any line chart.

manish@gs
18 Aug 2011, 2:10 AM
Any suggestions welcome

arthurakay
18 Aug 2011, 6:41 AM
Did you read my first post? The data in your JSON file is invalid. Correcting that is the first step in solving this issue.