PDA

View Full Version : [INFOREQ]Chart Legends for Line Charts without markers are ambiguous



maslofer
5 Mar 2011, 3:34 PM
The line in the legend is very thin and doesn't appear to have color.

However, when you hover over the legend item, it get's thick and you can tell which is which.

See attached picture for an example. You can't tell which is flow and which is temperature.

24993

evant
6 Mar 2011, 9:42 PM
I can't reproduce this on pr1, pr3 or the latest from source. Care to post a test case? For example, if I modify the line chart sample:



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

Ext.onReady(function () {
store1.loadData(generateData(Math.random() * 8 + 4));

var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
maximizable: true,
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
store1.loadData(generateData(Math.random() * 8 + 4));
}
}],
items: {
showMarkers: false,
xtype: 'chart',
//animate: true,
store: store1,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['data1', 'data2', 'data3'],
title: 'Number of Hits',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
showMarkers: false,
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1'
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
showMarkers: false,
axis: 'left',
smooth: true,
xField: 'name',
yField: 'data2'
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
showMarkers: false,
axis: 'left',
smooth: true,
xField: 'name',
yField: 'data3'
}]
}
});
});


You'll see in the attached screen grab the lines in the legend are clearly distinguishable.25010

Yousef
3 May 2011, 10:54 AM
I have been able to reproduce this bug on Ext 4.0.0. When you remove theme: 'Category1', the lines are assigned different colors but the legend is not.

A slightly different scenario causing this bug:

- create a subclass of Ext.chart.Chart (let's name it DerivedChart
- when creating a new DerivedChart do not pass a theme parameter
- However, even when you specify Ext.apply(this, {theme:'Category1'}) in the initComponent function of DerivedChart, the bug still occurs.

Related topic: http://www.sencha.com/forum/showthread.php?131840-4.0.0-Charts-themes-amp-legends&highlight=legend

Yousef
3 May 2011, 10:59 AM
Also, same issue arises when using theme Base instead of Category1