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 Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,604
    Answers
    543
    Vote Rating
    325
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      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