""" This example shows how a Bokeh plot can be embedded in an HTML
document, in a way that the plot resizes to make use of the available
width and height (while keeping the aspect ratio fixed).
To make this work well, the plot should be placed in a container that
*has* a certain width and height (i.e. non-scrollable), which is the
body element in this case. A more realistic example might be embedding
a plot in a Phosphor widget.
"""
import random
from jinja2 import Template
from bokeh.embed import components
from bokeh.plotting import figure
from bokeh.resources import INLINE
from bokeh.util.browser import view
########## BUILD FIGURES ################
PLOT_OPTIONS = dict(plot_width=600, plot_height=400)
SCATTER_OPTIONS = dict(size=12, alpha=0.5)
data = lambda: [random.choice([i for i in range(100)]) for r in range(10)]
red = figure(responsive=False, tools='pan', **PLOT_OPTIONS)
red.scatter(data(), data(), color="red", **SCATTER_OPTIONS)
########## RENDER PLOTS ################
# Define our html template for out plots
template = Template('''
Responsive plots
{{ js_resources }}
{{ css_resources }}
{{ plot_div.red }}
{{ plot_script }}
''')
resources = INLINE
js_resources = resources.render_js()
css_resources = resources.render_css()
script, div = components({'red': red})
html = template.render(js_resources=js_resources,
css_resources=css_resources,
plot_script=script,
plot_div=div)
filename = 'embed_responsive_width_height.html'
with open(filename, 'w') as f:
f.write(html)
view(filename)