PDA

View Full Version : [FIXED][PR3] Scaling problem with stacked column/bar charts



garydp16
11 Mar 2011, 6:40 AM
Charts to not appear to be scaling properly when "stacked" is true. Here is some sample code. The column total should be 48.



Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');

Ext.onReady(function () {
var colors1 = ['#00cc00', '#ffcc00', '#ffff00', '#00ffff', '#ff0000'];

var store = new Ext.data.JsonStore({
fields: ['monthYear', 'zeroToThree', 'threeToSix', 'sixToNine', 'nineToTwelve', 'greaterThanTwelve'],
data: [
{monthYear: 'Nov-10', zeroToThree: 27, threeToSix: 11, sixToNine: 4, nineToTwelve: 2, greaterThanTwelve: 4}
]
});
var chart1a = new Ext.chart.Chart({
id: 'chart1a',
store: store,
axes: [{
type: 'Category',
position: 'bottom',
fields: ['monthYear']
}, {
type: 'Numeric',
position: 'left',
fields: ['zeroToThree', 'threeToSix', 'sixToNine', 'nineToTwelve', 'greaterThanTwelve'],
title: 'Units',
minimum: 0,
maximum: 80,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true
}],
series: [{
type: 'column',
axis: 'left',
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors1[i % colors1.length];
return barAttr;
},
xField: 'monthYear',
yField: ['zeroToThree', 'threeToSix', 'sixToNine', 'nineToTwelve', 'greaterThanTwelve'],
stacked: true
}]
});

var panel1 = Ext.create('widget.panel', {
width: 300,
height: 400,
title: 'Shipped not Accepted',
renderTo: Ext.getBody(),
layout: 'fit',
items: chart1a
});
});

garydp16
15 Mar 2011, 10:09 AM
25150

Seana
30 Mar 2011, 6:47 AM
The issue here is with scale, and it's a 2 headed beast. In the StackedBar example (http://dev.sencha.com/deploy/ext-4.0-pr5/examples/charts/StackedBar.html) it can be seen where the "longest" bar should be 2008 at 146,730,000 for a maximum, yet it's bar is actually a pixel further than the 160M tick on the axis.

the issue here is that the Axis sets it's maximum to 160,000,000 the series however is setting it's scale based on the 146,730,000 value of the largest data set which results in differing draw scales (the axis at 0.00000411875 and the series rounding it's scale to 0.000004491242418046753 in Chrome v10) this is resulting in a difference of ~12.66474 pixels at the smallest value(34M in the 2005 data set) and a 54.6558125 pixel difference at the largest value (146,730,000 the complete 2008 data set)

This happens only in stacking because scale is reassigned

from



scale = (column ? bbox.height - ypadding * 2 : bbox.width - xpadding * 2) / (maxY - minY);

(line 207 of /src/charts/series/Bar.js)

to



plus = mmax.apply(math, total[0]);
minus = mmax.apply(math, total[1]);
scale = (column ? bbox.height - ypadding * 2 : bbox.width - xpadding * 2) / (plus + minus);

(lines 224-226 of /src/charts/series/Bar.js)

minus = 146730000
maxY = 160000000


This is based on the PR5 samples, though it is the same as it was in the previous pr's

Hope that helps.

Seana
30 Mar 2011, 7:19 AM
PR5

http://www.sencha.com/forum/attachment.php?attachmentid=25420&d=1301498234

after modifying stacked code to use the minY/maxY variables.

http://www.sencha.com/forum/attachment.php?attachmentid=25421&d=1301498235

not sure it's a 100% correct modification, but I believe it's a quick and dirty way to show the intended rendering.

Jamie Avins
30 Mar 2011, 7:51 AM
This has been fixed for the next release.