Results 1 to 6 of 6

Thread: How to load json file into extjs4.0 code

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
      0  

    Exclamation How to load json file into extjs4.0 code

    Hi,

    I am trying to build a line chart based out of some values in JSON format and it works fine. Below is the Line.js code:

    Ext.require('Ext.chart.*');
    Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
    Ext.onReady(function () {



    var store1 = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1'],
    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: '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: 'Amount',
    minorTickSteps: 10,
    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
    }
    }, ]
    }
    });
    });

    the code for .html file is as below:
    <!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="../example-data.js"></script-->
    <script type="text/javascript" src="Line.js"></script>
    </head>
    <body id="docbody">
    <h1>Line Chart Example</h1>
    <div style="margin: 10px;">
    <p>

    </p>
    </div>
    </body>
    </html>



    Inside Line.js file instead of using hardcoded values I want to load the data through a JSON file named employees.json. The code is as following:
    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}
    ]



    I tried to write below code under Line.js for this but it failed to run:

    Ext.require('Ext.chart.*');
    Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
    Ext.onReady(function () {

    var store1 = new Ext.data.Store({
    model: 'User',
    proxy: {
    type: 'ajax',
    url : '/employees.json',
    reader: {
    type: 'json',
    root: 'employees'
    }
    },
    autoLoad: true
    });


    var win = Ext.create('Ext.Window', {
    width: 800,
    height: 600,
    hidden: false,
    maximizable: true,
    title: 'Line Chart',
    renderTo: Ext.getBody(),
    layout: 'fit',
    /*tbar: [{
    text: 'Reload Data',
    handler: function() {
    store1.loadData(generateData(8));
    }
    }],*/
    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: ['data1', 'data2', 'data3'],
    fields: ['Y_AXIS_VAL_CAMT'],
    title: 'Amount',
    minorTickSteps: 10,
    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
    }
    }, ]
    }
    });
    });

    Can anyone please help!!!

    Thanks in advance.

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
      0  

    Exclamation

    can anyone please help!!!!!!

  3. #3
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99
    Vote Rating
    1593
      1  

    Default

    1. Use the CODE tags when posting code.

    2. From what you've posted, your employees.json file isn't valid JSON:

    Code:
    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}
    ]
    Run your code through jsonlint.com to debug that part.

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Hi,

    I ran employees,json file which has below code it it:

    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}
    ]


    Instead of this it is not displaying any line chart.

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Any suggestions welcome

  6. #6
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99
    Vote Rating
    1593
      1  

    Default

    Did you read my first post? The data in your JSON file is invalid. Correcting that is the first step in solving this issue.

Posting Permissions

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