PDA

View Full Version : [NOREPRO] [ST 2.1.0-rc2] Legend in line chart does not toggle visibility of lines



anwyn
25 Oct 2012, 4:31 AM
REQUIRED INFORMATION Ext version tested:

ST 2.1.0-rc2

Browser versions tested against:

Google Chrome
Safari (mobile, iPad iOS 5)

DOCTYPE tested against:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Description:

Clicking on the legend items in a line chart does not toggle visibility of the corresponding lines.

Steps to reproduce the problem:

In the ST 2.1.0 rc2 documentation extend the example of Ext.chart.series.Line with

legend: { position: 'top' }, .
Click on legend item, corresponding line does not vanish.

The result that was expected:


line visibility changes

The result that occurs instead:


nothing


Test Case:


var store = new Ext.data.Store({
fields : ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data : [
{ name : 'metric one', data1 : 10, data2 : 12, data3 : 14, data4 : 8, data5 : 13 },
{ name : 'metric two', data1 : 7, data2 : 8, data3 : 16, data4 : 10, data5 : 3 },
{ name : 'metric three', data1 : 5, data2 : 2, data3 : 14, data4 : 12, data5 : 7 },
{ name : 'metric four', data1 : 2, data2 : 14, data3 : 6, data4 : 1, data5 : 23 },
{ name : 'metric five', data1 : 27, data2 : 38, data3 : 36, data4 : 13, data5 : 33 }
]
});

var lineChart = new Ext.chart.CartesianChart({
legend : {
position : 'top'
},
animate : true,
store : store,
axes : [
{
type : 'numeric',
position : 'left',
fields : ['data1'],
title : {
text : 'Sample Values',
fontSize : 15
},
grid : true,
minimum : 0
},
{
type : 'category',
position : 'bottom',
fields : ['name'],
title : {
text : 'Sample Values',
fontSize : 15
}
}
],
series : [
{
type : 'line',
highlight : {
size : 7,
radius : 7
},
style : {
stroke : 'rgb(143,203,203)'
},
xField : 'name',
yField : 'data1',
marker : {
type : 'path',
path : ['M', -2, 0, 0, 2, 2, 0, 0, -2, 'Z'],
stroke : 'blue',
lineWidth : 0
}
},
{
type : 'line',
highlight : {
size : 7,
radius : 7
},
fill : true,
xField : 'name',
yField : 'data3',
marker : {
type : 'circle',
radius : 4,
lineWidth : 0
}
}
]
});

Ext.Viewport.setLayout('fit');
Ext.Viewport.add(lineChart);

INFORMATION Screenshot or Video:

--

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

Linux
Win 7
iOS 5/6

mitchellsimoens
25 Oct 2012, 5:08 AM
I cleaned up your test case so it is legible.

Your test case is working with the code in the next release.

anwyn
25 Oct 2012, 5:12 AM
Marvelous.