# Use dropdown to filter text value with array

**URL:** <https://community.plotly.com/t/use-dropdown-to-filter-text-value-with-array/9283>\
**Category:** plotly.js\
**Created:** [March 29, 2018, 12:20pm UTC](https://community.plotly.com/t/use-dropdown-to-filter-text-value-with-array/9283 "2018-03-29T12:20:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ying](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/ying/32/2697_2.png) [@ying](https://community.plotly.com/u/ying)\
**Post date:** [March 29, 2018, 12:20pm UTC](https://community.plotly.com/t/use-dropdown-to-filter-text-value-with-array/9283/1 "2018-03-29T12:20:36Z")

</div>

Hello!  
(Please excuse my poor English.)

I would like to ask two questions.

I have three traces.

```
        var xAverageLine = {
           ...
        }

        var yAverageLine = {
           ...
        }

        var traces = {
            x: x,
            y: y,
            text: ['A', 'B', 'C', 'D', 'E'],
            type: 'scatter',
            mode: 'markers',
            transforms: [
                {
                    type: 'filter',
                    enabled: false
                },
                {
                    type: 'groupby',
                    groups: category
                }
            ]
        }

```

So I use

```
var data = [xAverageLine, yAverageLine, traces]

```

to save my all traces.

My want to use **dropdown menu** to filter ‘text’ with array.

–

My first question is :

```
updatemenus: [{
    buttons: [
        {
            label: 'no filters',
            method: 'restyle',
            args: ['transforms[0]', {
                type: 'filter',
                enabled: false
            }]
        },
        {
            label: 'filter AB',
            method: 'restyle',
            args: ['transforms[0]', {
                type: 'filter',
                ...
            }]
        }
    ]
}]

```

Because my data is an array ( [xAverageLine, yAverageLine, traces] ) , if I use

```
'transforms[0]'

```

it wouldn’t get ‘traces.transforms[0]’ in [xAverageLine, yAverageLine, **traces**].  
How can I do?

My second question is, can I use an array to filter value of ‘text’?  
Like this:

```
{
     label: 'filter AB',
     method: 'restyle',
     args: ['transforms[0]', {
        type: 'filter',
        target: 'text',
        operation: '=',
        value: ['A', 'B']
     }]
 }

```

And My graph would draw the points with text ‘A’ and ‘B’.

Any suggestions would be appreciated. Thank you.

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [March 29, 2018, 3:49pm UTC](https://community.plotly.com/t/use-dropdown-to-filter-text-value-with-array/9283/2 "2018-03-29T15:49:54Z")

</div>

Here’s a working example that might help you out: [https://codepen.io/etpinard/pen/dmdrdr?editors=0010](https://codepen.io/etpinard/pen/dmdrdr?editors=0010)

---

<div class="post-metadata">

**Author:** ![ying](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/ying/32/2697_2.png) [@ying](https://community.plotly.com/u/ying)\
**Post date:** [March 30, 2018, 7:51am UTC](https://community.plotly.com/t/use-dropdown-to-filter-text-value-with-array/9283/3 "2018-03-30T07:51:10Z")

</div>

Thank you very much. It solves my first question.

About my second question,  
could I use an array to filter ‘text’ value?  
Or could I custom some values at each point and filter it?  
Like this:

```
var traces = {
     x: [1, 2, 3, 4],
     y: [2, 2, 2, 2],
     text: ['A', 'B', 'C', 'D'],
     customAtt: ['T', 'T', 'F', 'T']
}

{
     label: 'filter T',
     method: 'restyle',
     args: ['transforms[0]', {
         type: 'filter',
         target: 'customAtt',
         operation: '=',
         value: 'T'
     }]
}
```

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [March 30, 2018, 12:59pm UTC](https://community.plotly.com/t/use-dropdown-to-filter-text-value-with-array/9283/4 "2018-03-30T12:59:35Z")

</div>

I think using `customdata` (the official plotly.js name for this sort of thing) instead of `customAtt` should do the trick.