Does Charts 2 support the model/stores?

[Kikketer]

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:

    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:

{ 
  '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.

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)?

[mitchellsimoens]

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

[Kikketer]

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

[mitchellsimoens]

I would agree and you can still pit out nested data, just cannot use associations.

[Kikketer]

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:

{
  "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?

[mitchellsimoens]

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'.

[Kikketer]

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:

  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:

  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":"..."}]}