1. #1
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Vote Rating
    8
    Answers
    6
    Kikketer will become famous soon enough

      0  

    Default Answered: Does Charts 2 support the model/stores?

    Answered: Does Charts 2 support the model/stores?


    This may seem like a dumb question but I've not seen anything useful in the documentation (yet). I have a nested bit of data coming in from a JSON response and I want to put this nested data in a graph. This bit of code works:
    Code:
        var sto = Ext.create("Stat.store.AStore");
        sto.load({
          callback : function() {
            var app = sto.first();
            console.log("Store: " + app.get("Name"));
            var points = app.DataPoints();
            console.log("Points length: " + points.data.all.length);
            app.DataPoints().each(function(point) {
              console.log("Date: " + point.get("date") + " i = " + point.get("i"));
            });
          }
        });
    It pulls a bit of nested data that looks something like this:
    Code:
    { 
      'lm' : [
        { 'Name' : 'Driver', 
          'DataPoints' : [ 
            {'date':'10-14-2010', 'i':0}, 
            {'date':'10-21-2010', 'i':426}, 
            {'date':'10-28-2010', 'i':722}
          ]
        }
      ]
    }
    Now in my chart definition simply points at the storeId (it doesn't use the created store above). It's displaying nothing.

    Code:
    Ext.define("Stat.view.OverallChart", {
      extend : "Ext.chart.Chart",
      xtype : "overallchart",
    
    
      config : {
        themeCls : 'area1',
        theme : 'Demo',
        store : "astore",
        animate : true,
        legend : {
          position : {
            portrait : 'right',
            landscape : 'bottom'
          },
          labelFont : '20px Arial'
        },
        axes : [
          {
            type : 'Numeric',
            grid : true,
            position : 'left',
            fields : ['i'],
            title : 'Is',
            grid : {
              odd : {
                opacity : 1,
                fill : '#ddd',
                stroke : '#bbb',
                'stroke-width' : 1
              }
            },
            minimum : 0,
            adjustMinimumByMajorUnit : 0
          },
          {
            type : 'Category',
            position : 'bottom',
            fields : ['date'],
            title : 'Date',
            grid : true,
            label : {
              rotate : {
                degrees : 315
              }
            }
          }
        ],
        series : [
          {
            type : 'area',
            highlight : false,
            axis : 'left',
            xField : 'date',
            yField : ['i'],
            style : {
              opacity : 0.93
            }
          }
        ]
      }
    });
    I've tried things like "DataPoints.date" in the field names, but that doesn't seem to change anything. I was thinking there is a different way to do this, since it's legal for my JSON response to have the same named field inside the DataPoints and outside on the parent. Say if I added a "date" field to the parent object.

    Or are we stuck having the server provide exactly what the chart should display (flattened)?

  2. The chart will not be able to use associations if that is what you are asking.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The chart will not be able to use associations if that is what you are asking.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Vote Rating
    8
    Answers
    6
    Kikketer will become famous soon enough

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    The chart will not be able to use associations if that is what you are asking.
    This makes me sad. All my services will have to spew out flat data, and the model/stores of Sencha (which are awesome) will become mostly useless to me.

    I think it would be an awesome thing to have in the future, I could see some seriously awesome client side abilities to group data, filter data, etc... Many would argue that should be server side, but I would like to be able to dump the data on the device and allow the user to wander off a network and still play with the data.

    I'm sure there are ways to convert the models into flat json for this purpose, but it would be nice to be built in.

    As always, thanks for your quick responses Mr. Simoens

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would agree and you can still pit out nested data, just cannot use associations.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Vote Rating
    8
    Answers
    6
    Kikketer will become famous soon enough

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    I would agree and you can still pit out nested data, just cannot use associations.
    Interesting, I'm very new to this thing but I thought the only way to use nested data was to have associations.

    Could you direct me to the documentation that shows how to make a model with a parent/child relationship that doesn't use associations? Also with nested data I could end up with things like:
    Code:
    {
      "name" : "...",
      "date" : "....",
      "data" : [
        {"date" : "...", "i" : ".."},
        {"date" : "...", "i" : ".."}
      ]
    }
    Notice how "date" appears in both the parent and the children? If charts can only grab fields based on the key, how does it know which date to pick?
    Last edited by Kikketer; 11 Apr 2012 at 12:49 PM. Reason: Fixed up that crappy bit of code I slapped in there.

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    A field in a model ha a type config that can transform the given value to a specified one. For example if you pass it "1" but you specified type of 'int' then it will convert to an integer 1. To use nested data in array or object form, you need to leave the type to it's default of 'auto'.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Vote Rating
    8
    Answers
    6
    Kikketer will become famous soon enough

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    A field in a model ha a type config that can transform the given value to a specified one. For example if you pass it "1" but you specified type of 'int' then it will convert to an integer 1. To use nested data in array or object form, you need to leave the type to it's default of 'auto'.
    Ok so I have this in my AModel:
    Code:
      config : {
        fields : ["Name",
          {
            name : "DataPoints",
            convert : function (value, record) {
              //Somehow convert the value array?
            }
          }],
    I noticed that the value was an array of objects, which is what I expected. But how would I convert that or use it in the chart? Here's the chart definition:
    Code:
      config : {
        themeCls : 'area1',
        theme : 'Demo',
        store : "astore",
        animate : true,
    
    
        axes : [
          {
            type : 'Numeric',
            grid : true,
            position : 'left',
            fields : ['i'],
    There's more there, but "i" doesn't exist because it's expecting a flat object {"name":"...", "date":"...", "i":"..."}, not {"name":"...", [{"date":"...", "i":"..."},{"date":"...", "i":"..."}]}
    Last edited by Kikketer; 12 Apr 2012 at 7:32 AM. Reason: Made the json objects valid

Thread Participants: 1

Tags for this Thread