You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a Flask app that displays a Bokeh plot using Htmx. The plot uses x and y values from the form inputs. Each time the form is submitted, the entire Bokeh plot is redrawn which creates a new plot figure. I would prefer to only update the Bokeh plot with the new x and y values instead of creating a new plot figure. Bokeh has a ColumnDataSource which appears to provide a method to update the data instead of creating an entirely new plot figure. So my question is, how do I use this ColumnDataSource with Htmx to update the plot's data?
# app.pyfromflaskimportFlaskfromflaskimportrender_templatefromflaskimportrequestfrombokeh.plottingimportfigurefrombokeh.embedimportcomponentsapp=Flask(__name__)
@app.route('/')defindex():
returnrender_template('index.html')
@app.route('/plot', methods=['POST'])defplot():
# Get the form inputsxdata=request.form['xdata']
ydata=request.form['ydata']
# Convert form input to a list of floats representing x and y valuesx=list(map(float, xdata.split(', ')))
y=list(map(float, ydata.split(', ')))
# Create a Bokeh plot using the x and y valuesp=figure(plot_width=400, plot_height=400)
p.circle(x, y, size=12, line_color='navy', fill_color='orange')
# Get HTML components to embed in a web pagescript, div=components(p)
returnrender_template('plot.html', script=script, div=div)
The HTML templates are shown below.
<!-- templates/index.html --><!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport" content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"><scriptsrc="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js" crossorigin="anonymous"></script><title>Home Page</title><styletype="text/css">
body { background-color: lightgray; }
input { max-width: 200px; }
</style></head><body><divclass="container"><divclass="row"><divclass="col"><h1class="mt-3">Submit data</h1><p>Input the x and y data points using comma separated values.</p><formhx-post="/plot" hx-target="#graph" hx-trigger="load, submit"><divclass="mb-3"><labelfor="xdata" class="form-label">X data</label><inputtype="text" class="form-control" name="xdata" value="1, 2, 3, 4, 5, 4, 2"></div><divclass="mb-3"><labelfor="ydata" class="form-label">Y data</label><inputtype="text" class="form-control" name="ydata" value="6, 7, 2, 4, 5, 3.2, 4"></div><buttontype="submit" class="btn btn-primary">Submit</button></form></div><divclass="col"><h1class="mt-3">Plot data</h1><p>Below is a line plot using the X and Y data points.</p><divid="graph"></div></div></div></div><scriptsrc="https://unpkg.com/[email protected]" integrity="sha384-tvG/2mnCFmGQzYC1Oh3qxQ7CkQ9kMzYjWZSNtrRZygHPDDqottzEJsqS4oUVodhW" crossorigin="anonymous"></script></body></html>
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I have a Flask app that displays a Bokeh plot using Htmx. The plot uses x and y values from the form inputs. Each time the form is submitted, the entire Bokeh plot is redrawn which creates a new plot figure. I would prefer to only update the Bokeh plot with the new x and y values instead of creating a new plot figure. Bokeh has a ColumnDataSource which appears to provide a method to update the data instead of creating an entirely new plot figure. So my question is, how do I use this
ColumnDataSourcewith Htmx to update the plot's data?The HTML templates are shown below.
<!-- templates/plot.html --> {{ script | safe }} {{ div | safe }}Beta Was this translation helpful? Give feedback.
All reactions