PDA

View Full Version : [DUP] Ext.chart.Legend never rendered afterwards if the chart store is initial empty



msinn
28 Nov 2012, 12:35 AM
REQUIRED INFORMATION Ext version tested:

Ext 4.1.3

Browser versions tested against:

FF17

DOCTYPE tested against:

DTD XHTML 1.0 Transitional

Description:

Tested with Ext.chart.series.Pie, if the chart store has initial no data, the legend is after a dataLoad never rendered.

Steps to reproduce the problem:

see working example

The result that was expected:

see working example

The result that occurs instead:

see working example

Test Case:
Ext.require(['Ext.chart.*',
'Ext.Window',
'Ext.fx.target.Sprite',
'Ext.layout.container.Fit',
'Ext.window.MessageBox',
'Ext.data.*']);
console.log('start');

Ext.onReady(function () {
console.log('start1');

Ext.define('SingleM', {
extend: 'Ext.data.Model',
idProperty: 'Zt',
fields: [
{
name: 'Zt',
dateFormat: 'd.m.Y H:i',
type: 'date'
},
{
name: 'Bm',
type: 'int'
}
]
});

Ext.define('PieM', {
extend: 'Ext.data.Model',
//idProperty: 'Name',
fields: [
{
name: 'Name',
type: 'string'
},
{
name: 'Bm',
type: 'int'
}
]
});

var data1 = [{"Zt":"22.11.2012 06:50","Bm":"6"},
{"Zt":"22.11.2012 07:00","Bm":"13"},{"Zt":"22.11.2012 07:10","Bm":"19"},
{"Zt":"22.11.2012 07:20","Bm":"25"},{"Zt":"22.11.2012 07:30","Bm":"31"},
{"Zt":"22.11.2012 07:40","Bm":"37"},{"Zt":"22.11.2012 07:50","Bm":"42"},
{"Zt":"22.11.2012 08:00","Bm":"46"},{"Zt":"22.11.2012 08:10","Bm":"48"},
{"Zt":"22.11.2012 08:20","Bm":"54"},{"Zt":"22.11.2012 08:30","Bm":"60"},
{"Zt":"22.11.2012 08:40","Bm":"62"},{"Zt":"22.11.2012 08:50","Bm":"66"},
{"Zt":"22.11.2012 09:00","Bm":"70"},{"Zt":"22.11.2012 09:10","Bm":"74"},
{"Zt":"22.11.2012 09:20","Bm":"76"},{"Zt":"22.11.2012 09:40","Bm":"81"},
{"Zt":"22.11.2012 09:50","Bm":"87"},{"Zt":"22.11.2012 10:00","Bm":"92"},
{"Zt":"22.11.2012 10:10","Bm":"98"},{"Zt":"22.11.2012 10:20","Bm":"103"},
{"Zt":"22.11.2012 10:30","Bm":"108"},{"Zt":"22.11.2012 10:40","Bm":"109"},
{"Zt":"22.11.2012 10:50","Bm":"115"},{"Zt":"22.11.2012 11:00","Bm":"121"},
{"Zt":"22.11.2012 11:10","Bm":"126"},{"Zt":"22.11.2012 11:20","Bm":"132"},
{"Zt":"22.11.2012 11:30","Bm":"136"},{"Zt":"22.11.2012 11:40","Bm":"138"},
{"Zt":"22.11.2012 11:50","Bm":"144"},{"Zt":"22.11.2012 12:00","Bm":"149"},
{"Zt":"22.11.2012 12:50","Bm":"155"},{"Zt":"22.11.2012 13:00","Bm":"161"},
{"Zt":"22.11.2012 13:10","Bm":"165"}];


var store = Ext.create('Ext.data.JsonStore', {
storeId: 'SingleS',
model: 'SingleM',
data: data1
});

var store2= Ext.create('Ext.data.JsonStore', {
storeId: 'PieS',
model: 'PieM'
});

var chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
animate: true,
store: store2,
shadow: true,
legend: {
position: 'right',
update: true
},
insetPadding: 30,
//theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'Bm',
showInLegend: true,
//donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store2.each(function(rec) {
total += rec.get('Bm');
});
this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Bm') / 480 * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'Name',
display: 'rotate',
contrast: true,
font: '18px Arial',
renderer: function(v) { return v; }
}
}]
});

var panel1 = Ext.create('widget.panel', {
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
// Add a short delay to prevent fast sequential clicks
window.loadTask.delay(100, function() {
store1.loadData(generateData(6, 20));
});
}
}, {
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: chart
});

store.loadData(data1);
//store.add(data1);
var pieData = [];
pieData.slice();
pieData.push({'Name':'Arbeitszeit', 'Bm':store.max('Bm')});
pieData.push({'Name':'Stillstand', 'Bm':480-store.max('Bm')});
store2.loadData(pieData);
//store2.add(pieData);
//chart.refresh();
//chart.redraw();
//console.log(pieData);
});


HELPFUL INFORMATION Screenshot or Video:

not 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

Operating System:

Win7

evant
28 Nov 2012, 2:03 AM
Thanks for the test case, this is a dupe of: EXTJSIV-7458

Should be already fixed for the 4.2 release.