PDA

View Full Version : How to create grouped bar chart using "Parent has Children" Model?



thomas.conere
10 Jul 2013, 3:23 AM
Hi All,

I was hoping to create a grouped bar chart with a store who's Model has a parent-child relationship.

I would like to show all parent node names on yaxis as labels and then plot their children as bars (grouped per parent).

For example: A "Golfer" has many "GolfClubs". I want to show bar series contrasting each of the golfclubs weight grouped by golfers' names.




Ext.define('GolfClub', {extend : 'Ext.data.Model',fields : [{ name : 'ClubType', type : 'string'}, { name : 'Weight', type : 'float'}]});Ext.define('Golfer', { extend : 'Ext.data.Model', requires: ['GolfClub'], fields : [{ name : 'GolferName', type : 'string' }], hasMany: {model: 'GolfClub', name: 'golfClubs'} });


I was hoping in my series to be able to do this:



var chart = Ext.create('Ext.chart.Chart', { style: 'background:#fff', animate: true, shadow: true, store: store1(), legend: { position: 'right' }, axes: [{ type: 'Numeric', position: 'bottom', fields: ['golfClubs.Weight'] }, { type: 'Category', position: 'left', fields: ['GolferName'], title: 'Golfer' }], series: [{ type: 'bar', axis: ['bottom'], xField: ['golfClubs.Weight'],//Is that how you bind to child record? yField: ['GolferName'] }] });


It seems you cannot reference the child object in the series xField as 'golfClubs.Weight'. I have tried 'golfClubs().Weight' also but no joy.

Essentially what I am asking: can this type of chart; with it's hasmany associated model, be done out-of-the-box or must I write my own series extension that merges both models into one model as I have seen people do for grids?

If anyone can spare half a minute to look at this scenario and indicate that it needs custom code on my part or that my config is wrong please let me know.

I have posted full code here:

http://stackoverflow.com/questions/17531482/extjs-how-to-create-grouped-bar-chart-using-associated-model-as-store-data-eg

(http://stackoverflow.com/questions/17531482/extjs-how-to-create-grouped-bar-chart-using-associated-model-as-store-data-eg) Regards,
Tom.

thomas.conere
10 Jul 2013, 7:43 AM
Has this been done before? Struggling to find an example that uses 2 related Models...

slemmon
14 Jul 2013, 8:16 PM
The chart's store will need to have all of the data / records populated within the store (-vs- the store being populated with parent records with each having its own associated set of child records). So, I'm afraid what you're wanting to do you can't do directly.

thomas.conere
15 Jul 2013, 1:35 AM
Thank you Seth for taking the time to look at this one, much appreciated.

I am going to merge the fields from both parent and child model into a new model and see how that goes.

Best Regards,
Tom.