Archived discussions · Captured October 28, 2026

Bokeh is rendering very slowly to the browser

Mail_ListsMar 02, 2016 #1

Hi All,

I’m trying to plot data streaming from a room humidity sensor. The data plots file for a few points then almost stops updating despite new points coming in. Ive tried this in both Firefox and Chrome with the same effect. Here is my plot setup:

# Setup the room humidity
p_humd = figure(plot_width=250,plot_height=250,x_range=(-300,0), y_range=(20,40),title_text_font_size='8pt', toolbar_location=None)
p_humd.outline_line_color = "navy"
p_humd.outline_line_width = 7
p_humd.outline_line_alpha = 0.3
p_humd.background_fill_color = 'white'
p_humd.outline_line_color = None
p_humd.grid.grid_line_color = None
ard_humd = p_humd.line(x=[], y=[],color='navy', line_width=4)
p_humd.title = "Relative Humidity"
p_humd.xaxis.axis_label = 'seconds'
p_humd.yaxis.axis_label = '%'
p_humd.xaxis.axis_label_text_font_size = '8pt'
p_humd.yaxis.axis_label_text_font_size = '8pt'

Here is how I update the data in the plot:

H_store.append(humidity) # store the humidity value in an array
ard_humd.data_source.data[“x”] = np.linspace(-10*len(AH_store), 0, len(AH_store))
ard_humd.data_source.data[“y”] = AH_store

Why is this so slow?

Thanks!

⌁ Link to post

Mail_ListsMar 02, 2016 #2

a small updated. The plotting isnt just slow, its frozen. Interestingly, on another computer the plotting does work.

···

On Wednesday, 2 March 2016 17:54:52 UTC-5, RedRaven wrote:

Hi All,

I’m trying to plot data streaming from a room humidity sensor. The data plots file for a few points then almost stops updating despite new points coming in. Ive tried this in both Firefox and Chrome with the same effect. Here is my plot setup:

# Setup the room humidity
p_humd = figure(plot_width=250,plot_height=250,x_range=(-300,0), y_range=(20,40),title_text_font_size='8pt', toolbar_location=None)
p_humd.outline_line_color = "navy"
p_humd.outline_line_width = 7
p_humd.outline_line_alpha = 0.3
p_humd.background_fill_color = 'white'
p_humd.outline_line_color = None
p_humd.grid.grid_line_color = None
ard_humd = p_humd.line(x=[], y=[],color='navy', line_width=4)
p_humd.title = "Relative Humidity"
p_humd.xaxis.axis_label = 'seconds'
p_humd.yaxis.axis_label = '%'
p_humd.xaxis.axis_label_text_font_size = '8pt'
p_humd.yaxis.axis_label_text_font_size = '8pt'

Here is how I update the data in the plot:

H_store.append(humidity) # store the humidity value in an array
ard_humd.data_source.data[“x”] = np.linspace(-10*len(AH_store), 0, len(AH_store))
ard_humd.data_source.data[“y”] = AH_store

Why is this so slow?

Thanks!

⌁ Link to post

Mail_ListsMar 03, 2016 #3

Nobody? let me add some more information. The data update happens in a callback function:

def update():

H_store.append(humidity) # store the humidity value in an array
ard_humd.data_source.data[“x”] = np.linspace(-10*len(AH_store), 0, len(AH_store))
ard_humd.data_source.data[“y”] = AH_store


the update function is periodically called to update the plot. Here is my update call.

curdoc().add_periodic_callback(update, 100)


I tested the functionality across Chrome, Firefox and IE. It looks like if I increase the callback interval it does not free. However, if I increase the callback too much I will start to lag behind the real-time process.

Its my impression that Bokeh is supposed to help with real-time graphics. How can I optimize this so that Im not freezing the plot updates but Im also fast enough for the process.

Anyone?

<details class='elided'>
<summary title='Show trimmed content'>&#183;&#183;&#183;</summary>

On Wednesday, 2 March 2016 17:54:52 UTC-5, RedRaven wrote:
> Hi All,
> 

> I'm trying to plot data streaming from a room humidity sensor. The data plots file for a few points then almost stops updating despite new points coming in. Ive tried this in both Firefox and Chrome with the same effect.  Here is my plot setup:

> 

> ```
> # Setup the room humidity
> p_humd = figure(plot_width=250,plot_height=250,x_range=(-300,0), y_range=(20,40),title_text_font_size='8pt', toolbar_location=None)
> p_humd.outline_line_color = "navy"
> p_humd.outline_line_width = 7
> p_humd.outline_line_alpha = 0.3
> p_humd.background_fill_color = 'white'
> p_humd.outline_line_color = None
> p_humd.grid.grid_line_color = None
> ard_humd = p_humd.line(x=[], y=[],color='navy', line_width=4)
> p_humd.title = "Relative Humidity"
> p_humd.xaxis.axis_label = 'seconds'
> p_humd.yaxis.axis_label = '%'
> p_humd.xaxis.axis_label_text_font_size = '8pt'
> p_humd.yaxis.axis_label_text_font_size = '8pt'
> ```
> ```
> 
> 
> ```
> ```
> Here is how I update the data in the plot:
> ```
> ```
> 
> 
> ```
> ```
> ```
> H_store.append(humidity) # store the humidity value in an array
> ard_humd.data_source.data["x"] = np.linspace(-10*len(AH_store), 0, len(AH_store))
> ard_humd.data_source.data["y"] = AH_store
> ```
> ```
> 
> 
> ```
> ```
> Why is this so slow?
> ```
> ```
> 
> 
> ```
> ```
> Thanks!
> ```

</details>

⌁ Link to post

BryanMar 03, 2016 #4

A few notes:

This is inefficient:

ard_humd.data_source.data["x"] = np.linspace(-10*len(AH_store), 0, len(AH_store))
ard_humd.data_source.data["y"] = AH_store

Since it triggers two patch messages to the server. If you need to update all the data, you should always prefer to update the entire .data attribute in one go, something like:

new_data = ard_humd.data_source.data

  # update the regular python new_data dict here

  # this triggers a single message to the server
  ard_humd.data_source.data = new_data

However, this is sending *all* the data, on every update. If you just need to add a small number of new values (to *every* column in a given column data source, simultaneously --- remember all columns in a single CDS always needs to be the same length, think of CDS as a cheap DataFrame), you should look into the .stream method on column data source, demonstrated here:

https://github.com/bokeh/bokeh/blob/master/examples/app/ohlc/main.py#L61-L95

This method takes a dict with just the new data for each column, and sends only that smaller update to the server (optionally rolling over to a fixed buffer size if asked for).

Of course, .stream is only useful if you are wanting to add new points to existing data (imagine a streaming updating time series, where you just need to send the newest points every update). If your use-case is such that you actually need to replace all the data on every update, well then you have to replace all the data... In which case the questions are: How big is AH_store, and: What is your update rate? For instance, if AH_store is 10,000 and you are updating at 30 Hz, it's probably not going to work currently. Perhaps when the binary array protocol can be added, update rates like that will possible. If the size*rate is much lower, then I would expect it to work, won't be able to say much more without a minimal, complete, runnable example that reproduces the problem to investigate.

Thanks,

Bryan

···

On Mar 3, 2016, at 9:29 AM, RedRaven <remus984@gmail.com> wrote:

Nobody? let me add some more information. The data update happens in a callback function:

def update():
H_store.append(humidity) # store the humidity value in an array
ard_humd.data_source.data["x"] = np.linspace(-10*len(AH_store), 0, len(AH_store))
ard_humd.data_source.data["y"] = AH_store

the update function is periodically called to update the plot. Here is my update call.
curdoc().add_periodic_callback(update, 100)

I tested the functionality across Chrome, Firefox and IE. It looks like if I increase the callback interval it does not free. However, if I increase the callback too much I will start to lag behind the real-time process.

Its my impression that Bokeh is supposed to help with real-time graphics. How can I optimize this so that Im not freezing the plot updates but Im also fast enough for the process.

Anyone?

On Wednesday, 2 March 2016 17:54:52 UTC-5, RedRaven wrote:
Hi All,

I'm trying to plot data streaming from a room humidity sensor. The data plots file for a few points then almost stops updating despite new points coming in. Ive tried this in both Firefox and Chrome with the same effect. Here is my plot setup:

# Setup the room humidity
p_humd = figure(plot_width=250,plot_height=250,x_range=(-300,0), y_range=(20,40),title_text_font_size='8pt', toolbar_location=None)
p_humd.outline_line_color = "navy"
p_humd.outline_line_width = 7
p_humd.outline_line_alpha = 0.3
p_humd.background_fill_color = 'white'
p_humd.outline_line_color = None
p_humd.grid.grid_line_color = None
ard_humd = p_humd.line(x=, y=,color='navy', line_width=4)
p_humd.title = "Relative Humidity"
p_humd.xaxis.axis_label = 'seconds'
p_humd.yaxis.axis_label = '%'
p_humd.xaxis.axis_label_text_font_size = '8pt'
p_humd.yaxis.axis_label_text_font_size = '8pt'

Here is how I update the data in the plot:

H_store.append(humidity) # store the humidity value in an array
ard_humd.data_source.data["x"] = np.linspace(-10*len(AH_store), 0, len(AH_store))
ard_humd.data_source.data["y"] = AH_store

Why is this so slow?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/5d2665be-bc72-48b2-aac9-9b020d30891b%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

Mail_ListsMar 03, 2016 #5

Hi Brian,

Thank you so much for getting back to me. You are exactly right. I knew this was inefficient but I didnt know how to improve on it. I am actually in the situation where I want to update streaming values from a time series.

I am looking at your example now:
https://github.com/bokeh/bokeh/blob/master/examples/app/ohlc/main.py#L61-L95

I have two questions:

I would like to display streaming values but I want to limit the stream to only the last few (ex. 100 values). My impression is that .stream appends the new data to the existing CDS on the server. Is this correct? How can I remove old values?
What is the rotating buffer? I think it would answer my first question but Im not sure.

Thanks again for your help!

···

On Wednesday, 2 March 2016 17:54:52 UTC-5, RedRaven wrote:

Hi All,

I’m trying to plot data streaming from a room humidity sensor. The data plots file for a few points then almost stops updating despite new points coming in. Ive tried this in both Firefox and Chrome with the same effect. Here is my plot setup:

# Setup the room humidity
p_humd = figure(plot_width=250,plot_height=250,x_range=(-300,0), y_range=(20,40),title_text_font_size='8pt', toolbar_location=None)
p_humd.outline_line_color = "navy"
p_humd.outline_line_width = 7
p_humd.outline_line_alpha = 0.3
p_humd.background_fill_color = 'white'
p_humd.outline_line_color = None
p_humd.grid.grid_line_color = None
ard_humd = p_humd.line(x=[], y=[],color='navy', line_width=4)
p_humd.title = "Relative Humidity"
p_humd.xaxis.axis_label = 'seconds'
p_humd.yaxis.axis_label = '%'
p_humd.xaxis.axis_label_text_font_size = '8pt'
p_humd.yaxis.axis_label_text_font_size = '8pt'

Here is how I update the data in the plot:

H_store.append(humidity) # store the humidity value in an array
ard_humd.data_source.data[“x”] = np.linspace(-10*len(AH_store), 0, len(AH_store))
ard_humd.data_source.data[“y”] = AH_store

Why is this so slow?

Thanks!

⌁ Link to post

BryanMar 03, 2016 #6

Hi,

This particular function is not as well documented as it should be, my apologies. The .stream method takes an optional "rollover" argument:

https://github.com/bokeh/bokeh/blob/master/bokeh/models/sources.py#L225

By default it is None, which means to simply append to the existing data unconditionally. But you can set it to a positive integer value, in which case the columns of the data source are truncated (values from the beginning are removed) to maintain column lengths less than the value you specified.

Bryan

···

On Mar 3, 2016, at 11:47 AM, RedRaven <remus984@gmail.com> wrote:

Hi Brian,

Thank you so much for getting back to me. You are exactly right. I knew this was inefficient but I didnt know how to improve on it. I am actually in the situation where I want to update streaming values from a time series.

I am looking at your example now:
https://github.com/bokeh/bokeh/blob/master/examples/app/ohlc/main.py#L61-L95

I have two questions:

- I would like to display streaming values but I want to limit the stream to only the last few (ex. 100 values). My impression is that .stream appends the new data to the existing CDS on the server. Is this correct? How can I remove old values?

- What is the rotating buffer? I think it would answer my first question but Im not sure.

Thanks again for your help!

On Wednesday, 2 March 2016 17:54:52 UTC-5, RedRaven wrote:
Hi All,

I'm trying to plot data streaming from a room humidity sensor. The data plots file for a few points then almost stops updating despite new points coming in. Ive tried this in both Firefox and Chrome with the same effect. Here is my plot setup:

# Setup the room humidity
p_humd = figure(plot_width=250,plot_height=250,x_range=(-300,0), y_range=(20,40),title_text_font_size='8pt', toolbar_location=None)
p_humd.outline_line_color = "navy"
p_humd.outline_line_width = 7
p_humd.outline_line_alpha = 0.3
p_humd.background_fill_color = 'white'
p_humd.outline_line_color = None
p_humd.grid.grid_line_color = None
ard_humd = p_humd.line(x=, y=,color='navy', line_width=4)
p_humd.title = "Relative Humidity"
p_humd.xaxis.axis_label = 'seconds'
p_humd.yaxis.axis_label = '%'
p_humd.xaxis.axis_label_text_font_size = '8pt'
p_humd.yaxis.axis_label_text_font_size = '8pt'

Here is how I update the data in the plot:

H_store.append(humidity) # store the humidity value in an array
ard_humd.data_source.data["x"] = np.linspace(-10*len(AH_store), 0, len(AH_store))
ard_humd.data_source.data["y"] = AH_store

Why is this so slow?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/c75ef012-adc8-4b3f-b53d-3126d394631b%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

Mail_ListsMar 03, 2016 #7

Hi Brian,

Thanks again for all your help. Two questions:

In your example: https://github.com/bokeh/bokeh/blob/master/examples/app/ohlc/main.py#L61-L95

where does t come from? You input t into update(t) but I cant find any place where t is generated.

Was .stream part of Bokeh 0.11.0? If not, would code written in Bokeh 0.11.0 work in Bokeh 0.11.1?

Thanks!

···

On Wednesday, 2 March 2016 17:54:52 UTC-5, RedRaven wrote:

Hi All,

I’m trying to plot data streaming from a room humidity sensor. The data plots file for a few points then almost stops updating despite new points coming in. Ive tried this in both Firefox and Chrome with the same effect. Here is my plot setup:

# Setup the room humidity
p_humd = figure(plot_width=250,plot_height=250,x_range=(-300,0), y_range=(20,40),title_text_font_size='8pt', toolbar_location=None)
p_humd.outline_line_color = "navy"
p_humd.outline_line_width = 7
p_humd.outline_line_alpha = 0.3
p_humd.background_fill_color = 'white'
p_humd.outline_line_color = None
p_humd.grid.grid_line_color = None
ard_humd = p_humd.line(x=[], y=[],color='navy', line_width=4)
p_humd.title = "Relative Humidity"
p_humd.xaxis.axis_label = 'seconds'
p_humd.yaxis.axis_label = '%'
p_humd.xaxis.axis_label_text_font_size = '8pt'
p_humd.yaxis.axis_label_text_font_size = '8pt'

Here is how I update the data in the plot:

H_store.append(humidity) # store the humidity value in an array
ard_humd.data_source.data[“x”] = np.linspace(-10*len(AH_store), 0, len(AH_store))
ard_humd.data_source.data[“y”] = AH_store

Why is this so slow?

Thanks!

⌁ Link to post

BryanMar 03, 2016 #8

Hi,

the parameter comes from the "count" decorator:

https://github.com/bokeh/bokeh/blob/master/examples/app/ohlc/main.py#L60

All of the "driver" decorators are documented here:

bokeh.driving — Bokeh 3.3.2 Documentation

I believe .stream was added in 0.11.1, and by-and-large any 0.11 code should be fine on 0.11.1 AFAIK. There are a few migration notes in the release page:

http://bokeh.pydata.org/en/latest/docs/releases/0.11.1.html

but I doubt that any of those few things things would affect you. That said, while we are trying to become much better about noting any incompatibilities between versions, with an aye towards strict semantic versioning post-1.0, it's not impossible we missed something. If you encounter any issue please let us know so we can update that list.

Bryan

···

On Mar 3, 2016, at 1:28 PM, RedRaven <remus984@gmail.com> wrote:

Hi Brian,

Thanks again for all your help. Two questions:

1. In your example: https://github.com/bokeh/bokeh/blob/master/examples/app/ohlc/main.py#L61-L95

where does t come from? You input t into update(t) but I cant find any place where t is generated.

2. Was .stream part of Bokeh 0.11.0? If not, would code written in Bokeh 0.11.0 work in Bokeh 0.11.1?

Thanks!

On Wednesday, 2 March 2016 17:54:52 UTC-5, RedRaven wrote:
Hi All,

I'm trying to plot data streaming from a room humidity sensor. The data plots file for a few points then almost stops updating despite new points coming in. Ive tried this in both Firefox and Chrome with the same effect. Here is my plot setup:

# Setup the room humidity
p_humd = figure(plot_width=250,plot_height=250,x_range=(-300,0), y_range=(20,40),title_text_font_size='8pt', toolbar_location=None)
p_humd.outline_line_color = "navy"
p_humd.outline_line_width = 7
p_humd.outline_line_alpha = 0.3
p_humd.background_fill_color = 'white'
p_humd.outline_line_color = None
p_humd.grid.grid_line_color = None
ard_humd = p_humd.line(x=, y=,color='navy', line_width=4)
p_humd.title = "Relative Humidity"
p_humd.xaxis.axis_label = 'seconds'
p_humd.yaxis.axis_label = '%'
p_humd.xaxis.axis_label_text_font_size = '8pt'
p_humd.yaxis.axis_label_text_font_size = '8pt'

Here is how I update the data in the plot:

H_store.append(humidity) # store the humidity value in an array
ard_humd.data_source.data["x"] = np.linspace(-10*len(AH_store), 0, len(AH_store))
ard_humd.data_source.data["y"] = AH_store

Why is this so slow?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/9e6ff6f6-3ccd-4b27-a2fa-86d49e2d9fe0%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

systemJul 21, 2021 #9

⌁ Link to post

End of archived discussion · Replies are disabled