PDA

View Full Version : [FIXED] [4.0.7] the column, line chart is empty.



DaeEun Yu
13 Nov 2011, 9:38 PM
REQUIRED INFORMATION




Ext version tested:

Ext 4.0.7
Browser versions tested against:

Chrome 15.0.874.120
FF8 (firebug 1.8.4 installed)
Description:

After upgrade to 4.0.7 from 4.0.2a the column, line chart series are empty
Steps to reproduce the problem:

Just run test case code
The result that was expected:

num series and num2 series are drawn
The result that occurs instead:

series are empty
Test Case:



Ext.define('Trend', {
extend: 'Ext.data.Model',
fields: [
{name: 'num', type: 'int'},
{name: 'num2', type: 'int'},
{name: 'collected_at', type: 'date'}
]
});


var store = Ext.create('Ext.data.Store', {
model: 'Trend'
});


var data = []
for (var i=0; i<1000; i++) {
d = new Date(2011, 10, 11, 0, 0);
d.setMinutes(d.getMinutes() + 1*i);
data.push( {
"num": Math.floor(Math.random() * 1000),
"num2": Math.floor(Math.random() * 1000),
"collected_at": d
});
}
console.log(data);
store.loadData(data);


var chart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),


width: 1000,
height: 250,


store: store,


shadow: false,


//animate: true,


legend: { position: 'top' },


axes: [
{
type: 'Numeric',
position: 'left',
fields: ['num', 'num2'],
minimum: 0,
grid: true,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
},
{
type: 'Time',
position: 'bottom',
fields: ['collected_at'],
dateFormat: 'H:i',
step: [Ext.Date.HOUR, 1],
label:{
rotate: { degrees: 340 }
}
}
],
series: [
{
type: 'column',
axis: 'left',
title: 'Num',
xField: 'collected_at',
yField: 'num',
showMarkers: false,
style: {
fill: 'yellow'
}
},
{
type: 'line',
axis: 'left',
title: 'Num2',
xField: 'collected_at',
yField: 'num2',
showMarkers: false,
style: {
'stroke-width': 1,
fill: 'red'
}
}
]


});









HELPFUL INFORMATION




Screenshot or Video:

29265

Debugging already done:

yes
Possible fix:



diff --git a/static/report/extjs-4.0.7/src/chart/series/Bar.js b/static/report/extjs-4.0.7/src/chart/series/Bar.js
index 4a98ae5..c2bd69c 100644
--- a/static/report/extjs-4.0.7/src/chart/series/Bar.js
+++ b/static/report/extjs-4.0.7/src/chart/series/Bar.js
@@ -387,7 +387,7 @@ Ext.define('Ext.chart.series.Bar', {
floorY--;
}
barAttr.y = floorY;
- barAttr.width = Math.floor(barAttr.width);
+ barAttr.width = Math.floor(barAttr.width) || 1;
barAttr.height = Math.floor(barAttr.height);
items.push({
series: me,

when apply large data set, barAttr.width will be 0.xxx and Math.floor() makes 0.xxx to 0.
so bar width become 0.


diff --git a/static/report/extjs-4.0.7/src/chart/series/Line.js b/static/report/extjs-4.0.7/src/chart/series/Line.js
index d288861..992e07b 100644
--- a/static/report/extjs-4.0.7/src/chart/series/Line.js
+++ b/static/report/extjs-4.0.7/src/chart/series/Line.js
@@ -436,7 +436,7 @@ Ext.define('Ext.chart.series.Line', {
xValue = record.get(me.xField);

// Ensure a value
- if (typeof xValue == 'string' || typeof xValue == 'object' && !Ext.isDate(xValue)
+ if (typeof xValue == 'string' || typeof xValue == 'object' && Ext.isDate(xValue)
//set as uniform distribution if the axis is a category axis.
|| boundXAxis && chartAxes.get(boundXAxis) && chartAxes.get(boundXAxis).type == 'Category') {
if (xValue in xValueMap) {


Time axis checking mistake?
Additional CSS used:

only default ext-all.css
Operating System:

Mac OSX 10.6.8

mitchellsimoens
14 Nov 2011, 10:39 AM
Thank you for the report

sagiv
21 Dec 2011, 5:15 AM
Whats up with this? i have the same issue and it's a magor one...

Edhilion
19 Mar 2012, 7:52 AM
Hi Team,

I tested the last 4.1 available version (4.1 RC1 (http://www.sencha.com/forum/showthread.php?187908-Ext-JS-4.1-RC1-is-Now-Available)) and this bug is still occuring.

However, it seems, for me, that the fix from DaeEun Yu works fine for me when I apply it in the 4.1 RC1 files.

If needed, I give you some code to test this fix. You simply have to :

Replace the original example/charts/Line.js code by the following one :


Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);

Ext.define('TestPoint', {
extend: 'Ext.data.Model',
fields: ['cvalue', 'date']
});

Ext.onReady(function () {
store1 = Ext.create('Ext.data.Store', {
model: 'TestPoint',
data: [
{ 'cvalue': 58, 'date': new Date(2012, 1, 1) },
{ 'cvalue': 63, 'date': new Date(2012, 1, 2) },
{ 'cvalue': 73, 'date': new Date(2012, 1, 3) },
{ 'cvalue': 78, 'date': new Date(2012, 1, 4) },
{ 'cvalue': 81, 'date': new Date(2012, 1, 5) }
]
});

var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
store1.loadData([
{ 'cvalue': 58, 'date': new Date(2012, 1, 1) },
{ 'cvalue': 63, 'date': new Date(2012, 1, 2) },
{ 'cvalue': 73, 'date': new Date(2012, 1, 3) },
{ 'cvalue': 78, 'date': new Date(2012, 1, 4) },
{ 'cvalue': 81, 'date': new Date(2012, 1, 5) }
]);
}
}],
items: {
xtype: 'chart',
style: 'background:#fff',
store: store1,
shadow: true,
theme: 'Category1',
axes: [
{
title: false,
type: 'Numeric',
position: 'left',
fields: ['cvalue'],
minimum: 0
},
{
title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'Y M d',
groupBy: 'year,month,day'
}
],
series: [
{
type: 'line',
xField: 'date',
yField: 'cvalue'
}
]
}
});
});



Replace the original example/charts/Line.html, l.11 code by the following one :


<script type="text/javascript" src="../../ext-all-debug.js"></script>

Replace the original ext-all-debug.js, l.95957 code by the following one :


if (typeof xValue == 'string' || typeof xValue == 'object' && Ext.isDate(xValue)


Replace the original ext-all-debug.js, l.95974 code by the following one :


if (typeof yValue == 'string' || typeof yValue == 'object' && Ext.isDate(yValue)

Warning ! This fix concerns only the bug reported for lines. I didn't test the one for bars.


Regards,

Sébastien.

chaya
28 Mar 2012, 6:58 AM
Hi Edhilion (http://www.sencha.com/forum/member.php?261492-Edhilion) ,

Thank for your fixe but plot are not well placed with this fix, (X axes scaling is not correct)

Another test case is availaible :
http://www.sencha.com/forum/showthread.php?191440-Time-axes-not-working-for-Ext.chart.Chart