In [1]:

    

import pandas as pd
import numpy as np
import bqplot
import yt

symbol = 'Security 1'
symbol2 = 'Security 2'


    

In [2]:

    

price_data = pd.DataFrame(np.cumsum(np.random.randn(150, 2).dot([[0.5, 0.4], [0.4, 1.0]]),
                                    axis=0) + 100,
                          columns=['Security 1', 'Security 2'],
                          index=pd.date_range(start='01-01-2007', periods=150))

dates_actual = price_data.index.values
prices = price_data[symbol].values


    

In [3]:

    

from bqplot import DateScale, LinearScale, Axis, Lines, Scatter, Bars, Hist, Figure
from bqplot.interacts import (
    FastIntervalSelector, IndexSelector, BrushIntervalSelector,
    BrushSelector, MultiSelector, LassoSelector, PanZoom, HandDraw
)
from traitlets import link

from ipywidgets import ToggleButtons, VBox, HTML, Dropdown


    

In [4]:

    

## First we define a Figure
dt_x_fast = DateScale()
lin_y = LinearScale()

x_ax = Axis(label='Index', scale=dt_x_fast)
x_ay = Axis(label=(symbol + ' Price'), scale=lin_y, orientation='vertical')
lc = Lines(x=dates_actual, y=prices, scales={'x': dt_x_fast, 'y': lin_y}, colors=['orange'])
lc_2 = Lines(x=dates_actual[50:], y=prices[50:] + 2, scales={'x': dt_x_fast, 'y': lin_y}, colors=['blue'])


    

In [5]:

    

## Next we define the type of selector we would like
intsel_fast = FastIntervalSelector(scale=dt_x_fast, marks=[lc, lc_2])


    

In [6]:

    

## Now, we define a function that will be called when the FastIntervalSelector is interacted with
md = {}
def fast_interval_change_callback(change):
    ind = pd.to_datetime(change.new)
    tot = price_data.loc[ind[0]:ind[1]]["Security 1"].sum()
    db_fast.value = 'The selected period is ' + str(change.new) + ' total: ' + str(tot)


    

In [7]:

    

## Now we connect the selectors to that function
intsel_fast.observe(fast_interval_change_callback, names=['selected'])


    

In [8]:

    

## We use the HTML widget to see the value of what we are selecting and modify it when an interaction is performed
## on the selector
db_fast = HTML()
db_fast.value = 'The selected period is ' + str(intsel_fast.selected)

fig_fast_intsel = Figure(marks=[lc, lc_2], axes=[x_ax, x_ay], title='Fast Interval Selector Example',
                         interaction=intsel_fast) #This is where we assign the interaction to this particular Figure
def watch_dropdown(change):
    db_fast.value = str((change.old, change.new))
new_dropdown = Dropdown(options=["one", "two", "three"])
new_dropdown.observe(watch_dropdown, names=['value'])
VBox([db_fast, fig_fast_intsel, new_dropdown])