I am trying to plot a grouped bar chart in ExtJs similar to Sencha's example.
Can you use a field that is a field of the Child Model belonging to the chart's store's Model in the Series xField / yField?
If a "Golfer" Model has many "GolfClubs", is it possible to render a grouped bar chart showing bars for each GolfClub that belongs to a Golfer (each golfer's name will be an axis label)?
In sencha's example the store has all the data in the one record but I'm hoping it can bind automatically to a "hasmany" associated Model?
//Models
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'}
});
//end Models
//Local Data (just to get it working first)
function data(){
var golfers = [];
var rory = Ext.create('Golfer', {
GolferName : 'Rory'
});
var rorysDriver = Ext.create('GolfClub', {
ClubType : 'Driver',
Weight : 80
});
var rorysPutter = Ext.create('GolfClub', {
ClubType : 'Putter',
Weight : 60
});
var rorysSandWedge = Ext.create('GolfClub', {
ClubType : 'SandWedge',
Weight : 50
});
var rorysClubs = rory.golfClubs();
rorysClubs.add(rorysDriver);
rorysClubs.add(rorysPutter);
rorysClubs.add(rorysSandWedge);
golfers.push(rory);
var tiger = Ext.create('Golfer', {
GolferName : 'Tiger'
});
var tigersDriver = Ext.create('GolfClub', {
ClubType : 'Driver',
Weight : 85
});
var tigersPutter = Ext.create('GolfClub', {
ClubType : 'Putter',
Weight : 55
});
var tigersSandWedge = Ext.create('GolfClub', {
ClubType : 'SandWedge',
Weight : 58
});
var tigersClubs = tiger.golfClubs();
tigersClubs.add(tigersDriver);
tigersClubs.add(tigersPutter);
tigersClubs.add(tigersSandWedge);
golfers.push(tiger);
return golfers;
}
//end Local Data
//Local Store
function store1(){
var golferStore = Ext.create('Ext.data.Store', {
model: 'Golfer',
data : data()});
return golferStore;
}
//end Local Store
Ext.onReady(function () {
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']
}]
});
var win = Ext.create('Ext.Window', {
width: '100%',
height: '100%',
title: 'Breakdown of Golfers and their Clubs..',
autoShow: true,
layout: 'fit',
items: chart
});
});
Cheers, Tom.