javascript - Bokeh Database Plotting and Updating -

i creating plot display range of product based on specific attributes. modeled design of graph off of bokeh's "movies" example. can run plot navigating source folder , executing "bokeh serve --show shafts" andaconda prompt.

my issue need save html file can distribute multiple people without accompanying database. if attempt save html file

"output_file("slider.html", title="slider.py example")" 

from either movies example or code , run plot html file sliders not update graph. believe issue when run file "bokeh serve --show shafts" andaconda prompt running on server , able access python code continuously.

alternatively, when run html complies code jason format , can no longer access python code. around bokeh added small javascript sections continue update off server.

bokeh gives multiple example of how don't grasp being updated in javascript update graph. i'm not extremely familiar js makes little difficult. simple example give is:

from bokeh.layouts import column bokeh.models import customjs, columndatasource, slider bokeh.plotting import figure, output_file, show  output_file("callback.html") x = [j*0.005 j in range(0, 200)] y = x  source = columndatasource(data=dict(x=x, y=y)) plot = figure(plot_width=400, plot_height=400) plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)  callback = customjs(args=dict(source=source), code="""         var data = source.data;         var f = cb_obj.value         x = data['x']         y = data['y']         (i = 0; < x.length; i++) {             y[i] = math.pow(x[i], f)         }         source.change.emit();     """)  slider = slider(start=0.1, end=4, value=1, step=.1, title="power", callback=callback)  layout = column(slider, plot) show(layout) 

the y[i] being updated update plot can't figure out how relates original python update or why change can effect graph seems outside scope. real question in code, variables need update in order code run off bokeh server.

