PDA

View Full Version : How to determine the field name in the tips renderer in a grouped bar/column series?



jtmac
30 Sep 2011, 9:09 AM
I am attempting to provide selective formatting of the tool tip when over a particular bar/column of a grouped series based on the field that is tied to the particular bar/column in the group.

In the code below, the grouped fields are in green.



{
"xtype" : "chart",
animate: true,
shadow: true,
"store" : "dbCustomerCurrentRevenue",
"theme" : "Base:gradients",
"legend" :
{
"labelFont" : "9px helvetica",
"position" : "top"
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['customer_revenue_total', 'customer_shipments', 'customer_total_mileage'],
minimum: 0,
grid: true,
title: 'Revenue ($1k), Mileage (1k mi), Shipments'
}, {
type: 'Category',
position: 'bottom',
fields: ['customer_name'],
title: 'Customers',
label: {
renderer: function(v) {
return Ext.String.ellipsis(v, 15, false);
},
font: '9px Arial',
rotate: {
degrees: 270
}
}
}]
,
series: [{
type: 'column',
axis: 'left',
highlight: true,
groupGutter: 10,
title: ['Revenue','Mileage','Shipments'],
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('customer_name') + ': ' + storeItem.get('customer_total_mileage') + ' mi.');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: ['customer_revenue_total','customer_total_mileage','customer_shipments'],
orientation: 'vertical',
"contrast" : true
},
xField: 'customer_name',
yField: ['customer_revenue_total','customer_total_mileage','customer_shipments']
}]
}


I tried to use the following code , which I expected to give me the field name of the field bound to the column along with its value (which works in the AreaBrowserStats example just fine (!?!),


renderer: function(storeItem, item) {
this.setTitle(item.storeField + ' - '
+ storeItem.get(item.storeField) + '%');
}




...BUT, the string returned (displayed in the toolTip) is "undefined - undefined%'. ??

Note: The following code:


renderer: function(storeItem, item) {
this.setTitle(storeItem.get('customer_name')
+ ': ' +storeItem.get('customer_total_mileage') + ' mi.');
}




Works fine and displays the customer_name value and customer_total_mileage value for the current store record just fine obviously is presenting the hardcoded customer_total_mileage for each column. My desire is that I can appropriately format/display the value for each field (revenue, mileage, shipments) based on which column I am hovering over.

Any ideas? What am I missing?

Thx in advance.

icode
18 Oct 2011, 1:07 PM
*bump*

icode
18 Oct 2011, 1:11 PM
Here is a hack to get it working.

http://www.learnsomethings.com/2011/05/23/getting-the-bar-series-segment-as-well-as-category-and-value-in-an-extjs-4-stacked-bar-chart/#comments

Here is a comment from one of the users on the blog.


Iím flabbergasted that such a hack is necessary to find the field name of a grouped bar like that. Letís hope the item gets this attribute in a near future release.

mario60
4 Jan 2012, 6:15 AM
Hello

I am surprised that we need to bother about colors just to get a basic features of column charts. Is there any other solutions?

To the sencha.com developers, shouldn't you fix it, if indeed there is not a better solution?

Thanks
Happy new year
mario

ps I just discovered that tips get messed up, when you have more items on a column than colors in your theme, and the same color occurs more than once. For later sections, you get the field which is associated with the first occurence of the color.

friend
4 Jan 2012, 9:52 AM
@mario60, regarding your color issues, see my post here (http://www.sencha.com/forum/showthread.php?163338-Dynamic-chart-theming&highlight=chart+base+theme) for how to fix the problem.

mario60
8 Jan 2012, 3:08 AM
hello

thks for your reply.
What works for me is at http://www.sencha.com/forum/showthread.php?131705-4.0.0-Charts-grouped-column-series-tip&p=711002&posted=1#post711002

thks mario