PDA

View Full Version : Issue in dynamically loading data for creating line chart in ExtJs 3.4.0



goldmonty
21 Nov 2011, 10:39 PM
Hi,

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 I do so I got below error:
"Uncaught TypeError: Object #<Object> has no method 'on'" ext-all.js : 7

But when I execute the same code with hard coded data(please see the code in charts.js) line chart gets visible immediately inside a panel.
Below are my codes.
charts.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Charts</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript">var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1396058-8']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script>
<!-- LIBS -->
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
<script type="text/javascript" src="charts.js"></script>

</head>
<body>
<h1>Yield Curve</h1>
<div id="container"></div>
</body>
</html>


charts.js





Ext.chart.Chart.CHART_URL = 'ext-3.4.0/resources/charts.swf';


Ext.onReady(function(){
/*dynamic data*/
var store = new Ext.data.Store({
fields : ['X_AXIS_TENOR_TYP','Y_AXIS_VAL_CAMT'],
proxy : {
type : 'ajax',
url : './createJSON.jsp',
reader : {
type : 'json',
root : 'data'
}
},
autoLoad : true
});

console.log("data loaded");
/*hardcoded data*/
/*var store = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
data: [
{name:'Jul 07', visits: 245000, views: 3000000},
{name:'Aug 07', visits: 240000, views: 3500000},
{name:'Sep 07', visits: 355000, views: 4000000},
{name:'Oct 07', visits: 375000, views: 4200000},
{name:'Nov 07', visits: 490000, views: 4500000},
{name:'Dec 07', visits: 495000, views: 5800000},
{name:'Jan 08', visits: 520000, views: 6000000},
{name:'Feb 08', visits: 620000, views: 7500000}
]
});*/



new Ext.Panel({
title: 'Yield Curve Graph',
renderTo: 'container',
width:500,
height:300,
layout:'fit',


items: {
xtype: 'linechart',
store: store,
//xField: 'name',
//yField: 'visits'
xField: 'X_AXIS_TENOR_TYP',
yField: 'Y_AXIS_VAL_CAMT'
}
});
});


Below is my json data:



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


Please guide me on this.

Thanks and Regards,
goldmonty

mitchellsimoens
22 Nov 2011, 8:52 AM
Hmm... tested for me and it worked.

goldmonty
23 Nov 2011, 6:51 AM
Thanks for replying.

You might have tried with extjs4.0. It doesn't work with extjs3.4.0

I have changed the code for my js and it worked fine





Ext.chart.Chart.CHART_URL = 'ext-3.4.0/resources/charts.swf';


Ext.onReady(function(){
/*dynamic data*/
var store = new Ext.data.JsonStore({

autoDestroy: true,
url: './createJSON.jsp',
root: 'matrix',
fields: ['X_AXIS_TENOR_TYP','Y_AXIS_VAL_CAMT'],
autoLoad : true
});


new Ext.Panel({
title: 'Yield Curve Graph',
renderTo: 'container',
width:500,
height:300,
layout:'fit',


items: {
xtype: 'linechart',
store: store,
xField: 'X_AXIS_TENOR_TYP',
yField: 'Y_AXIS_VAL_CAMT'
}
});
});