PDA

View Full Version : Label placement on stacked column chart



ben.gillis
9 Feb 2012, 11:49 AM
The label for a stacked column chart is not placing the label over each column. Rather, it is placing it over the lowest section of each column.

Why doesn't the label position over the entire column?


label: {
display: 'outside',
'text-anchor': 'middle',
field: ['Category'],
renderer: function (v) {
var total = getCategoryTotal(v)
return (total);
},
orientation: 'horizontal'
}


...

function getCategoryTotal(category) {
var _total = 0;
$.each(_myData, function (i, c) {
if (c.Name == category) {
_total = c.SubtotalA+ c.SubtotalB;
return(false);
}
});
return (_total);
}


(Each column is two parts, SubTotalA and SubTotalB. SubTotalA is under SubTotalB in each column. The label ends up over SubTotalA, not over SubTotalB at the top of the column).

ben.gillis
13 Jul 2012, 10:02 PM
This and

(http://www.sencha.com/forum/showthread.php?132179-4.0.0-Stacked-Column-chart-label-issue&highlight=label+stacked+bar+chart)http://www.sencha.com/forum/showthread.php?132179-4.0.0-Stacked-Column-chart-label-issue&highlight=label+stacked+bar+chart
(http://www.sencha.com/forum/showthread.php?132179-4.0.0-Stacked-Column-chart-label-issue&highlight=label+stacked+bar+chart)
and

http://www.sencha.com/forum/showthread.php?211456-Stacked-Bar-Labels&highlight=label+stacked+bar+chart
(http://www.sencha.com/forum/showthread.php?211456-Stacked-Bar-Labels&highlight=label+stacked+bar+chart)
and I could put more of them up.

unanswered for months.


The label renderer function is useless. It passes ONLY the *value* of a field without any other context for control e.g.


1. In the stacked bar, the label should be a TOTAL of all the bars - over the bar- and no other bar should have a label.

2. Prevent label overlap when a bar in the stack is too short to have a label (rather, a tooltip can display that value).

or something as simple as

3. Is there only 1 bar or more than 1 stacked in this particular column? (Because, I can put a label on a very short bar as long as it's by itself in a column - so that it doesn't possibly overlap the label of another bar in the column).

and more


Labels are important to graphs, yet the more I look the more I see unanswered label questions everywhere and effectively useless examples with poor documentation.

This is far too basic to have no answers available. Yet, this post indicates you need PREMIUM SUPPORT FOR A *LABEL*?

http://www.sencha.com/forum/showthread.php?146204-stacked-barchart-gt-label-each-barsegment&highlight=label+stacked+bar+chart


(http://www.sencha.com/forum/showthread.php?146204-stacked-barchart-gt-label-each-barsegment&highlight=label+stacked+bar+chart)The very reason I have not bought premium support: Sencha's documentation is poor and the very basics aren't answered. One can't even follow a simple example (e.g. a data store reader has a 'type' in the examples, where are the options and explanations for that under data store, or reader? Many of the examples are like that.). It comes across as deliberately obscuring simple information to upsell into premium. So, what'll I get in premium support, more of the same?

Why not offer a per-incident fixed price break/fix professional service? (All I see is hourly. And, honestly, it really motivates me to try other graphing packages first vs. something this basic requiring premium support).

I'm better off using the time & effort in one of these other graphing packages vs. scrounging around for a stupid label on a stacked bar chart - that apparently many more posters got no answer either - or told its on the premium support plan.

http://www.trirand.net/demochartaspnetmvc.aspx

(http://www.trirand.net/demochartaspnetmvc.aspx)http://www.highcharts.com/demo/

(http://www.highcharts.com/demo/)http://wijmo.com/demos/
(http://wijmo.com/demos/)

kevin.chen
17 Oct 2012, 4:53 PM
Would you please upload entire test case?

Thanks

kevin.chen
17 Oct 2012, 6:52 PM
The label of Ext column is designed for each staked column, every stacked column has its own lable, the proposal you asked to display the label for the the entire column of staked column is good idea. I can add a feature request for you. if I have time, I can create a workaround for you.


since I did not receive your response, I suppose the yField: ['category', 'category2']

so, your label should be defined as following in order to show the whole label data



label: {
display: 'outside',
'text-anchor': 'middle',
field: ['Category','Catetory2'],
orientation: 'horizontal'
}

kevin.chen
17 Oct 2012, 7:02 PM
since you have two fields, the renderer doesn't make sense, right?

kevin.chen
17 Oct 2012, 7:20 PM
if you use stacked column chart and want to have a renderer for different stacked column, I have an override for you



Ext.define('mypatch', {
override: 'Ext.chart.series.Column',
onPlaceLabel: function(label, storeItem, item, i, display, animate, j, index) {
// Determine the label's final position. Starts with the configured preferred value but
// may get flipped from inside to outside or vice-versa depending on space.
var me = this,
opt = me.bounds,
groupBarWidth = opt.groupBarWidth,
column = me.column,
chart = me.chart,
chartBBox = chart.chartBBox,
resizing = chart.resizing,
xValue = item.value[0],
yValue = item.value[1],
attr = item.attr,
config = me.label,
rotate = config.orientation == 'vertical',
field = [].concat(config.field),
renderer = [].concat(config.renderer),
format = config.renderer[index],
text = format(storeItem.get(field[index])),
size = me.getLabelSize(text),
width = size.width,
height = size.height,
zero = opt.zero,
outside = 'outside',
insideStart = 'insideStart',
insideEnd = 'insideEnd',
offsetX = 10,
offsetY = 6,
signed = opt.signed,
x, y, finalAttr;


label.setAttributes({
text: text
});


label.isOutside = false;
if (column) {
if (display == outside) {
if (height + offsetY + attr.height > (yValue >= 0 ? zero - chartBBox.y : chartBBox.y + chartBBox.height - zero)) {
display = insideEnd;
}
} else {
if (height + offsetY > attr.height) {
display = outside;
label.isOutside = true;
}
}
x = attr.x + groupBarWidth / 2;
y = display == insideStart ?
(zero + ((height / 2 + 3) * (yValue >= 0 ? -1 : 1))) :
(yValue >= 0 ? (attr.y + ((height / 2 + 3) * (display == outside ? -1 : 1))) :
(attr.y + attr.height + ((height / 2 + 3) * (display === outside ? 1 : -1))));
}
else {
if (display == outside) {
if (width + offsetX + attr.width > (yValue >= 0 ? chartBBox.x + chartBBox.width - zero : zero - chartBBox.x)) {
display = insideEnd;
}
}
else {
if (width + offsetX > attr.width) {
display = outside;
label.isOutside = true;
}
}
x = display == insideStart ?
(zero + ((width / 2 + 5) * (yValue >= 0 ? 1 : -1))) :
(yValue >= 0 ? (attr.x + attr.width + ((width / 2 + 5) * (display === outside ? 1 : -1))) :
(attr.x + ((width / 2 + 5) * (display === outside ? -1 : 1))));
y = attr.y + groupBarWidth / 2;
}
//set position
finalAttr = {
x: x,
y: y
};
//rotate
if (rotate) {
finalAttr.rotate = {
x: x,
y: y,
degrees: 270
};
}
//check for resizing
if (animate && resizing) {
if (column) {
x = attr.x + attr.width / 2;
y = zero;
} else {
x = zero;
y = attr.y + attr.height / 2;
}
label.setAttributes({
x: x,
y: y
}, true);
if (rotate) {
label.setAttributes({
rotate: {
x: x,
y: y,
degrees: 270
}
}, true);
}
}
//handle animation
if (animate) {
me.onAnimate(label, { to: finalAttr });
}
else {
label.setAttributes(Ext.apply(finalAttr, {
hidden: false
}), true);
}
}
})

kevin.chen
17 Oct 2012, 7:21 PM
in this case, you label should be defined as following




label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: ['data1','data2'],
renderer: [function(data1){return 2}, function(data2){return 3}],
orientation: 'vertical',
color: '#333'
},

kevin.chen
17 Oct 2012, 7:23 PM
and all of you column label renderer have to be an array after apply this override even not stacked column

ben.gillis
18 Oct 2012, 7:31 AM
Yes, I am waiting for a Standard Support confirmation from Sencha. Then, will provide a URL to an example of what we're trying to fix: getting a total label over a stacked bar.

kevin.chen
22 Oct 2012, 12:24 PM
the override I provided is for Extjs 4.1.2