bokehJS linked on x_range

by Patrick Brockmann

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/2.1.1/bokeh.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/2.1.1/bokeh-api.min.js"></script>


<button id="add">Add</button>

CSS

#plot1, #plot2 {
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

JavaScript

//==========================================
x0 = ["2001-01-01T00:00:00Z", "2001-02-01T00:00:00Z", "2001-03-01T00:00:00Z", "2001-04-01T00:00:00Z", "2001-05-01T00:00:00Z"];
x1 = [];
x0.forEach(function(entry) {
  x1.push(Date.parse(entry))
});

y1 = [];
y2 = [];
for (i = 0; i < 6; i++) {
  y1.push(Math.random() * 10);
  y2.push(Math.random() * 10);
}

//==========================================
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";

//==========================================
var xdr = new Bokeh.DataRange1d({
  bounds: "none"
});

//==========================================
var p1 = new Bokeh.Plotting.figure({
  width: 400,
  height: 200,
  tools: tools,
  x_axis_type: "datetime",
  active_scroll:  "wheel_zoom", // does no work
  x_range: xdr
});

var line = p1.line(x1, y1, {
  line_width: 2,
  line_color: "#0000FF"
});

p1.title = "Plot1";

var a;
var doc1 = Bokeh.Plotting.show(p1)
  .then(function(doc) {
  	a = doc.model.x_range;
  })

//==========================================
var p2 = new Bokeh.Plotting.figure({
  width: 400,
  height: 200,
  tools: tools,
  active_scroll:  "wheel_zoom", // does no work
  x_axis_type: "datetime",
});

var line = p2.line(x1, y2, {
  line_width: 2,
  line_color: "#FF0000"
});

p2.title = "Plot2";

//==========================================
$("#add").on("click", function() {
  var doc2 = Bokeh.Plotting.show(p2)
  .then(function(doc) {
  	doc.model.x_range = a;
  });
});