# Responsive plot in Bokeh

Hello
I have several plots on one page but my plots are not responsive. I tested different modes, but I don’t know where the problem is!
In the following, I will write parts of my code.

I couldn’t find the CDN CSS file for bokeh version 2.4 ! Is there no need to add CSS files?

Because the codes are summarized, the output of this code is slightly different from the photos, but the same errors exist.
1- The plot is not responsive.
2- By changing max_width, the size of the plot does not change.

Data:
Data

from bokeh.plotting import figure, show
import pandas as pd
from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, ColumnDataSource,ColumnDataSource
from datetime import datetime as dt
from bokeh.layouts import column
from bokeh.plotting import figure,  show
from bokeh.models import ColumnDataSource,Panel, Tabs, ColumnDataSource,ColumnDataSource
from bokeh.layouts import  column

def my_plot(nn):

dataset = dataset[0:40]
dataset['Date'] = pd.to_datetime(dataset['Date'])
Date_list = list(dataset['Date'])
Date = pd.to_datetime(Date_list, format='%Y-%B-%d')
velocity = dataset["velocity"]

source = ColumnDataSource(data=dict(Date=Date, velocity=velocity))

p = figure(sizing_mode="stretch_width",max_width=1000, height=400)

p.line(x='Date', y='velocity', source=source,line_color="#DAA520", line_width=2, alpha=1)

select = figure(title="Drag the middle and edges of the selection box to change the range above", y_range=p.y_range,
x_axis_type="datetime", y_axis_type=None,tools="", toolbar_location=None, background_fill_color="#efefef",
sizing_mode="stretch_width",max_width=800, height=130)

pp= column(p, select)
return(pp)

# plot res_vel :
p1 = my_plot(1)
tab1 = Panel(child=p1, title="5 days")
p2 = my_plot(2)
tab2 = Panel(child=p2, title="15 days")
p3 = my_plot(3)
tab3 = Panel(child=p3, title="30 days")

Result=Tabs(tabs=[tab1, tab2, tab3])

show(Result)



Correct. Bokeh ships CSS internally with the JS bundles nowadays.

parts of my code

I would happily take a quick closer look, but I would need to be actually run the code. I.e. you need to provide a complete Minimal Reproducible Example.

It’s also not 100% clear what the issue is. E.g. above I see a plot with sizing_mode="stretch_width" and then a corresponding image where the plot seems to have taken up the entire width of its enclosing container. So what is it that is happening or not happening that is contrary to your expectations, you need to be extremely detailed and specific about:

• what exactly you are seeing
• how this differs from your expectations
1 Like

Thankful
I edited the question and it is now testable.
I also changed the pictures.

You need to configure the entire column layout:

column(p, select, sizing_mode="stretch_width")

1 Like

Thank you
When I use the code show(Result) it works fine.
But I want to display the output in an HTML file (in the Django framework) and when I use the following code, the plot is not responsive!

Result = column(sss,sss2,sizing_mode="stretch_width")

script, div = components(Result)

return render(request, r'web\s_info.html', {'script': script, 'div': div,"station_name": str(slug)})


Do you know why?
Thanks

No I don’t and can’t speculate without code to run.

This is the same codes in the question, only for display, the “show” command is not used.

I think the problem is with the following code:
script, div = components(Result)

And then I put “script”, “div” in the html file.
I think I should use another method to display in the HTML file. But I don’t know what method to use!

This is the same codes in the question

That’s irrelevant. The issue is almost certainly with HTML template that you are embedding into, which you have not provided. To get help with a “why isn’t this working” question, you must provide a complete Minimal Reproducible Example that reproduces your actual problem. In this case your problem is: “plots are not responsive when I embed them in my template”, which means your MRE needs to contain the (crucially relevant) templating portion.

Thankful
You said to provide a Minimal Reproducible Example, but it takes time to make.
In my opinion, I will provide the following code first, maybe there is a problem in it.
This is my html code.
Do you see a problem with it?

{% extends 'base.html' %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center plot_info" id="fault_info">
<div class="row plot_info" >
<div class=" plot_info" >
<div class="plot_info">
</div>
<div id="plot" style=" direction: ltr;">
{{div| safe}}
</div>
</div>
</div>

</div>
{% endblock content %}
{% block otherjs %}
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.0.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.0.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.0.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.0.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.0.min.js"
crossorigin="anonymous"></script>
{{script| safe}}
{% endblock otherjs %}


I can’t investigate and diagnose what I can’t actually run myself. Maybe someone else here will have ideas for you.

Taking the time to make an MRE is a small price to pay for free help on the internet. Furthermore you’d be amazed at how often you end up solving your problem halfway through making it, → has happened to me more times than I can count.

1 Like

thanks guys
Sometimes talking about a problem solves it.
I thought the problem was with the Python and Bekou codes, but Bryan said the problem was with the HTML codes.
So I went and checked it out and displayed the chart in a simple, basic HTML page and saw that it was working fine and the problem was with my css code.
And the problem is solved.
@Bryan Thank you for your support and help.

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.