Results 1 to 3 of 3

Thread: Issue in dynamically loading data for creating line chart in ExtJs 3.4.0

  1. #1

    Default Issue in dynamically loading data for creating line chart in ExtJs 3.4.0

    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
    Code:
    <!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

    Code:
    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:

    Code:
    {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

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Hmm... tested for me and it worked.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3

    Default

    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

    Code:
    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'
            }
        });
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •