Results 1 to 3 of 3

Thread: Hiding a series in a column chart

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2011
    Location
    Betelgeuse VII
    Posts
    98
    Answers
    4
    Vote Rating
    13
      0  

    Default Answered: Hiding a series in a column chart

    Hi,

    I'm attempting to hide a series in a column chart without much succcess. Here's how my chart series is defined:

    Code:
    series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    tips: {
                      trackMouse: true,
                      width: 140,
                      height: 28,
                      renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
                      }
                    },
                    label: {
                      display: 'insideEnd',
                      'text-anchor': 'middle',
                        field: 'data1',
                        renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'vertical',
                        color: '#333'
                    },
                    xField: 'name',
                    yField: ['data1', 'data2']
                }
    I've been able to hide the first item in the series with:

    Code:
    chart.series.get(0).hideAll();
    However I can't hide any other item in this series. When I query the series yField I see 2 items: 'data1', 'data2'

    Does anyone know how I can hide the second yField item? Perhaps my series setup is incorrect.

    Thanks.

  2. Here is how the legend item does it when you click on it:

    Code:
            me.on('mousedown', function() {
                if (!toggle) {
                    series.hideAll(index);
                    label.setAttributes({
                        opacity: 0.5
                    }, true);
                } else {
                    series.showAll(index);
                    label.setAttributes({
                        opacity: 1
                    }, true);
                }
                toggle = !toggle;
            }, me);

  3. #2
    Sencha - Community Support Team mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,023
    Answers
    3976
    Vote Rating
    1364
      0  

    Default

    Here is how the legend item does it when you click on it:

    Code:
            me.on('mousedown', function() {
                if (!toggle) {
                    series.hideAll(index);
                    label.setAttributes({
                        opacity: 0.5
                    }, true);
                } else {
                    series.showAll(index);
                    label.setAttributes({
                        opacity: 1
                    }, true);
                }
                toggle = !toggle;
            }, me);
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha Premium Member
    Join Date
    Mar 2011
    Location
    Betelgeuse VII
    Posts
    98
    Answers
    4
    Vote Rating
    13
      0  

    Default

    Thanks Mitchell,

    I was able to get the columns to hide like so:

    Code:
    chart.series.get(0).hideAll(0);
    chart.series.get(0).hideAll(1);
    Cheers.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •