Dropdown Menus in Julia

How to add dropdowns to update Plotly chart attributes in Julia.


Methods

The updatemenu method determines which plotly.js function will be used to modify the chart. There are 4 possible methods:

  • "restyle": modify data or data attributes

  • "relayout": modify layout attributes

  • "update": modify data and layout attributes

  • "animate": start or pause an animation

Restyle Dropdown

The "restyle" method should be used when modifying the data and data attributes of the graph.

Update One Data Attribute

This example demonstrates how to update a single data attribute: chart type with the "restyle" method.

using PlotlyJS, CSV, DataFrames, HTTP, Tables

df = CSV.File(
    HTTP.get("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv").body
) |> DataFrame

trace1 = surface(z=Tables.matrix(df), colorscale="Viridis")

layout = Layout(
    width=800,
    height=900,
    autosize=false,
    margin=attr(t=0, b=0, l=0, r=0),
    template="plotly_white",
    scene=attr(
        aspectratio=attr(x=1, y=1, z=0.7),
        aspectmode="manual"
    ),
    updatemenus=[
        attr(
            buttons=[
                attr(
                    args=["type", "surface"],
                    label="3D Surface",
                    method="restyle"
                ),
                attr(
                    args=["type", "heatmap"],
                    label="Heatmap",
                    method="restyle"
                )
            ],
            direction="down",
            pad_r=10,
            pad_t=10,
            showactive=true,
            x=0.1,
            xanchor="left",
            y=1.1,
            yanchor="top"
        )
    ],
    annotations=[
        attr(
            text="Trace type:",
            showarrow=false,
            x=0,
            y=1.085,
            yref="paper",
            align="left"
        )
    ]
)

plot(trace1, layout)

Update Several Data Attributes

This example demonstrates how to update several data attributes: colorscale, colorscale direction, and line display with the "restyle" method.

using PlotlyJS, CSV, DataFrames, HTTP, Tables

df = CSV.File(
    HTTP.get("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv").body
) |> DataFrame

trace = heatmap(z=Tables.matrix(df), colorscale="Viridis")

button_layer_1_height = 1.08
layout = Layout(
    width=800,
    height=800,
    autosize=false,
    margin=attr(t=100,b=0,l=0,r=0),
    scene=attr(
        aspectratio=attr(x=1,y=1,z=0.7),
        aspectmode="manual"
    ),
    updatemenus=[
        attr(
            buttons=[
                attr(
                    args=["colorscale", "Viridis"],
                    label="Viridis",
                    method="restyle"
                ),
                attr(
                    args=["colorscale", "Cividis"],
                    label="Cividis",
                    method="restyle"
                ),
                attr(
                    args=["colorscale", "Blues"],
                    label="Blues",
                    method="restyle"
                ),
                attr(
                    args=["colorscale", "Greens"],
                    label="Greens",
                    method="restyle"
                ),
            ],
            direction="down",
            pad_r=10,
            pad_t=10,
            showactive=true,
            x=0.1,
            xanchor="left",
            y=button_layer_1_height,
            yanchor="top"
        ),
        attr(
            buttons=[
                attr(
                    args=["reversescale", false],
                    label="False",
                    method="restyle"
                ),
                attr(
                    args=["reversescale", true],
                    label="True",
                    method="restyle"
                )
            ],
            direction="down",
            pad_r= 10,
            pad_t=10,
            showactive=true,
            x=0.37,
            xanchor="left",
            y=button_layer_1_height,
            yanchor="top"
        ),
        attr(
            buttons=[
                attr(
                    args=[attr(contours_showlines=false, type="contour")],
                    label="Hide lines",
                    method="restyle"
                ),
                attr(
                    args=[attr(contours_showlines=true, type="contour")],
                    label="Show lines",
                    method="restyle"
                ),
            ],
            direction="down",
            pad=attr(r=10, t=10),
            showactive=true,
            x=0.58,
            xanchor="left",
            y=button_layer_1_height,
            yanchor="top"
        )
    ]
)
layout with fields autosize, height, margin, scene, template, updatemenus, and width

Relayout Dropdown

The "relayout" method should be used when modifying the layout attributes of the graph.<br>

Update One Layout Attribute

This example demonstrates how to update a layout attribute: chart type with the "relayout" method.

using PlotlyJS, Distributions

x0 = rand(Normal(2, 0.4), 400)
y0 = rand(Normal(2, 0.4), 400)
x1 = rand(Normal(3, 0.6), 600)
y1 = rand(Normal(6, 0.4), 400)
x2 = rand(Normal(4, 0.2), 200)
y2 = rand(Normal(4, 0.4), 200)

trace1 = scatter(x=x0, y=y0, mode="markers", marker_color="DarkOrange")
trace2 = scatter(x=x1, y=y1, mode="markers", marker_color="Crimson")
trace3 = scatter(x=x2, y=y2, mode="markers", marker_color="RebeccaPurple")

