Get startedGet started for free

Tech stock performance over time

The hedge fund would like to analyze trends in tech stocks over the past few years. They have asked for a line plot displaying stock prices for Apple, IBM, and Netflix.

They would also like a DateRangeSlider so they can adjust the period they are viewing, making it easier to spot periods of interest.

A figure has been created, with line glyphs added. Additionally, earliest_date and lowest_date have been preloaded as the oldest and newest dates in the stocks["date"] column.

This exercise is part of the course

Interactive Data Visualization with Bokeh

View Course

Exercise instructions

  • Import DateRangeSlider.
  • Call DateRangeSlider(), assigning "Date" to the title, earliest_date and latest_date to start and end, setting value equal to "2014, 6, 2", "2018, 2, 7", and including an increment of 1 day per interaction with the widget.
  • Call .js_link() twice, linking the widget's "value" to the "Start" and "End" of fig's x_range and setting the attribute selector to 0 and 1 in each call respectively.
  • Call layout() to display the slider above the fig.

Hands-on interactive exercise

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

# Import widget
____
earliest_date = stocks["date"].min()
latest_date = stocks["date"].max()
fig.line(apple["date"], apple["close"], color="green", legend_label="Apple")
fig.line(netflix["date"], netflix["close"], color="red", legend_label="Netflix")
fig.line(ibm["date"], ibm["close"], color="purple", legend_label="IBM")
fig.legend.location = "top_left"

# Create DateRangeSlider
slider = DateRangeSlider(title="____", start=____, end=____, 
                         value=("____", "____"), step=____)

# Link DateRangeSlider values to figure
slider.____("____", ____.____, "____", attr_selector=____)
slider.____("____", ____.____, "____", attr_selector=____)

# Create layout and display plot
output_file(filename="stock_price_over_time.html")
show(____(____, ____))
Edit and Run Code