

In [ ]:

    
import numpy as np
import pandas as pd
from IPython.display import display
from bqplot import *

Data



In [ ]:

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

Basic Line Chart



In [ ]:

    
sc_x = LinearScale()
sc_y = LinearScale()

line = Lines(x=np.arange(len(price_data['Security 1'].values)), y=price_data['Security 1'].values,
             scales={'x': sc_x, 'y': sc_y})
ax_x = Axis(scale=sc_x, label='index')
ax_y = Axis(scale=sc_y, orientation='vertical', label='Security 1')

fig = Figure(marks=[line], axes=[ax_x, ax_y], title='Security 1')
display(fig)

Lines with markers



In [ ]:

    
sc_x = LinearScale()
sc_y = LinearScale()

line = Lines(x=np.arange(len(price_data['Security 1'].values)), y=price_data['Security 1'].values,
             scales={'x': sc_x, 'y': sc_y}, marker='square')
ax_x = Axis(scale=sc_x, label='index')
ax_y = Axis(scale=sc_y, orientation='vertical', label='Security 1')

fig = Figure(marks=[line], axes=[ax_x, ax_y], title='Security 1')
display(fig)

Patches



In [ ]:

    
sc_x = LinearScale()
sc_y = LinearScale()

patch = Lines(x=[[0, 2, 1.2], [0.5, 2.5, 1.7], [4,5,6, 6, 5, 4, 3]], 
              y=[[0, 0, 1], [0.5, 0.5, -0.5], [1, 1.1, 1.2, 2.3, 2.2, 2.7, 1.0]],
              fill_colors=['orange', 'blue', 'red'],
              fill='inside',
              stroke_width=10,
              close_path=True,
              scales={'x': sc_x, 'y': sc_y},
              display_legend=True)

fig = Figure(marks=[patch], animation_duration=1000)
display(fig)



In [ ]:

    
patch.opacities = [0.1, 0.2]



In [ ]:

    
patch.x = [[2, 3, 3.2], [0.5, 2.5, 1.7], [4,5,6, 6, 5, 4, 3]]



In [ ]:

    
#patch.fill=['', 'blue']
patch.close_path = False

Line with dates as X



In [ ]:

    
dt_x = DateScale()
sc_y = LinearScale()

line = Lines(x=price_data.index.values, y=price_data['Security 1'].values, scales={'x': dt_x, 'y': sc_y})
ax_x = Axis(scale=dt_x, label='Date')
ax_y = Axis(scale=sc_y, orientation='vertical', label='Security 1')

fig = Figure(marks=[line], axes=[ax_x, ax_y])
display(fig)

Line with single X and multiple Y



In [ ]:

    
dt_x = DateScale()
sc_y = LinearScale()

line = Lines(x=price_data.index.values, y=[price_data['Security 1'].values, price_data['Security 2'].values], 
             scales={'x': dt_x, 'y': sc_y},
             labels=['Security 1', 'Security 2'], display_legend=True, colors=['blue', 'orangered'])
ax_x = Axis(scale=dt_x, label='Date')
ax_y = Axis(scale=sc_y, orientation='vertical', label='Security 1')

fig = Figure(marks=[line], axes=[ax_x, ax_y], legend_location='top-left')
display(fig)

Line with multiple X and multiple Y



In [ ]:

    
sc_x = LinearScale()
sc_y = LinearScale()

data_len = len(price_data['Security 1'].values)
line = Lines(x=[np.arange(data_len).tolist(), np.arange(30, data_len).tolist()], 
             y=[price_data['Security 1'].values, price_data['Security 2'].values], 
             scales={'x': sc_x, 'y': sc_y},
             labels=['Security 1', 'Security 2'], display_legend=True, colors=['blue', 'orangered'])
ax_x = Axis(scale=sc_x, label='index')
ax_y = Axis(scale=sc_y, orientation='vertical', label='Security 1')

fig = Figure(marks=[line], axes=[ax_x, ax_y], legend_location='top-left')
display(fig)

Multiple lines with color representing data



In [ ]:

    
sc_x = LinearScale()
sc_y = LinearScale()
col_sc = ColorScale()

data_len = len(price_data['Security 1'].values)
line = Lines(x=[np.arange(data_len).tolist(), np.arange(30, data_len).tolist()], 
             y=[price_data['Security 1'].values, price_data['Security 2'].values], 
             scales={'x': sc_x, 'y': sc_y, 'color': col_sc},
             labels=['Security 1', 'Security 2'], display_legend=True, colors=['blue', 'orangered'],
             color=[-1.0, 1.0])
ax_x = Axis(scale=sc_x, label='index')
ax_y = Axis(scale=sc_y, orientation='vertical', label='Security 1')

fig = Figure(marks=[line], axes=[ax_x, ax_y], legend_location='top-left')
display(fig)



In [ ]:

    
# resetting the color to None
line.color = None

Styling line chart



In [ ]:

    
# Drawing a dashed line
dt_x = LinearScale()
sc_y = LinearScale()

line = Lines(x=[np.arange(data_len).tolist()], 
             y=price_data['Security 1'].values, scales={'x': dt_x, 'y': sc_y},
             line_style='dashed', apply_clip=False, labels=['Brownian'])
ax_x = Axis(scale=dt_x, label='index')
ax_y = Axis(scale=sc_y, orientation='vertical', label='SPX Price')

fig = Figure(marks=[line], axes=[ax_x, ax_y])
display(fig)



In [ ]:

    
# making it dotted
line.line_style = 'dotted'



In [ ]:

    
# increasing the width
line.line_style = 'solid'
line.stroke_width = 3



In [ ]:

    
# Filling the area
line.fill = 'bottom'
line.fill_opacities = [0.4]



In [ ]:

    
# Displaying label at the end of the line.
# For this to be displayed, apply_clip of the line has to be False
line.labels_visibility = 'label'