1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    goldmonty is on a distinguished road

      0  

    Default 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


    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

  2. #2
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
    goldmonty is on a distinguished road

      0  

    Default


    Thanks a lot skirtle. It worked.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar