line = Line(index=[1990, 1991, 1993, 1994], values=[1, 2, 3, 4], height=100)
show(line)
print(line.ref['id'])

plot_height = 300
HTML("<script>Bokeh.index['%s'].model.set('plot_height', %d);</script>" % (line.ref['id'], plot_height))

"""
Explanation: Demo of resizing
Run the cells one at a time. Initially you'll see a squashed up chart. The next cell will let you programatically set it's height.
NOTE: This does not work on vplot, hplot, or grid plot. Currently you can only resize individual plots.
Set height of 'chart'
End of explanation
"""


p = figure(height=100)
p.line(x=[1990, 1991, 1993, 1994], y=[1, 2, 3, 4])
show(p)
print(p.ref['id'])

plot_height = 200
HTML("<script>Bokeh.index['%s'].model.set('plot_height', %d);</script>" % (p.ref['id'], plot_height))

"""
Explanation: Set height of 'figure'
End of explanation
"""


line2 = Line(index=[1990, 1991, 1993, 1994], values=[1, 2, 3, 4], height=100)
show(line2)
print(line2.ref['id'])

"""
Explanation: Set height on window resize
End of explanation
"""


HTML("""
<script>
    Bokeh.$(window).resize(
        function(){
            Bokeh.index["%s"].model.set('plot_height', 400);
        }
    );
</script>
""" % (line2.ref['id']))

"""
Explanation: After running the following cell, the chart will not instantly change it's height. But if you change the size of your browser window, the chart will resize to a plot height of 400.
End of explanation
"""


responsive = Line(index=[1990, 1991, 1993, 1994], values=[1, 2, 3, 4], height=100, width=200)
show(responsive)
print(responsive.ref['id'])

"""
Explanation: Responsive plots
End of explanation
"""


HTML("""
<script> 
    function resize_plot() {
        var containingDivWidth = Bokeh.$('.output_subarea').last().width(),
            plot = Bokeh.index["%s"].model,
            curWidth = plot.get('plot_width'),
            curHeight = plot.get('plot_height');
        aspectRatio = curWidth / curHeight;
        plotWidth = Math.max(containingDivWidth, 300); // This prevents the chart from getting too small.
        plotHeight = parseInt(plotWidth / aspectRatio);
        plot.set('plot_width', plotWidth);
        plot.set('plot_height', plotHeight);
    }
    Bokeh.$(window).resize(resize_plot);
    resize_plot();
</script>
""" % (responsive.ref['id']))

"""
Explanation: After running the cell below, you will be able to resize the browser window and see the plot scale to fit it.
End of explanation
"""


# A little kicker to get nbviewer to run resize_plot 
HTML("<script>Bokeh.$(window).ready(resize_plot);</script>")

"""
Explanation: Note, in your useage, you will probably have a different way of getting the "containingDivWidth." You just need a way to get the width of the div that the plot is living in. In an ipython notebook, it always lives in an output_subarea, so we can just use that.
End of explanation
"""


