bokehJS with datetime axis

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.0.1/bokeh.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bokeh/2.0.1/bokeh-api.min.js"></script>
<div id="plot1"></div>

<button id="changeData">Change data</button>

<button id="updateTitle">Update title</button>

JavaScript

// https://stackoverflow.com/questions/58304217/bokehjs-change-title-or-axis

// https://github.com/bokeh/bokeh/issues/7109
// https://github.com/bokeh/bokeh/issues/658

//==========================================
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))
});

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

console.log(x1, y);

//==========================================
var plt = Bokeh.Plotting;
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";

var p = plt.figure({
  width: 600,
  height: 400,
  tools: tools,
  x_axis_type: "datetime",
  //active_scroll: “wheel_zoom”,   // not possible
});

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

p.title = "A test line plot";

// show the plot
plt.show(p);

//==========================================
$("#changeData").on('click', function(event) {
  var new_y = [];
  for (i = 0; i < 6; i++) {
    new_y.push(Math.random() * 10);
  }
  line.data_source.data.y = new_y;
  line.data_source.change.emit();
})

//==========================================
// How to update the title from an event ?
$("#updateTitle").on('click', function(event) {
  console.log("Before: ", p.title);
  p.title = "New title";
  console.log("After: ", p.title);
  p.change.emit(); // Has no effect !!
})

//==========================================
// Also how to active scroll_wheel by default ?