JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.css">
<script src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.5.min.js"></script>
<button onclick="addPoint()">Add some data!</button><br/>
<div id="graph">
</div>
JavaScript
// arrays to hold data
var source = new Bokeh.ColumnDataSource({
data: { x: [1], y: [1] }
});
// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
var plot = Bokeh.Plotting.figure({title:'Example of Random data', tools: tools, height: 300, width: 300});
var scatterData = plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
// Show the plot, appending it to the end of the current
// section of the document we are in.
Bokeh.Plotting.show(plot,document.getElementById("graph"));
function addPoint() {
// The data can be added, but generally all fields must be the
// same length.
source.data.x.push(Math.random());
source.data.y.push(Math.random());
// Also, the DataSource object must be notified when it has changed.
source.change.emit();
}