PDA

View Full Version : Ext.chart.Legend - reverse items order



adube
14 Dec 2012, 5:58 AM
Hi,

I have a stacked Column Chart, which displays the first item at the bottom of a bar and the last on top. My issue is that when displaying a legend to the right (or left) the first items are displayed in a reversed order: first item is on top and last at the bottom. This is confusing to the eye.

Looking at the code, there doesn't seem to be an option to reverse the legend items order. Other than making a dirty hack, like overriding the private createItems method in a custom class, is there a better way to accomplish this ?

http://docs.sencha.com/ext-js/4-1/source/Legend.html#Ext-chart-Legend-method-createItems

Thanks,

Alexandre

adube
4 Jan 2013, 7:31 AM
Any hint about this issue ?

adube
8 Jan 2013, 8:26 AM
I've got not other choice to make the hack. Here's an example of use follow by the hack in question in case someone is interested.



Ext.create (http://docs.sencha.com/ext-js/4-1/#!/api/Ext-method-create)('Ext.chart.Chart (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.Chart)',{
renderTo:Ext.getBody (http://docs.sencha.com/ext-js/4-1/#!/api/Ext-method-getBody)(),
width:500,
height:300,
animate:true,
store: store,
shadow:true,
theme:'Category1',
legend:{
position:'right',
reverseFields: true // <---
},
axes:...,
series:...
});




/**
* @cfg {Boolean} reverseFields
* Whether to create the legend item fields in reverse positions or not.
*/
Ext.chart.Legend.prototype.reverseFields = false;


// NOTE: This is a private method complete override. Tested with 4.1.1a.
Ext.chart.Legend.prototype.createItems = function() {
var me = this,
chart = me.chart,
seriesItems = chart.series.items,
ln, series,
surface = chart.surface,
items = me.items,
padding = me.padding,
itemSpacing = me.itemSpacing,
spacingOffset = 2,
maxWidth = 0,
maxHeight = 0,
totalWidth = 0,
totalHeight = 0,
vertical = me.isVertical,
math = Math,
mfloor = math.floor,
mmax = math.max,
index = 0,
i = 0,
len = items ? items.length : 0,
reverseFields = me.reverseFields,
x, y, spacing, item, bbox, height, width,
fields, field, nFields, j;


//remove all legend items
if (len) {
for (; i < len; i++) {
items[i].destroy();
}
}
//empty array
items.length = [];
// Create all the item labels, collecting their dimensions and positioning each one
// properly in relation to the previous item
var createField = function(field, j, k) {
item = new Ext.chart.LegendItem({
legend: me,
series: series,
surface: chart.surface,
yFieldIndex: j
});
bbox = item.getBBox();


//always measure from x=0, since not all markers go all the way to the left
width = bbox.width;
height = bbox.height;


if (reverseFields) {
if (i + k === 0) {
spacing = vertical ? padding + height / 2 : padding;
}
else {
spacing = itemSpacing / (vertical ? 2 : 1);
}
} else {
if (i + j === 0) {
spacing = vertical ? padding + height / 2 : padding;
}
else {
spacing = itemSpacing / (vertical ? 2 : 1);
}
}
// Set the item's position relative to the legend box
item.x = mfloor(vertical ? padding : totalWidth + spacing);
item.y = mfloor(vertical ? totalHeight + spacing : padding + height / 2);


// Collect cumulative dimensions
totalWidth += width + spacing;
totalHeight += height + spacing;
maxWidth = mmax(maxWidth, width);
maxHeight = mmax(maxHeight, height);


items.push(item);
};


for (i = 0, ln = seriesItems.length; i < ln; i++) {
series = seriesItems[i];
if (series.showInLegend) {
fields = [].concat(series.yField);
var k = 0;
if (reverseFields) {
for (j = fields.length - 1, len = 0; j >= len; j--) {
createField(fields[j], j, k);
k++;
}
} else {
for (j = 0, nFields = fields.length; j < nFields; j++) {
createField(fields[j], j, k);
}
}
}
}


// Store the collected dimensions for later
me.width = mfloor((vertical ? maxWidth : totalWidth) + padding * 2);
if (vertical && items.length === 1) {
spacingOffset = 1;
}
me.height = mfloor((vertical ? totalHeight - spacingOffset * spacing : maxHeight) + (padding * 2));
me.itemHeight = maxHeight;
};

chan111
2 Dec 2014, 7:00 AM
Thanks for sharing. Custom hack works fine still in 4.2.

adube
2 Dec 2014, 7:19 AM
Thanks for replying as well, chan111. Would you please mark the post containing the snippet as best answer to the thread ?Again, thanks. It's always nice to see that a thread this old can still be of use.

adube
2 Dec 2014, 7:20 AM
Nevermind, I was able to mark the anwser as best :)