Simple wrapper for embedding Bokehplot in a vue-component.
Installation
npm i vue-bokeh --save-dev
Include:
<link href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.2.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.2.min.js"></script>
Might be easier to just copy the code from BokehPlot.vue.
Its very small and then you will have one less dependency.
Usage
<template>
<bokeh-plot :plot="plot"></bokeh-plot>
</template>
<script>
import { fetchPlot } from '../vuex/actions'
import BokehPlot from 'vue-bokeh'
export default {
components: {
'bokeh-plot': BokehPlot
},
vuex: {
getters: {
plot: ({ plot }) => plot
},
actions: {
fetchPlot
}
},
ready () {
this.fetchPlot()
}
}
</script>
<style>
</style>
from flask import Flask, jsonify
from flask_cors import cross_origin
from bokeh.plotting import figure
from bokeh.embed import components
app = Flask(__name__)
@app.route("/get-plot")
@cross_origin()
def get_plot():
plot = figure(plot_height=250, responsive = True)
plot.circle([1, 2], [3, 4])
script, div = components(plot, wrap_script=False)
return jsonify({'div': div, 'script': script})
app.run(debug=True)
