PDA

View Full Version : Column Charts - Grouping Fields



Brett89
16 Apr 2012, 7:26 PM
I want to present a column chart that has a Number left axis, and a Category bottom axis. The chart shows work done in each month. Ideally, my data structure will look like this:



[
{
Month: 'January',
ID: 1,
Name: 'Foo',
Value: 1
},
{
Month: 'January',
ID: 2,
Name: 'Bar',
Value: 4
},
{
Month: 'February',
ID: 1,
Name: 'Foo',
Value: 2
},
{
Month: 'February',
ID: 2,
Name: 'Bar',
Value: 5
},
{
Month: 'March',
ID: 1,
Name: 'Foo',
Value: 3
},
{
Month: 'March',
ID: 2,
Name: 'Bar',
Value: 6
}
]


With this data structure, is there any way to get the 3 months down the bottom (January, February, March), with each month having 2 columns (one for ID 1 Values and another for ID 2 Values)? Currently I've only been able to achieve repeating the months (January, January, February, February, March, March) with 1 column in each month.

Thank you for your time.

scottmartin
17 Apr 2012, 5:55 AM
Have you seen this example:
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/charts/GroupedBar.html

Regards,
Scott.

Brett89
17 Apr 2012, 4:54 PM
Yes, but that does not work with my "ideal" data structure. I currently have my chart working, but in a very hacky way. I had to use this data structure:



[
{
Month: 'January',
'Value-1': 1,
'Value-2': 4
},
{
Month: 'February',
'Value-1': 2,
'Value-2': 5
},
{
Month: 'March',
'Value-1': 3,
'Value-2': 6
}
]


And then on store load I'm doing some hacky stuff to change the model's fields, because the number of "Value-x" properties is dynamic. I also have to extract the ID from "Value-x".

sissonb
17 Apr 2012, 5:02 PM
What about this structure?


[
{
Month: 'January',
Values:[{"1":1},{"2":4}]
},
{
Month: 'February',
Values:[{"1":2},{"2":5}]
},
{
Month: 'March',
Values:[{"1":3},{"2":6}]
}
]


or just


[
{
Month: 'January',
Values:[1,4]
},
{
Month: 'February',
Values:[2,5]
},
{
Month: 'March',
Values:[3,6]
}
]

Brett89
17 Apr 2012, 5:18 PM
That looks promising... Can you help me out here? What would my axis and series look like? Currently I have:



...
axes: [
{
title: 'Value',
type: 'Numeric',
position: 'left',
fields: 'Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: 'Month'
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
xField: 'Month',
yField: 'Values'
}
]
...


Is there anything I need to change in my model or store as well?

Thanks.