Progress Bar while bokeh loads/processes

Hello,

My website has 3 charts but it takes about 5 -10 seconds for the graphs to appear. I guess bokehjs is doing its thing.

Is there a way i can have a progress bar e.g. like “please wait” while it moves to completion?

Thanks in advance

Saptarshi

My way of handling all of those types of concerns was to have my bokeh application spit out all of the figures and widgets initially and then use a mix of javascript and bokeh to create interest ways to solve problems like that, by having a javascript function that hides/shows relevant pieces of the app based on javascript callbacks passed to the bokeh widgets.

In the case of having a loading screen, I created an empty div of class .loader in bokeh and then style it in CSS to make it a loading animation (something like this. Then when you press the button widget to run the part of the app that takes a while to load, that button has a javascript callback that runs a js function that displays the loader div and hides everything else. Then I use javascript to detect when my app has finished loading, and when it has, it hides the loader div and displays the app. The way I have it detect when the app is finished is by adding a class name to the resulting figure called “bokeh_charts_loaded” or something like that, and you can have javascript search for that class. When it finds it, it will display it.

Here is an example of what I’m talking about, though I can’t promise how long it’ll stay up because that site is just a way for me to play around with web development in general.

Also, I can’t guarantee that any methods I’m doing are perfectly efficient or “best practices.” This is just what I’ve been able to come up with to solve some of the problems I was having.

···

On Monday, March 6, 2017 at 8:10:37 PM UTC-5, [email protected] wrote:

Hello,

My website has 3 charts but it takes about 5 -10 seconds for the graphs to appear. I guess bokehjs is doing its thing.

Is there a way i can have a progress bar e.g. like “please wait” while it moves to completion?

Thanks in advance

Saptarshi

Thanks for the detailed description! I’ll see what i can do

···

On Monday, March 6, 2017 at 9:19:19 PM UTC-8, Jeremy Bowyer wrote:

My way of handling all of those types of concerns was to have my bokeh application spit out all of the figures and widgets initially and then use a mix of javascript and bokeh to create interest ways to solve problems like that, by having a javascript function that hides/shows relevant pieces of the app based on javascript callbacks passed to the bokeh widgets.

In the case of having a loading screen, I created an empty div of class .loader in bokeh and then style it in CSS to make it a loading animation (something like this. Then when you press the button widget to run the part of the app that takes a while to load, that button has a javascript callback that runs a js function that displays the loader div and hides everything else. Then I use javascript to detect when my app has finished loading, and when it has, it hides the loader div and displays the app. The way I have it detect when the app is finished is by adding a class name to the resulting figure called “bokeh_charts_loaded” or something like that, and you can have javascript search for that class. When it finds it, it will display it.

Here is an example of what I’m talking about, though I can’t promise how long it’ll stay up because that site is just a way for me to play around with web development in general.

Also, I can’t guarantee that any methods I’m doing are perfectly efficient or “best practices.” This is just what I’ve been able to come up with to solve some of the problems I was having.

On Monday, March 6, 2017 at 8:10:37 PM UTC-5, [email protected] wrote:

Hello,

My website has 3 charts but it takes about 5 -10 seconds for the graphs to appear. I guess bokehjs is doing its thing.

Is there a way i can have a progress bar e.g. like “please wait” while it moves to completion?

Thanks in advance

Saptarshi

I'm not sure if this is the same person from this SO question:

  http://stackoverflow.com/questions/42699306/why-is-bokeh-so-much-slower-than-matplotlib/42702933#42702933

But if so, if you are using bokeh.charts, the answer is really that bokeh.charts is sometimes unreasonably slow in some situations. With the caveat that there isn't a current maintainer for bokeh.charts, so try bokeh.plotting instead. Unless you are getting into the 100s' of thousands of points, or unless you are adding ~100 renderers and data sources, I would not expect BokehJS to be the source of any slowness.
Thanks,

Bryan

···

On Mar 7, 2017, at 20:00, [email protected] wrote:

Thanks for the detailed description! I'll see what i can do

On Monday, March 6, 2017 at 9:19:19 PM UTC-8, Jeremy Bowyer wrote:
My way of handling all of those types of concerns was to have my bokeh application spit out all of the figures and widgets initially and then use a mix of javascript and bokeh to create interest ways to solve problems like that, by having a javascript function that hides/shows relevant pieces of the app based on javascript callbacks passed to the bokeh widgets.

In the case of having a loading screen, I created an empty div of class .loader in bokeh and then style it in CSS to make it a loading animation (something like this. Then when you press the button widget to run the part of the app that takes a while to load, that button has a javascript callback that runs a js function that displays the loader div and hides everything else. Then I use javascript to detect when my app has finished loading, and when it has, it hides the loader div and displays the app. The way I have it detect when the app is finished is by adding a class name to the resulting figure called "bokeh_charts_loaded" or something like that, and you can have javascript search for that class. When it finds it, it will display it.

Here is an example of what I'm talking about, though I can't promise how long it'll stay up because that site is just a way for me to play around with web development in general.

Also, I can't guarantee that any methods I'm doing are perfectly efficient or "best practices." This is just what I've been able to come up with to solve some of the problems I was having.

On Monday, March 6, 2017 at 8:10:37 PM UTC-5, [email protected] wrote:
Hello,

My website has 3 charts but it takes about 5 -10 seconds for the graphs to appear. I guess bokehjs is doing its thing.
Is there a way i can have a progress bar e.g. like "please wait" while it moves to completion?

Thanks in advance
Saptarshi

--
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 [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/f2d79cd1-8446-46f0-b8db-73cd63b93b11%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hello Jeremy, I have a similar problem and I looked up the app you posted a link to. It looks like exactly what I need. I searched through your github hoping to find a repo with its code but it didn’t seem to me like there was a single place where it was. I’m not very familiar with JS (although I guess I would like to be!) so if I could see how you did it, it would be very instructive. Thanks!

···

On Monday, March 6, 2017 at 11:19:19 PM UTC-6, Jeremy Bowyer wrote:

My way of handling all of those types of concerns was to have my bokeh application spit out all of the figures and widgets initially and then use a mix of javascript and bokeh to create interest ways to solve problems like that, by having a javascript function that hides/shows relevant pieces of the app based on javascript callbacks passed to the bokeh widgets.

In the case of having a loading screen, I created an empty div of class .loader in bokeh and then style it in CSS to make it a loading animation (something like this. Then when you press the button widget to run the part of the app that takes a while to load, that button has a javascript callback that runs a js function that displays the loader div and hides everything else. Then I use javascript to detect when my app has finished loading, and when it has, it hides the loader div and displays the app. The way I have it detect when the app is finished is by adding a class name to the resulting figure called “bokeh_charts_loaded” or something like that, and you can have javascript search for that class. When it finds it, it will display it.

Here is an example of what I’m talking about, though I can’t promise how long it’ll stay up because that site is just a way for me to play around with web development in general.

Also, I can’t guarantee that any methods I’m doing are perfectly efficient or “best practices.” This is just what I’ve been able to come up with to solve some of the problems I was having.

On Monday, March 6, 2017 at 8:10:37 PM UTC-5, [email protected] wrote:

Hello,

My website has 3 charts but it takes about 5 -10 seconds for the graphs to appear. I guess bokehjs is doing its thing.

Is there a way i can have a progress bar e.g. like “please wait” while it moves to completion?

Thanks in advance

Saptarshi

Hi Marcin, you’re right that it’s not on GitHub. I generally only use GitHub as a place to store finished code, rather than using it during development, and I haven’t had a chance to sort of clean up and compile all of the code that went into making that app yet. I would be happy to help you out, though I should mention that I eventually moved away from Bokeh entirely in that project. As I learned more about how flask works and how web development in general works, it became clear that I didn’t need to use Bokeh at all for what I was trying to do.

That being said, the basic idea was this: When you run the function that is going to take a long time to process, the first thing that function did was update the page layout by adding an empty div with the class “loader.” I then had CSS styling and javascript that would ensure the loader div was the element that was displayed, and then at the END of the function it would update the layout again and remove that div. However, I went through a number of solutions similar to that and like I said I eventually switched off of using bokeh entirely and was only using javascript chart libraries and I was processing the data in python by using AJAX calls to my Flask server.

I should note that I am very much a novice here, so don’t assume that what I’m doing is the best way or even the right way :). However, I would be more than happy to try to help with any questions you have.

···

On Thursday, April 13, 2017 at 11:27:51 AM UTC-4, Marcin Jurek wrote:

Hello Jeremy, I have a similar problem and I looked up the app you posted a link to. It looks like exactly what I need. I searched through your github hoping to find a repo with its code but it didn’t seem to me like there was a single place where it was. I’m not very familiar with JS (although I guess I would like to be!) so if I could see how you did it, it would be very instructive. Thanks!

On Monday, March 6, 2017 at 11:19:19 PM UTC-6, Jeremy Bowyer wrote:

My way of handling all of those types of concerns was to have my bokeh application spit out all of the figures and widgets initially and then use a mix of javascript and bokeh to create interest ways to solve problems like that, by having a javascript function that hides/shows relevant pieces of the app based on javascript callbacks passed to the bokeh widgets.

In the case of having a loading screen, I created an empty div of class .loader in bokeh and then style it in CSS to make it a loading animation (something like this. Then when you press the button widget to run the part of the app that takes a while to load, that button has a javascript callback that runs a js function that displays the loader div and hides everything else. Then I use javascript to detect when my app has finished loading, and when it has, it hides the loader div and displays the app. The way I have it detect when the app is finished is by adding a class name to the resulting figure called “bokeh_charts_loaded” or something like that, and you can have javascript search for that class. When it finds it, it will display it.

Here is an example of what I’m talking about, though I can’t promise how long it’ll stay up because that site is just a way for me to play around with web development in general.

Also, I can’t guarantee that any methods I’m doing are perfectly efficient or “best practices.” This is just what I’ve been able to come up with to solve some of the problems I was having.

On Monday, March 6, 2017 at 8:10:37 PM UTC-5, [email protected] wrote:

Hello,

My website has 3 charts but it takes about 5 -10 seconds for the graphs to appear. I guess bokehjs is doing its thing.

Is there a way i can have a progress bar e.g. like “please wait” while it moves to completion?

Thanks in advance

Saptarshi