Saving Bokeh dashdoard (standalone) with all the data made inside

问题

Is there any method to save Bokeh dashboard after editing it?

For example, I've loaded my dashboard, created some plots and saved them (last tab). And then I want to save my "progress" to .html-file so that I wouldn't have to do all of this again every time after initializing my script.

This is the screenshot of my dashboard:

Thank you!

回答1:

So the solution is:
1
Convert your bokeh-document (your whole dashboard) to .json and download it as a file.

For example, you do it by clicking a button.

#  creating button
download_json = Button(label="Download json", width=70)
# callback
download_json_func = CustomJS(args=dict(source=source_fill_groupby),code="""
function saveText(text, filename){
var a = document.createElement('a');
a.setAttribute('href', 'data:text/plain;charset=utf-8,'+encodeURIComponent(text));
a.setAttribute('download', filename);
a.click()
}
var obj = Bokeh.documents[0].to_json_string();
saveText( JSON.stringify(obj), "filename.json" );
""")
# assigning callback to the button
download_json.js_on_event(ButtonClick, download_json_func)

2
After you've downloaded your file, you need to restore it in the next cell of your Jupyter notebook. Let's say there should be FileInput-widget so that we could upload our file and it'd appear in the div-block.

from bokeh.models.widgets import FileInput
# creating div where our saved dashboard will be shown
div = Div(text='<div id="document-container"></div>', width=500, height=500)
# adding widget
l = FileInput(accept='.json')
# callback
l.js_on_change('value', CustomJS(code="""\
const {Document} = Bokeh.require('document/document');
// uploaded .json-file  
const data = JSON.parse(atob(cb_obj.value));            
const doc = Document.from_json_string(data);
// dashboard to show
Bokeh.embed.add_document_standalone(doc, document.getElementById('document-container'), [], true);                                     
cb_obj.disabled = true;
"""))

show(column(l, div))

It still has some issues - it doesn't show ciryllic correctly and plot won't update their ranges from the last one after which doc was saved if you make new queries and creating new plots. Also there's some problem with saving plots to the last tab - it doesn't work like it works in Bokeh. But at least you can save your "progress" in your researches.

Upd1. To show cyrillic correctly you should use next callback for FileInput:

    l.js_on_change('value', CustomJS(code="""
function b64DecodeUnicode(str) {
    // Going backwards: from bytestream, to percent-encoding, to original string.
    return decodeURIComponent(atob(str).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

const {Document} = Bokeh.require('document/document');
const data = JSON.parse(b64DecodeUnicode(cb_obj.value));
const doc = Document.from_json_string(data);
Bokeh.embed.add_document_standalone(doc, document.getElementById('document-container1'), [], true);
cb_obj.disabled = true;
"""))

来源：https://stackoverflow.com/questions/60950552/saving-bokeh-dashdoard-standalone-with-all-the-data-made-inside

标签

python

bokeh

dashboard