# Add buttons that add shapes
cluster0 = [attr(type="circle",
                            xref="x", yref="y",
                            x0=minimum(x0), y0=minimum(y0),
                            x1=maximum(x0), y1=maximum(y0),
                            line=attr(color="DarkOrange"))]
cluster1 = [attr(type="circle",
                            xref="x", yref="y",
                            x0=minimum(x1), y0=minimum(y1),
                            x1=maximum(x1), y1=maximum(y1),
                            line=attr(color="Crimson"))]
cluster2 = [attr(type="circle",
                            xref="x", yref="y",
                            x0=minimum(x2), y0=minimum(y2),
                            x1=maximum(x2), y1=maximum(y2),
                            line=attr(color="RebeccaPurple"))]

layout = Layout(
    updatemenus=[
        attr(
            buttons=[
                attr(label="None",
                    method="relayout",
                    args=["shapes", []]),
                attr(label="Cluster 0",
                    method="relayout",
                    args=["shapes", cluster0]),
                attr(label="Cluster 1",
                    method="relayout",
                    args=["shapes", cluster1]),
                attr(label="Cluster 2",
                    method="relayout",
                    args=["shapes", cluster2]),
                attr(label="All",
                    method="relayout",
                    args=["shapes", vcat(cluster0, cluster1, cluster2)])
            ],
        )
    ],
    title_text="Highlight Clusters",
    showlegend=false
)

plot([trace1, trace2, trace3], layout)

Update Dropdown

The "update" method should be used when modifying the data and layout sections of the graph.<br> This example demonstrates how to update which traces are displayed while simultaneously updating layout attributes such as the chart title and annotations.

using PlotlyJS, CSV, DataFrames

df = CSV.File(
    HTTP.get("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv").body
) |> DataFrame

x = range(1, stop=size(df)[1])
trace1 = scatter(
    df,
    x=x,
    y=df[!, "AAPL.High"] ,
    name="High",
    line_color="#33CFA5"
)

trace2 = scatter(
    df,
    x=x,
    y=repeat([mean(df[!, "AAPL.High"])], size(df)[1]),
    name="High Average",
    visible=false,
    line=attr(color="#33CFA5", dash="dash")
)

trace3 = scatter(
    df,
    x=x,
    y=df[!, "AAPL.Low"],
    name="Low",
    line_color="#F06A6A"
)
trace4 = scatter(
    df,
    x=x,
    y=repeat([mean(df[!, "AAPL.Low"])], size(df)[1]),
    name="Low Average",
    visible=false,
    line=attr(color="#F06A6A", dash="dash")
)

high_annotations = [attr(x="2016-03-01",
                         y=mean(df[:, "AAPL.High"]),
                         xref="x", yref="y",
                         text=string("High Average:<br> ", mean(df[:, "AAPL.High"])),
                         ax=0, ay=-40),
                    attr(x=argmax(df[!, "AAPL.High"]),
                         y=maximum(df[:, "AAPL.High"]),
                         xref="x", yref="y",
                         text=string("High Max:<br> ", maximum(df[:, "AAPL.High"])),
                         ax=0, ay=-40)]
low_annotations = [attr(x="2015-05-01",
                        y=mean(df[:, "AAPL.Low"]),
                        xref="x", yref="y",
                        text=string("Low Average:<br>", mean(df[:, "AAPL.Low"])),
                        ax=0, ay=40),
                   attr(x=argmin(df[!, "AAPL.High"]),
                        y=minimum(df[:, "AAPL.Low"]),
                        xref="x", yref="y",
                        text=string("Low Min:<br>", minimum(df[:, "AAPL.Low"])),
                        ax=0, ay=40)]

layout = Layout(
    updatemenus=[
        attr(
            active=0,
            buttons=[
                attr(
                    label="None",
                    method="update",
                    args=[
                        attr(visible= [true, false, true, false]),
                        attr(title= "Yahoo",
                            annotations=[]
                        )
                    ]
                ),
                attr(label="High",
                     method="update",
                     args=[
                        attr(visible= [true, true, false, false]),
                        attr(
                            title= "Yahoo High",
                            annotations=high_annotations
                        )
                    ]
                ),
                attr(
                    label="Low",
                    method="update",
                    args=[
                        attr(visible= [false, false, true, true]),
                        attr(
                            title= "Yahoo Low",
                            annotations=low_annotations
                        )
                    ]
                ),
                attr(
                    label="Both",
                    method="update",
                    args=[
                        attr(visible=[true, true, true, true]),
                        attr(
                            title="Yahoo",
                            annotations=vcat(high_annotations, low_annotations)
                        )
                    ]
                ),
            ],
        )
    ])

plot([trace1, trace2, trace3, trace4], layout)

Reference

See https://plotly.com/julia/reference/layout/updatemenus/ for more information about updatemenu dropdowns.