Launch Dash from Jupyter Notebook

Question

Is there a way I can launch a Dash dahsboard using the below line of code in Jupyter notebook?

# if __name__ == '__main__':
#     app.run_server(debug=True)

When I try to launch this I get an error.

The only way to correct it is to set debug to false. But then the Dashboard does not update automatically when the data feeding the charts is altered.

Answer 1

EDIT

I just found out that a valuable GitHub user published the following library. This is the direct link to the respective repo. See his documentation and examples to implement it successfully within jupyter. It worked for me.

DON'T understimate this statement before installing the library: "Use of a virtualenv environment is strongly recommended"!

Original Post

I had this problem myself some time ago. I don't know if it is natively fixed by now. The workaround snipped I used back that time is this one. It is directly from Chris himself, but has stil debug = False:

from IPython import display
def show_app(app,  # type: dash.Dash
             port=9999,
             width=700,
             height=350,
             offline=True,
             style=True,
             **dash_flask_kwargs):
    """
    Run the application inside a Jupyter notebook and show an iframe with it
    :param app:
    :param port:
    :param width:
    :param height:
    :param offline:
    :return:
    """
    url = 'http://localhost:%d' % port
    iframe = '<iframe src="{url}" width={width} height={height}></iframe>'.format(url=url,
                                                                                  width=width,
                                                                                  height=height)
    display.display_html(iframe, raw=True)
    if offline:
        app.css.config.serve_locally = True
        app.scripts.config.serve_locally = True
    if style:
        external_css = ["https://fonts.googleapis.com/css?family=Raleway:400,300,600",
                        "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
                        "http://getbootstrap.com/dist/css/bootstrap.min.css", ]

        for css in external_css:
            app.css.append_css({"external_url": css})

        external_js = ["https://code.jquery.com/jquery-3.2.1.min.js",
                       "https://cdn.rawgit.com/plotly/dash-app-stylesheets/a3401de132a6d0b652ba11548736b1d1e80aa10d/dash-goldman-sachs-report-js.js",
                       "http://getbootstrap.com/dist/js/bootstrap.min.js"]

        for js in external_js:
            app.scripts.append_script({"external_url": js})

    return app.run_server(debug=False,  # needs to be false in Jupyter
                          port=port,
                          **dash_flask_kwargs)

So using it like this is switching of callback functions for you? Please show some of the logic of your program. Maybe I can help with further tips. Cheers.