Buttons in R
How to add buttons in R with Plotly.
New to Plotly?
Plotly is a free and open-source graphing library for R. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.
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 (only available offline)
Restyle Buttons
The "restyle"
method should be used when modifying the data and data attributes of the graph
Update One Data Attribute
This example demostrates how to update a single data attribute: line color
with the "restyle"
method.
library(plotly)
x <- seq(-2*pi, 2*pi, length.out = 1000)
df <- data.frame(x, y1 = sin(x))
fig <- plot_ly(df, x = ~x)
fig <- fig %>% add_lines(y = ~y1)
fig <- fig %>% layout(
title = "Button Restyle",
xaxis = list(domain = c(0.1, 1)),
yaxis = list(title = "y"),
updatemenus = list(
list(
type = "buttons",
y = 0.8,
buttons = list(
list(method = "restyle",
args = list("line.color", "blue"),
label = "Blue"),
list(method = "restyle",
args = list("line.color", "red"),
label = "Red")))
))
fig
Update Several Data Attributes
This example demostrates how to update several data attributes: colorscale, chart type
, and colorscale
with the "restyle" method.
library(plotly)
fig <- plot_ly(z = ~volcano, type = "heatmap", colorscale='Rainbow')
# chart option buttons
chart_types <- list(
type = "buttons",
direction = "right",
xanchor = 'center',
yanchor = "top",
pad = list('r'= 0, 't'= 10, 'b' = 10),
x = 0.5,
y = 1.27,
buttons = list(
list(method = "restyle",
args = list("type", "heatmap"),
label = "Heatmap"),
list(method = "restyle",
args = list("type", "contour"),
label = "Contour"),
list(method = "restyle",
args = list("type", "surface"),
label = "Surface")
))
# color option buttons
color_types <- list(
type = "buttons",
direction = "right",
xanchor = 'center',
yanchor = "top",
pad = list('r'= 0, 't'= 10, 'b' = 10),
x = 0.5,
y = 1.17,
buttons = list(
list(method = "restyle",
args = list("colorscale", "Rainbow"),
label = "Rainbow"),
list(method = "restyle",
args = list("colorscale", "Jet"),
label = "Jet"),
list(method = "restyle",
args = list("colorscale", "Earth"),
label = "Earth"),
list(method = "restyle",
args = list("colorscale", "Electric"),
label = "Electric")
))
annot <- list(list(text = "Chart<br>Type", x=0.2, y=1.25, xref='paper', yref='paper', showarrow=FALSE),
list(text = "Color<br>Type", x=0.2, y=1.15, xref='paper', yref='paper', showarrow=FALSE))
# plot
fig <- fig %>% layout(
xaxis = list(domain = c(0.1, 1)),
yaxis = list(title = "y"),
updatemenus = list(chart_types,color_types),
annotations = annot)
fig
Relayout Button
The "relayout"
method should be used when modiying the layout attributes of the graph.
Update One Layout Attribute
This example demostrated how to update a layout attribute: shapes
with the '"relayout"' method.
library(plotly)
x0 <- rnorm(400, mean=2, sd=0.4)
y0 <- rnorm(400, mean=2, sd=0.4)
x1 <- rnorm(400, mean=3, sd=0.6)
y1 <- rnorm(400, mean=6, sd=0.4)
x2 <- rnorm(400, mean=4, sd=0.2)
y2 <- rnorm(400, mean=4, sd=0.4)
# shapes components
cluster0 = list(
type = 'circle',
xref ='x', yref='y',
x0=min(x0), y0=min(y0),
x1=max(x0), y1=max(y0),
opacity=0.25,
line = list(color="#835AF1"),
fillcolor="#835AF1")
cluster1 = list(
type = 'circle',
xref ='x', yref='y',
x0=min(x1), y0=min(y1),
x1=max(x1), y1=max(y1),
opacity=0.25,
line = list(color="#7FA6EE"),
fillcolor="#7FA6EE")
cluster2 = list(
type = 'circle',
xref ='x', yref='y',
x0=min(x2), y0=min(y2),
x1=max(x2), y1=max(y2),
opacity=0.25,
line = list(color="#B8F7D4"),
fillcolor="#B8F7D4")
# updatemenus component
updatemenus <- list(
list(
active = -1,
type = 'buttons',
buttons = list(
list(
label = "None",
method = "relayout",
args = list(list(shapes = c()))),
list(
label = "Cluster 0",
method = "relayout",
args = list(list(shapes = list(cluster0, c(), c())))),
list(
label = "Cluster 1",
method = "relayout",
args = list(list(shapes = list(c(), cluster1, c())))),
list(
label = "Cluster 2",
method = "relayout",
args = list(list(shapes = list(c(), c(), cluster2)))),
list(
label = "All",
method = "relayout",
args = list(list(shapes = list(cluster0,cluster1,cluster2))))
)
)
)
fig <- plot_ly(type = 'scatter', mode='markers')
fig <- fig %>% add_trace(x=x0, y=y0, mode='markers', marker=list(color='#835AF1'))
fig <- fig %>% add_trace(x=x1, y=y1, mode='markers', marker=list(color='#7FA6EE'))
fig <- fig %>% add_trace(x=x2, y=y2, mode='markers', marker=list(color='#B8F7D4'))
fig <- fig %>% layout(title = "Highlight Clusters", showlegend = FALSE,
updatemenus = updatemenus)
fig
Update Button
The '"update"' method should be used when modifying the data and layout sections of the graph. This example demostrates how to update which traces are diplayed while simultaneously updating layout attributes such as the chart title and annotations.
library(plotly)
library(quantmod)
d <- quantmod::getSymbols("AAPL")
df <- data.frame(Date=index(AAPL),coredata(AAPL))
high_annotations <- list(
x=df$Date[df$AAPL.High == max(df$AAPL.High)],
y=max(df$AAPL.High),
xref='x', yref='y',
text=paste0('High: $',max(df$AAPL.High)),
ax=0, ay=-40
)
low_annotations <- list(
x=df$Date[df$AAPL.Low == min(df$AAPL.Low)],
y=min(df$AAPL.Low),
xref='x', yref='y',
text=paste0('Low: $',min(df$AAPL.Low)),
ax=0, ay=40
)
# updatemenus component
updatemenus <- list(
list(
active = -1,
type= 'buttons',
buttons = list(
list(
label = "High",
method = "update",
args = list(list(visible = c(FALSE, TRUE)),
list(title = "Apple High",
annotations = list(c(), high_annotations)))),
list(
label = "Low",
method = "update",
args = list(list(visible = c(TRUE, FALSE)),
list(title = "Apple Low",
annotations = list(low_annotations, c() )))),
list(
label = "Both",
method = "update",
args = list(list(visible = c(TRUE, TRUE)),
list(title = "Apple",
annotations = list(low_annotations, high_annotations)))),
list(
label = "Reset",
method = "update",
args = list(list(visible = c(TRUE, TRUE)),
list(title = "Apple",
annotations = list(c(), c())))))
)
)
fig <- df %>% plot_ly(type = 'scatter', mode = 'lines')
fig <- fig %>% add_lines(x=~Date, y=~AAPL.High, name="High",
line=list(color="#33CFA5"))
fig <- fig %>% add_lines(x=~Date, y=~AAPL.Low, name="Low",
line=list(color="#F06A6A"))
fig <- fig %>% layout(title = "Apple", showlegend=FALSE,
xaxis=list(title="Date"),
yaxis=list(title="Price ($)"),
updatemenus=updatemenus)
fig
Animate Button
Animations are currently only available in the development package and offline.
Style Buttons
When adding buttons to Plotly charts, users have the option of styling the color, font, padding, and position of the buttons. The example below demostrates hot to apply different styling options. See all updatemenus styling attributes here: https://plotly.com/r/reference/#layout-updatemenus.
Mapbox Access Token
To plot on Mapbox maps with Plotly you may need a Mapbox account and a public Mapbox Access Token. See our Mapbox Mafig Layers documentation for more information. If you're using a Chart Studio Enterprise server, please see additional instructions here.
library(plotly)
mapboxToken <- paste(readLines("../.mapbox_token"), collapse="") # You need your own token
# Setting mapbox token for R environment
Sys.setenv("MAPBOX_TOKEN" = mapboxToken)
# read in wind turbines and farms data
df_wind = read.csv('data/2805.csv')
df_farms = read.csv('https://plotly.com/~jackp/17256.csv', skipNul = TRUE)
# subset and clean data
df_sub <- subset(df_wind, manufac != "unknown", select=c(lat_DD, long_DD, manufac))
df_farms$Longitude = as.numeric(gsub("'", "", df_farms$Longitude))
df_farms$Wind.Farm = gsub("^((\\w+\\W+){2}).*","\\1",df_farms$Wind.Farm)
rm(df_wind)
# location buttons
usa <- list(method = "relayout",
args = list(list(mapbox.center.lat = median(df_sub$lat_DD),
mapbox.center.lon = median(df_sub$long_DD),
mapbox.zoom = 3)),
label = "USA")
buttons <- function(i) {
list(method = "relayout",
args = list(list(mapbox.center.lat = df_farms$Latitude[i],
mapbox.center.lon = df_farms$Longitude[i],
mapbox.zoom = 9)),
label = df_farms$Wind.Farm[i])
}
# mafig style buttons
basic <- list(method = "relayout",
args = list(list(mapbox.style = "basic")),
label = "Basic")
dark <- list(method = "relayout",
args = list(list(mapbox.style = "dark")),
label = "Dark")
satellite <- list(method = "relayout",
args = list(list(mapbox.style = "satellite")),
label = "Satellite")
# plot scattermapbox with buttons
fig <- plot_mapbox(df_sub, lat = ~lat_DD, lon = ~long_DD, mode = 'scattermapbox',
split = ~manufac, size=3)
fig <- fig %>% add_annotations(x = 0.05, y = 0.05,
text = "All US wind turbines (scroll to zoom)",
xref = "page",
yref = "page",
showarrow = FALSE,
font = list(color = 'magenta',
size = 14))
fig <- fig %>% layout(plot_bgcolor = 'black',
paper_bgcolor = 'black',
mapbox = list(center = list(lat = median(df_sub$lat_DD),
lon = median(df_sub$long_DD)),
zoom = 3, style = 'dark'),
updatemenus = list(
list(type='buttons',
direction = "right",
xanchor = 'center',
yanchor = "top",
pad = list('r'= 0, 't'= 10, 'b' = 10),
x = 0.5,
y = 1,
showactive = FALSE,
buttons=list(usa, buttons(1),
buttons(2), buttons(3),
buttons(4))),
list(type='buttons',
direction = "right",
xanchor = 'center',
yanchor = "top",
pad = list('r'= 0, 't'= 10, 'b' = 10),
x = 0.5,
y = 0.935,
showactive = FALSE,
buttons=list(buttons(6), buttons(7),
buttons(8), buttons(9))),
list(type='buttons',
direction = "right",
yanchor = "bottom",
x = 1,
y = 0,
buttons=list(dark,basic,satellite))))
fig <- fig %>% config(mapboxAccessToken = Sys.getenv("MAPBOX_TOKEN"))
fig