title: Can I make a line plot with a dropdown menu in R without using Shiny or Plotly?
body: <p>I want to make a simple sales report line chart that shows product sales over time for a given product from a drop down menu. I have made a report using plotly and shiny, but I can't find a way to share the report with my colleagues, without having to use Shiny Server or Shinyapps.IO. Ideally, I would want a standalone html file, but I can't find a way to insert an interactive graph to R Markdown.</p>
  
  <p>Here is an example dataframe: </p>
  
  <pre><code>df = data.frame(month=rep_len(1:12, length.out=12*5), product=rep(1:5, each=12),sales=rnorm(12*5,100,50)) 
  </code></pre>
  
  <p>The following suggestion almost works, but the dropdown does not correspond to the correct variable</p>
  
  <pre><code>set.seed(42)
  library(plotly)
  
  ## Create random data. cols holds the parameter that should be switched
  l &lt;- lapply(1:100, function(i) rnorm(100))
  df &lt;- as.data.frame(l)
  cols &lt;- paste0(letters, 1:100)
  colnames(df) &lt;- cols
  df[["c"]] &lt;- 1:100
  
  
  p &lt;- plot_ly(df,
        type = "scatter",
        mode = "lines") %&gt;% 
        add_lines(x = ~c, y=~df[[cols[[1]]]], name = cols[[1]])
  ## Add arbitrary number of traces
  for (col in cols) {
    p &lt;- p %&gt;% add_lines(x = ~c, y = df[[col]], name = col, visible = FALSE)
  }
  p &lt;- p %&gt;%
      layout(
        title = "Dropdown line plot",
        xaxis = list(title = "x"),
        xaxis = list(title = "y"),
        updatemenus = list(
          list(
              y = 0.7,
              ## Add all buttons at once
              buttons = lapply(cols, function(col) {
                list(method="restyle", 
                  args = list(
                    "visible", cols == col),
                    label = col)
              })
          )
        )
      )
  
  print(p)
  </code></pre>
  
  <p>Selecting the variable b2 show the lines for a1 and v100.</p>
  
  <p><a href="https://i.stack.imgur.com/51IYG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/51IYG.png" alt="selecting b2 shows the line for a1 and v100"></a></p>
  
  <p>While selecting c3 shows the line for a1, d4 for b2, etc. Seems like the order is shiftet by 2 columns.</p>
  
  <p><a href="https://i.stack.imgur.com/1D1XP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1D1XP.png" alt="selecting c3 shows the line for a1"></a></p>