Use dropdown to filter text value with array

plotly.js
1

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.

2

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

1 Like
3

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'
     }]
}
4

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

1 Like