PDA

View Full Version : [FIXED] 4.0.4 Pie Chart should display blank canvas when store load empty dataset



ext-spring-mvc
6 Jul 2011, 5:49 AM
REQUIRED INFORMATION


Ext version tested:


Ext 4.0.4
Ext 4.0.5


Browser versions tested against:


____
IE8


Description:


I remember that extjs3, if store.load empty data, the
chart will redraw as empty. However, extjs4, the chart itself remains as
previous, only legend disappears. I don't know if this behavior is bug or extjs4 has different
behavior as per design. any thought?



btw, here is the json data returned from server, which I expect chart will redraw and display a blank canvas:

{"data":[],"success":true,"msg":"get chart data successful!"}


Steps to reproduce the problem:


provide a chart and json store, reload the store and let server side returns empty data set


The result that was expected:


the chart should display a blank canvas


The result that occurs instead:


legend disappears and the chart itself remains as previous


Test Case:

pie.js



/*

This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact: http://www.sencha.com/contact

Commercial Usage
Licensees holding valid commercial licenses may use this file in accordance with the Commercial Software License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Sencha.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

*/
Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');

Ext.onReady(function () {
store1.loadData(generateData(6, 20, true));

var donut = false,
panel1 = Ext.create('widget.panel', {
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
store1.loadData(generateData(6, 20, false));
}
}, {
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: store1,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store1.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});
});




example-data.js




/*

This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact: http://www.sencha.com/contact

Commercial Usage
Licensees holding valid commercial licenses may use this file in accordance with the Commercial Software License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Sencha.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

*/
Ext.require(['Ext.data.*']);

Ext.onReady(function() {

window.generateData = function(n, floor, notEmpty){
if (!notEmpty) { return []};
var data = [],
p = (Math.random() * 11) + 1,
i;

floor = (!floor && floor !== 0)? 20 : floor;

for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};

window.generateDataNegative = function(n, floor){
var data = [],
p = (Math.random() * 11) + 1,
i;

floor = (!floor && floor !== 0)? 20 : floor;

for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(((Math.random() - 0.5) * 100), floor),
data2: Math.floor(((Math.random() - 0.5) * 100), floor),
data3: Math.floor(((Math.random() - 0.5) * 100), floor),
data4: Math.floor(((Math.random() - 0.5) * 100), floor),
data5: Math.floor(((Math.random() - 0.5) * 100), floor),
data6: Math.floor(((Math.random() - 0.5) * 100), floor),
data7: Math.floor(((Math.random() - 0.5) * 100), floor),
data8: Math.floor(((Math.random() - 0.5) * 100), floor),
data9: Math.floor(((Math.random() - 0.5) * 100), floor)
});
}
return data;
};

window.store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData()
});
window.storeNegatives = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateDataNegative()
});
window.store3 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData()
});
window.store4 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData()
});
window.store5 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData()
});


});



HELPFUL INFORMATION


Screenshot or Video:


attached


See this URL for live test case: http://


Debugging already done:


none


Possible fix:


not provided


Additional CSS used:


only default ext-all.css
custom css (include details)


Operating System:


________
WinXP Pro

ext-spring-mvc
7 Jul 2011, 6:35 AM
do I have to use support credit everytime so as to get a response from sencha? :-/

edspencer
7 Jul 2011, 11:04 AM
do I have to use support credit everytime so as to get a response from sencha? :-/

No, but you only filed this post 24 hours before making your second post - we don't make any claims around a 24 hour turnaround in the bug forum.

If you can provide a test case that we can reproduce I will move this into the bug tracker

ext-spring-mvc
8 Jul 2011, 7:31 AM
No, but you only filed this post 24 hours before making your second post - we don't make any claims around a 24 hour turnaround in the bug forum.

If you can provide a test case that we can reproduce I will move this into the bug tracker

I understand that a test case will be helpful to locate the bug, however I am not a QA for sencha. And it's not my job to help you fixing your product and then charge me for the improved product.

pick the pie chart example, made the following change:

