1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    1
    Vote Rating
    0
    leskito is on a distinguished road

      0  

    Default Unanswered: Chart series from dynamic nested JSON

    Unanswered: Chart series from dynamic nested JSON


    Hello everybody,

    I was given a task to implement a chart which gets JSON data from a servlet and JSON looks like this:

    Code:
    {
    "totalCount":2,"data":[
    {
    "id":1,"unit":"unit1","values":[
    {"dt":"2013,1,1","value":50},
    {"dt":"2013,1,2","value":55},
    {"dt":"2013,1,3","value":60}
    ]},
    {
    "id":2,"unit":"unit2","values":[
    {"dt":"2013,1,1","value":12},
    {"dt":"2013,1,2","value":15},
    {"dt":"2013,1,3","value":20}
    ]}
    ]
    }
    So I implemented a store with some columns defined, a proxy and a reader. I proceded exactly the same way when I got plain data to depict on a chart. After writing some code I realized that the store I created just couldn't work. It looked like this:

    Code:
        var store1 = Ext.create('Ext.data.Store',{
            fields: [            {
                    name: 'dt', type: 'timestamp',
                    convert: function(value, record) {
                        var d = new Date();
                         //some parsing here
                        return d;
                    }
                }, 
                'value'],
            proxy: {
                type: 'ajax',
                url: './datasourcehere',
                reader: {
                    root: 'data',
                    type: 'json'
                },
                listeners: {
                    loadexception: 'ErrorResponse'
                }
            },
            listeners: {
               load: {
                  fn: function() {
                     //alert('wow data loaded'); 
                  },
                  scope: this
               }
            },
            autoLoad: false  
        });
    I tried to change root value to 'data[0].value, but never worked.

    The chart should have <totalcount> number of series. Each serie should be identified by its <id>. Values should be taken from <value> fields. X axis is defined by <dt>.

    The main problem is that I don't know how many series would be sent.

    I know that I can analyze the data in the 'load' event, then try to create another store and use it as a source for my chart. Probably the chart should be rendered each time the data comes. So I'm wondering if there is any more elegant way.

    regards,
    Tomek

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,160
    Answers
    408
    Vote Rating
    190
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    If you need some logic to do some creative parsing of the fetched data you can either extend the JSON reader to your liking or you could even just Ajax.request() the data down, parse it out as needed, and feed the results to your store with loadData().

    The series config will need to be defined up front per chart. So, if you have a dynamic number of series per dataset you may need to rebuild the chart with each new dataset (assuming the series count / structure changed between datasets).
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Thread Participants: 1

Tags for this Thread