View Full Version : Extending Bar Series(Ext.chart.series.Bar) causes wierd behavior

28 Jun 2012, 4:27 PM
I am upgrading from Ext 4.0.7 to 4.1.0 and experiencing some weird behavior and wanted to know if anyone else ran into this or had a solution.

Link to js filddle project with sample code.
Note if you change the framework to 4.0.7 it works.

Simplified version of my extended bar class

Ext.define("Ext.chart.series.extendedBar", {
extend: 'Ext.chart.series.Bar',
alias: 'series.extendedbar',
type: 'extendedbar'

Made a simple function call that makes the sample chart from the docs

testMethod = function (extended) {
//from API docs Sample
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data': 10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 1 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data': 20 },
{ 'name': 'metric six', 'data': 25 },
{ 'name': 'metric seven', 'data': 27 }

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
series: [{
type: extended ? 'extendedbar' : 'bar', //tell it to use my version of bar chart...
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
xField: 'name',
yField: 'data'

Then in a onload I call testMethod(true) and testMethod(false). You will notice the testMethod(false)(normal bar chart) works as expected while the testMethod(true) the bars are messed up(Metric 1, 2, 5, 6 are incorrect) the bars extend to the edge of the chart and are longer than they should be.

29 Jun 2012, 6:20 AM
Something else I figured out.

The Column Series also extends bar. So if it is able to extend it I do not see why my example is not working. Is there maybe somewhere I need to register it? Like I said above it worked in the previous version. From the column series source in the api docs it does not seem to override any functions it just has one property(column: true) and a few housekeeping properties(type, alternate class name ete), but it works

20 Jul 2012, 8:10 AM
The problem appears to be that Cartesian does a check for type == 'bar'

flipXY = me.type === 'bar' && me.column === false;
which prevents any extensions of bar from having the correct flipXY value