bellow code. for control in controls: control.on_change('value'....... portion of code updates graph when on server need replace javascript code update when saved html.

callback = customjs(args=dict(source=source), code=""" var data = source.data; selected = shafts[     ((data.weight2g >= min_weight_slider.value) &&     (data.weight2g <= max_weight_slider.value) &&     (data.butt_frequency >= min_butt_freq_slider.value) &&     (data.butt_frequency <= max_butt_freq_slider.value) &&     (data.tip_frequency >= min_tip_freq_slider.value) &&     (data.tip_frequency <= max_tip_freq_slider.value) &&     (data.torque >= min_torque_slider.value) &&     (data.torque <= max_torque_slider.value)) ]; data = selected; source.data = selected; } source.change.emit; """)  min_weight_slider = slider(title="minimum weight", value=40,      start=40.0, end=200.0, step=0.5, callback = callback) callback.args["min_weight_slider"] = min_weight_slider  max_weight_slider = slider(title="maximum weight", value=200, start=40.0, end=200.0, step=0.5, callback = callback) callback.args["max_weight_slider"] = max_weight_slider  min_butt_freq_slider = slider(title="minimum butt frequency", value=180.0, start=100.0, end=500.0, step=10.0, callback = callback) callback.args["min_butt_freq_slider"] = min_butt_freq_slider  max_butt_freq_slider = slider(title="maximum butt frequency", value=500.0, start=100.0, end=500.0, step=10.0, callback = callback) callback.args["max_butt_freq_slider"] = max_butt_freq_slider  min_tip_freq_slider = slider(title="minimum tip frequency", value=180, start=100, end=500, step=10, callback = callback) callback.args["min_tip_freq_slider"] = min_tip_freq_slider  max_tip_freq_slider = slider(title="maximum tip frequency", value=400, start=100, end=500, step=10, callback = callback) callback.args["max_tip_freq_slider"] = max_tip_freq_slider  min_torque_slider = slider(title="minimum torque", value=2, start=1, end=20, step=0.1, callback = callback) callback.args["min_torque_slider"] = min_torque_slider  max_torque_slider = slider(title="maximum torque", value=15, start=1, end=20, step=0.1, callback = callback) callback.args["max_torque_slider"] = max_torque_slider  x_axis = select(title="x axis", options=sorted(axis_map.keys()), value="butt_frequency") callback.args["x_axis"] = x_axis y_axis = select(title="y axis", options=sorted(axis_map.keys()), value="tip_frequency") callback.args["y_axis"] = y_axis   def select_shafts(): selected = shafts[     (shafts.weight2g >= min_weight_slider.value) &     (shafts.weight2g <= max_weight_slider.value) &     (shafts.butt_frequency >= min_butt_freq_slider.value) &     (shafts.butt_frequency <= max_butt_freq_slider.value) &     (shafts.tip_frequency >= min_tip_freq_slider.value) &     (shafts.tip_frequency <= max_tip_freq_slider.value) &     (shafts.torque >= min_torque_slider.value) &     (shafts.torque <= max_torque_slider.value)  ] return selected          #updates  def update(): df = select_shafts()          #re-names above function x_name = axis_map[x_axis.value] y_name = axis_map[y_axis.value]  p.xaxis.axis_label = x_axis.value p.yaxis.axis_label = y_axis.value p.title.text = "%d shafts selected" % len(df) source.data = dict(     x=df[x_name],     y=df[y_name],     color=df["color"],     manufacture=df["manufacture"],     model = df["model"],     type = df["type"],     weight = df["weight"],     flex=df["flex"],     butt_frequency = df["butt_frequency"],     tip_frequency = df["tip_frequency"],     torque=df["torque"],     weight2g = df["weight2g"],     availability = df["availability"],     alpha=df["alpha"] )         controls = [min_weight_slider, max_weight_slider,   min_butt_freq_slider, max_butt_freq_slider, min_tip_freq_slider, max_tip_freq_slider, min_torque_slider, max_torque_slider,x_axis, y_axis]   #for control in controls: #control.on_change('value', lambda attr, old, new: update())  sizing_mode = 'fixed'  # 'scale_width' looks nice   example   inputs = widgetbox(*controls, sizing_mode=sizing_mode)     #widget box produced bokeh  l = layout([ [inputs, p] ], sizing_mode=sizing_mode)  update()  # initial load of data  curdoc().add_root(l) curdoc().title = "shafts"  show(l) 

thanks in advance

i wanted add update on attempts solve problem. realizing when program runs on bokeh server able continually update source data plot function has access to. when program runs js function can update values inside individual dictionary entry keys.

i attempting modify code mock need.

to desired result passed 2 data sets through javascript callback. original data never modified , copy of original data modified based on selected criteria ultimatly updates plot.

callback = customjs(args={"orgdata": originaldata, "moddata": sourcedata}, code="""  var odata = orgdata.data; var updatedata = moddata.data;    var holddata = {'x':[],'y':[],'color':[], 'manufacture':[],'model':[],'type':[], 'weight':[],'flex':[],'butt_frequency':[],'tip_frequency':[], 'torque':[],'weightmes':[],'availability':[],'alpha':[]};  console.log(manufacture_select.value.includes(odata.manufacture[1]));  //console.log(min_weight_slider.value); //console.log((odata.weightmes[1] >= min_weight_slider.value) && (odata.weightmes[1] <= max_weight_slider.value));  var xaxisselection = string(x_axis.value); var yaxisselection = string(y_axis.value); var avalbutselnames = [];  (i = 0; < avalibility_button.active.length; i++){      avalbutselnames.push(avalibility_button.labels[avalibility_button.active[i]]);  } console.log(avalbutselnames) for(i = 0; < odata.manufacture.length; i++){        if((odata.weightmes[i] >= weight_slider.value[0])&&              (odata.weightmes[i] <= weight_slider.value[1]) &&             (odata.butt_frequency[i] >= butt_freq_slider.value[0]) &&             (odata.butt_frequency[i] <= butt_freq_slider.value[1]) &&             (odata.tip_frequency[i] >= tip_freq_slider.value[0]) &&             (odata.tip_frequency[i] <= tip_freq_slider.value[1]) &&             (odata.torque[i] >= torque_slider.value[0]) &&             (odata.torque[i] <= torque_slider.value[1]) &&             (odata.balance_point[i] <= balance_point_slider.value[1]) &&             (odata.balance_point[i] >= balance_point_slider.value[0]) &&             (manufacture_select.value.includes(odata.manufacture[i])) &&             (type_select.value.includes(odata.type[i]))&&             (flex_select.value.includes(odata.flex[i]))&&             (avalbutselnames.includes(odata.availability[i]))         ){            holddata['x'].push(odata[xaxisselection][i]);            holddata['y'].push(odata[yaxisselection][i]);            holddata['color'].push(odata.color[i]);            holddata['manufacture'].push(odata.manufacture[i]);            holddata['model'].push(odata.model[i]);            holddata['type'].push(odata.type[i]);            holddata['weight'].push(odata.weight[i]);            holddata['flex'].push(odata.flex[i]);            holddata['butt_frequency'].push(odata.butt_frequency[i]);            holddata['tip_frequency'].push(odata.tip_frequency[i]);            holddata['torque'].push(odata.torque[i]);            holddata['weightmes'].push(odata.weightmes[i]);            holddata['availability'].push(odata.availability[i]);            holddata['alpha'].push(odata.alpha[i]);            //console.log(i);        }     }     moddata.data = holddata;  labels = plot.get('renderers'); labels[0]["attributes"]["axis_label"] = xaxisselection; labels[2]["attributes"]["axis_label"] = yaxisselection;    """)