[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:

Code:

<!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

Code:

 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:

Code:

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.

[ST 2.1.0-rc2] Legend in line chart does not toggle visibility of lines

Thread Tools

Search Thread

Display

[ST 2.1.0-rc2] Legend in line chart does not toggle visibility of lines

[ST 2.1.0-rc2] Legend in line chart does not toggle visibility of lines