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,589
    Answers
    540
    Vote Rating
    322
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi