Issue in dynamically loading data for creating line chart in ExtJs4.0

**goldmonty** · 8 Nov 2011 10:35 PM

Hi All,
First of all my grand wishes to all of you on form. I am a green horn in the world of ExtJs and this would be my thread.
My requirement is to create a line chart based on some run-time data.I have written below codes(an HTML and a JS) in order to achieve a simple line chart.The data for creating the chart is been loaded dynamically via a call to jsp (createJSON.jsp). When ran below code with Google Chrome and Firefox (firebug1.8.3 enabled) I can very well see the response(the data in json format) but my line chart does not get displayed.All I can see is the window with mentioned height and width.
But when I try to produce the same data in hard coded fashion(please see the code in line_other.js) line chart gets visible immediately inside a window.

code in line_other.js

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

Ext.onReady(function() {

/*Dyanamically loading of data*/
/*var store1 = Ext.create('Ext.data.Store', {
fields : [ 'X_AXIS_TENOR_TYP', 'Y_AXIS_VAL_CAMT' ],
model : 'User',
proxy : {
type : 'ajax',
url : './createJSON.jsp',
reader : {
type : 'json',
root : 'data',
idProperty : 'Y_AXIS_VAL_CAMT'
}
},
autoLoad : true
});*/

/*hardcoded data*/
var store1 = Ext.create('Ext.data.JsonStore', {
fields: ['X_AXIS_TENOR_TYP','Y_AXIS_VAL_CAMT'],
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 : 'My 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: 'VALUE',
minorTickSteps: 1,
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
}
} ]
}
});
});

code in line_other.html

<!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="line_other.js"></script>
</head>
<body id="docbody">
<h1>Line Chart Example</h1>
</body>
</html>

response from jsp is :

"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}]"

Please guide me on this.

Thanks in advance,
Goldmonty

**skirtle** · 8 Nov 2011 11:55 PM

Please post code wrapped in [CODE] tags and properly indented.

The problem is your JSON response. Get rid of the double quotes round the outside and instead wrap it in {...} braces.

I'd also get rid of the model: 'User' on your store, I suspect it isn't meant to be there.

**goldmonty** · 9 Nov 2011 1:17 AM

Thanks a lot skirtle. It worked.

Issue in dynamically loading data for creating line chart in ExtJs4.0

Thread Tools

Search Thread

Display

Unanswered: Issue in dynamically loading data for creating line chart in ExtJs4.0

Unanswered: Issue in dynamically loading data for creating line chart in ExtJs4.0