Changing line plots with Select

For your final task, the hedge fund has asked you to put together visualizations enabling analysis of Electronic Arts' stock performance.

You decide the Select widget would be ideal, so they can switch between the following metrics: close, market_cap, and volume.

The stocks dataset has been filtered for EA. Three figures (close, market_cap, and volume) and sets of glyphs (close_line, market_cap_line, volume) have been created for each metric and preloaded for you.

This exercise is part of the course

Interactive Data Visualization with Bokeh

View Course

Exercise instructions

Create menu by calling Select(), passing a list to the options argument containing "Close", "Market Cap", and "Volume" (in that order), setting value to "Close", and giving title of "Metric".
Call an appropriate menu method to link the "value" of the widget to callback.
Call layout inside show, displaying the widget above the figures close, market_cap, and volume.

Hands-on interactive exercise

Have a go at this exercise by completing this sample code.

# Create menu
menu = ____
callback = CustomJS(args=dict(plot_one=close, plot_two=market_cap, plot_three=volume, line_1=close_line, line_2=market_cap_line, line_3=volume_line), code="""
plot_one.visible = true
plot_two.visible = true
plot_three.visible = true
line_1.visible = true
line_2.visible = true
line_3.visible = true
if (this.value == "Close") {plot_two.visible = false
                            plot_three.visible = false
                            line_2.visible = false
                            line_3.visible = false}
    else {plot_one.visible = false
          line_1.visible = false} 
if (this.value == "Market Cap") {plot_one.visible = false
                                 plot_three.visible = false
                                 line_1.visible = false
                                 line_3.visible = false} 
    else {plot_two.visible = false
          line_2.visible = false}
if (this.value == "Volume") {plot_one.visible = false
                             plot_two.visible = false
                             line_1.visible = false
                             line_2.visible = false}
    else {plot_three.visible = false
          line_3.visible = false}
""")

# Set up the interaction
____

# Display the layout
output_file(filename="stock_metrics.html")
____

Edit and Run Code