PDA

View Full Version : [CLOSED] Getting infinity height / width in vertical / horizontal bar series in chart



silent
28 Oct 2011, 3:46 AM
REQUIRED INFORMATION

Ext version tested:

Ext 4.0.2a
Ext 4.0.7

Browser versions tested against:

Chrome 15.0.874.106 m
FF 7.0.1
(firebug 1.8.3 installed)

Description:

Vertical bars are not drawn, because x value and width value are 'Infinity'. Same by changing to horizontal bar series.

Steps to reproduce the problem:


Create an Ext.chart.Chart with series of type bar.

The result that was expected:


A drawn chart with x/y axes and bar series.

The result that occurs instead:

A drawn chart without bars, only all labels are shown along y-axis.
Firebug raises three warnings:

Unexpected value Infinity parsing the attribute width.
return Function.prototype....ctor.apply(Function.prototype, args); ext-all-debug.js (Line 400)
Unexpected value Infinity parsing the attribute width.
Unexpected value Infinity parsing the attribute x.


Test Case:



// init store
Ext.create('Dashboard.store.Datas', {
storeId: 'storeDatas'
});

// Where the error raises
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 1060,
height: 373,
animate: false,
store: Ext.getStore('storeDatas'),
axes: [{
type: 'Category',
position: 'bottom',
fields: ['day'],
title: 'Last 10 days'
}, {
type: 'Numeric',
position: 'left',
fields: ['count'],
title: 'Number Count',
grid: true
}],
//Add Bar series.
series: [{
type: 'bar',
axis: 'bottom',
xField: 'day',
yField: 'count',
highlight: true,
label: {
display: 'insideEnd',
field: 'count',
orientation: 'vertical',
color: '#333',
'text-anchor': 'middle'
}
}]
});

// Model:
Ext.define('Dashboard.model.Data', {
extend: 'Ext.data.Model',

fields: [
{ type: Ext.data.Types.STRING, name: 'day' },
{ type: Ext.data.Types.INT, name: 'count' }
]
});

// Store:
Ext.define('Dashboard.store.Datas', {
extend: 'Ext.data.Store',
model: 'Dashboard.model.Data',

data: [
{ day: 'Th, 2011-10-26', count: 215 },
{ day: 'We, 2011-10-25', count: 185 },
{ day: 'Tu, 2011-10-24', count: 300 },
{ day: 'Mo, 2011-10-23', count: 254 },
{ day: 'Su, 2011-10-22', count: 215 },
{ day: 'Sa, 2011-10-21', count: 102 },
{ day: 'Fr, 2011-10-20', count: 58 },
{ day: 'Th, 2011-10-19', count: 212 },
{ day: 'We, 2011-10-18', count: 275 },
{ day: 'Tu, 2011-10-17', count: 275 }
]
});


HELPFUL INFORMATION

Screenshot:

28935


Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

Win7

mitchellsimoens
2 Nov 2011, 10:28 AM
This is working for me on 4.0.7:


// Model:
Ext.define('Dashboard.model.Data', {
extend: 'Ext.data.Model',

fields: [
{ type: Ext.data.Types.STRING, name: 'day' },
{ type: Ext.data.Types.INT, name: 'count' }
]
});

// Store:
Ext.define('Dashboard.store.Datas', {
extend: 'Ext.data.Store',
model: 'Dashboard.model.Data',

data: [
{ day: 'Th, 2011-10-26', count: 215 },
{ day: 'We, 2011-10-25', count: 185 },
{ day: 'Tu, 2011-10-24', count: 300 },
{ day: 'Mo, 2011-10-23', count: 254 },
{ day: 'Su, 2011-10-22', count: 215 },
{ day: 'Sa, 2011-10-21', count: 102 },
{ day: 'Fr, 2011-10-20', count: 58 },
{ day: 'Th, 2011-10-19', count: 212 },
{ day: 'We, 2011-10-18', count: 275 },
{ day: 'Tu, 2011-10-17', count: 275 }
]
});

Ext.onReady(function() {

// init store
Ext.create('Dashboard.store.Datas', {
storeId: 'storeDatas'
});

// Where the error raises
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 1060,
height: 373,
animate: false,
store: Ext.getStore('storeDatas'),
axes: [{
type: 'Category',
position: 'bottom',
fields: ['day'],
title: 'Last 10 days'
}, {
type: 'Numeric',
position: 'left',
fields: ['count'],
title: 'Number Count',
grid: true
}],
//Add Bar series.
series: [{
type: 'bar',
axis: 'bottom',
xField: 'day',
yField: 'count',
highlight: true,
label: {
display: 'insideEnd',
field: 'count',
orientation: 'vertical',
color: '#333',
'text-anchor': 'middle'
}
}]
});

});

silent
3 Nov 2011, 12:21 AM
Hm, strange... for now in the 4.0.7 it works for me, too. But on 4.0.2a it crashes.

So you can close this thread, it's solved in 4.0.7!

mitchellsimoens
3 Nov 2011, 4:58 AM
Hm, strange... for now in the 4.0.7 it works for me, too. But on 4.0.2a it crashes.

So you can close this thread, it's solved in 4.0.7!

Let me know if things don't work still and need me to reopen.