in Pie.js
line 19: store1.loadData(generateData(6, 20, true));
line 32: store1.loadData(generateData(6, 20, false));

in example-data.js
line 19: window.generateData = function(n, floor, notEmpty){
if (!notEmpty) { return []};


reload the example, you will see the pie chart, now click the "reload data" button, which load empty data []. the chart legend will disappear, but the chart itself is still as same as previous.

ext-spring-mvc
11 Jul 2011, 6:29 AM
any update?

edspencer
11 Jul 2011, 10:06 AM
I tried reproducing your description of a test case but the line numbers don't line up (I'm looking at the Pie chart example (http://dev.sencha.com/deploy/ext-4.0.0/examples/charts/Pie.html)). This is why we ask for a block of test case code - it will enable us to turn this round much faster.

All I need to see is a block of code that I can copy/paste into a page that contains a vanilla Ext JS 4 instance and demonstrates the problem

ext-spring-mvc
11 Jul 2011, 12:14 PM
I tried reproducing your description of a test case but the line numbers don't line up (I'm looking at the Pie chart example (http://dev.sencha.com/deploy/ext-4.0.0/examples/charts/Pie.html)). This is why we ask for a block of test case code - it will enable us to turn this round much faster.

All I need to see is a block of code that I can copy/paste into a page that contains a vanilla Ext JS 4 instance and demonstrates the problem

are you looking into your source code or the output of browser? did you count the comments?

too many questions, please act

pie.js



/*

This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact: http://www.sencha.com/contact

Commercial Usage
Licensees holding valid commercial licenses may use this file in accordance with the Commercial Software License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Sencha.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

*/
Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');

Ext.onReady(function () {
store1.loadData(generateData(6, 20, true));

var donut = false,
panel1 = Ext.create('widget.panel', {
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
store1.loadData(generateData(6, 20, false));
}
}, {
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: store1,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store1.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});
});






example-data.js




/*

This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact: http://www.sencha.com/contact

Commercial Usage
Licensees holding valid commercial licenses may use this file in accordance with the Commercial Software License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Sencha.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

*/
Ext.require(['Ext.data.*']);

Ext.onReady(function() {

window.generateData = function(n, floor, notEmpty){
if (!notEmpty) { return []};
var data = [],
p = (Math.random() * 11) + 1,
i;

floor = (!floor && floor !== 0)? 20 : floor;

for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};

window.generateDataNegative = function(n, floor){
var data = [],
p = (Math.random() * 11) + 1,
i;

floor = (!floor && floor !== 0)? 20 : floor;

for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(((Math.random() - 0.5) * 100), floor),
data2: Math.floor(((Math.random() - 0.5) * 100), floor),
data3: Math.floor(((Math.random() - 0.5) * 100), floor),
data4: Math.floor(((Math.random() - 0.5) * 100), floor),
data5: Math.floor(((Math.random() - 0.5) * 100), floor),
data6: Math.floor(((Math.random() - 0.5) * 100), floor),
data7: Math.floor(((Math.random() - 0.5) * 100), floor),
data8: Math.floor(((Math.random() - 0.5) * 100), floor),
data9: Math.floor(((Math.random() - 0.5) * 100), floor)
});
}
return data;
};

window.store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData()
});
window.storeNegatives = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateDataNegative()
});
window.store3 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData()
});
window.store4 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData()
});
window.store5 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData()
});


});

ext-spring-mvc
13 Jul 2011, 8:28 AM
any update?

ext-spring-mvc
15 Jul 2011, 1:01 PM
update?

germanicus
15 Jul 2011, 3:46 PM
Confirmed.

ext-spring-mvc
18 Jul 2011, 8:22 AM
Confirmed.

thanks! wish it could get into next commercial release.

ext-spring-mvc
29 Jul 2011, 7:21 AM
this issue is still open in 4.0.5

edspencer
29 Jul 2011, 10:23 AM
this issue is still open in 4.0.5

Yes, we'll mark it closed here once it's fixed