Results 1 to 2 of 2

Thread: Display nested JSON data in the EXTJS4 chart in a grid - Please help

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    26
    Answers
    1
    Vote Rating
    -1
      0  

    Default Answered: Display nested JSON data in the EXTJS4 chart in a grid - Please help

    an someone please help me qucily to enable me display the nested JSON chart data in this code. When the store loads it does have the nested JSON data and I have provide the firebug snapshot. I am not sure what am I doing wrong to enable the chart work. I really appreciate your help quickly


    Ext.require([
    'Ext.picker.*',
    'Ext.form.*',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.panel.*',
    'Ext.chart.*',
    'Its.grid.column.Component'
    ]);




    Ext.define('Org.model.MetricsModel', {
    extend: 'Ext.data.Model',
    config: {
    fields: [
    {
    name: 'orgname',
    type: 'string'
    },
    {
    name: 'successcount',
    type:'int'
    },
    {
    name: 'errorcode1',
    type:'int'
    },
    {
    name: 'errorcode2',
    type:'int'
    },
    {
    name: 'errorcode3',
    type:'int'
    },
    { name: 'time', type: 'string', mapping: 'chartdata.timeinterval' },
    { name: 'error', type: 'string', mapping: 'chartdata.errorcount' },
    { name: 'success', type: 'string', mapping: 'chartdata.successcount' }


    ],
    hasMany: [
    {
    model: 'Org.model.ChartModel',
    autoLoad: true,
    name: 'chartdata'
    }

    ]
    }
    });
    Ext.define('Org.model.ChartModel', {
    extend : 'Ext.data.Model',
    config : {
    idProperty : 'timeinterval',
    fields : [
    'timeinterval',
    'errorcount',
    'successcount'
    ],
    belongsTo: 'Org.model.MetricsModel'
    }
    });


    Ext.onReady(function() {


    var store = new Ext.data.Store({
    autoLoad : true,
    model : 'Org.model.MetricsModel',
    proxy : {
    type : 'ajax',
    url : 'data/json.json',
    reader : 'json'
    },
    listeners : {
    load : function(store) {
    var rec = store.getAt(5),
    chartdata = rec.chartdata();


    console.log('There are ' + chartdata.getCount() + ' chardata');
    //console.log('There is ' + jobDates.getCount() + ' job date');
    }
    },

    data: [
    {
    "orgname": "MYORG1",
    "successcount": 2,
    "errorcode1": 2,
    "errorcode2": 2,
    "errorcode3": 2,

    "chartdata": [
    {
    "timeinterval": "2-3", "successcount": 5,"errorcount": 6
    },
    {
    "timeinterval": "3-4","successcount": 6, "errorcount": 7
    },
    {
    "timeinterval": "5-6", "successcount": 8, "errorcount": 9
    },
    {
    "timeinterval": "7-8", "successcount": 9, "errorcount": 10
    },

    ]

    },
    {
    "orgname": "MYORG3",
    "successcount": 2,
    "errorcode1": 2,
    "errorcode2": 2,
    "errorcode3": 2,

    "chartdata": [
    {
    "timeinterval": "2-3", "successcount": 5, "errorcount": 6
    },
    {
    "timeinterval": "3-4", "successcount": 6,"errorcount": 7
    },

    {
    "timeinterval": "5-6", "successcount": 8, "errorcount": 9
    },
    {
    "timeinterval": "7-8", "successcount": 9, "errorcount": 10
    },

    ]

    }
    ]

    });




    Ext.define('Ext.chart.theme.myTheme', {
    extend: 'Ext.chart.theme.Base',
    constructor: function(config) {
    this.callParent([Ext.apply({
    colors: ['#800000','#009900']
    }, config)]);
    }
    });



    Ext.create('Ext.grid.Panel', {
    title: 'SIPR Ingest',
    name : 'task',
    store: store,
    width: 1900,
    height: 950,
    renderTo: Ext.getBody(),
    columns: [{
    text: 'ORGNAME',
    width: 150,
    dataIndex: 'orgname'
    },{ // chart column
    xtype: 'itscomponentcolumn',
    text : 'Chart',
    width: 200,
    // dataIndex: 'done',
    dataIndex: 'time',

    // HOW do I pass the Nested object here?
    items: function(value1, value2, value3) {
    return {


    xtype: 'chart',
    width: 200,
    height: 150,
    style: 'background:#fff',


    store: Ext.create('Ext.data.Store', {
    storeId:'ingestStore',
    fields:['timeinterval', 'errors', 'success'],
    data : [{timeinterval: value1}, {errors: value2}, {success: value3} ] // This need ot be changed based on how we can access the nested chartdata
    }),
    id: 'Barchart',
    theme: 'myTheme',
    animate: true,
    shadow: true,
    // store: store,
    background: {
    fill: '#3333FF'
    },

    axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['errors', 'success'],
    title: false,
    grid: true,
    hidden: true
    }, {
    type: 'Category',
    position: 'bottom',
    fields: ['timeinterval'],
    hidden: true

    }],
    series: [{

    type: 'column',
    axis: 'left',
    gutter: 0,

    style: {
    width: 10
    //<-- Specify you Column width here
    },
    xField: 'title',
    yField: ['errors', 'success'],
    stacked: true,


    tips: {
    trackMouse: true,
    renderer: function(storeItem, item, sprite, record, attr, index, store) {
    this.setWidth(100);
    this.setHeight(50);
    var label = item.value[1] == storeItem.data.errors ? 'errors' : 'success';
    this.setTitle(label + '<br />' + item.value[1]);

    }
    }
    }
    ]

    }
    }
    }


    ,{
    text : 'Success Count',
    width: 160,
    dataIndex: 'successcount'


    },{
    text : 'Error Code 1',
    width: 160,
    dataIndex: 'errorcode1'

    },
    {
    text : 'Error Code2',
    dataIndex: 'errorcode2',
    width: 200

    },

    {
    text : 'Error Code3',
    dataIndex: 'errorcode3',
    width: 200

    },

    {
    text : 'Timeinterval',
    dataIndex: 'chartdata.time',// I tried accessing the data even in a grid column it does not work
    width: 200

    }


    ]
    });
    });


    When the store loads , it has the following structure
    data
    [Object { orgname="USMC", successcount=2, errorcode1=2, more...}, Object { orgname="ARMY", successcount=2, errorcode1=2, more...}]
    0
    Object { orgname="MYORG1", successcount=2, errorcode1=2, more...}
    chartdata
    [Object { timeinterval="2-3", successcount=5, errorcount=6}, Object { timeinterval="3-4", successcount=6, errorcount=7}, Object { timeinterval="5-6", successcount=8, errorcount=9}, Object { timeinterval="7-8", successcount=9, errorcount=10}]
    0
    Object { timeinterval="2-3", successcount=5, errorcount=6}
    errorcount
    6
    successcount
    5
    timeinterval
    "2-3"
    1
    Object { timeinterval="3-4", successcount=6, errorcount=7}
    errorcount
    7
    successcount
    6
    timeinterval
    "3-4"
    2
    Object { timeinterval="5-6", successcount=8, errorcount=9}
    errorcount
    9
    successcount
    8
    timeinterval
    "5-6"
    3
    Object { timeinterval="7-8", successcount=9, errorcount=10}
    errorcount
    10
    successcount
    9
    timeinterval
    "7-8"
    errorcode1
    2
    errorcode2
    2
    errorcode3
    2
    orgname
    "USMC"
    successcount
    2
    1
    Object { orgname="MYORG2", successcount=2, errorcode1=2, more...}
    chartdata
    [Object { timeinterval="2-3", successcount=5, errorcount=6}, Object { timeinterval="3-4", successcount=6, errorcount=7}, Object { timeinterval="5-6", successcount=8, errorcount=9}, Object { timeinterval="7-8", successcount=9, errorcount=10}]
    errorcode1
    2
    errorcode2
    2
    errorcode3
    2
    orgname
    "MYORG2"
    successcount
    2

    Additonally I am getting the chartdata object like this. But it is not reading the values.

    New watch expression...
    chartdata [Object { timeinterval="2-3", successcount=5, errorcount=6}, Object { timeinterval="3-4", successcount=6, errorcount=7}, Object { timeinterval="5-6", successcount=8, errorcount=9}, Object { timeinterval="7-8", successcount=9, errorcount=10}]

  2. I resolved this . Since the data is already in JSON format, ALl I had to do is to declare the same object model is the chart's store and assign data to be chartdata. works fine

  3. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    26
    Answers
    1
    Vote Rating
    -1
      0  

    Default Display nested JSON data in the EXTJS4 chart in a grid - Please help

    I resolved this . Since the data is already in JSON format, ALl I had to do is to declare the same object model is the chart's store and assign data to be chartdata. works fine

Posting Permissions

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