Example: how do I make bokeh omit missing dates when using datetime as x-axis

Question

I was looking for a way to eliminate the "spaces" in the x-axis where there is no data, this for a bokeh graph.

Then I stumbled on an example here: How do I make bokeh omit missing dates when using datetime as x-axis

The example:

from math import pi

import pandas as pd

from bokeh.sampledata.stocks import MSFT
from bokeh.plotting import figure, show, output_file
from bokeh.models.formatters import TickFormatter, String, List

# In this custom TickFormatter, xaxis labels are taken from an array of date
# Strings (e.g. ['Sep 01', 'Sep 02', ...]) passed to the date_labels property. 
class DateGapTickFormatter(TickFormatter):
    date_labels = List(String)

    __implementation__ = """
_ = require "underscore"
HasProperties = require "common/has_properties"

class DateGapTickFormatter extends HasProperties
  type: 'DateGapTickFormatter'

  format: (ticks) ->
    date_labels = @get("date_labels")
    return (date_labels[tick] ? "" for tick in ticks)

module.exports =
  Model: DateGapTickFormatter
"""

df = pd.DataFrame(MSFT)[:50]

# xaxis date labels used in the custom TickFormatter
date_labels = [date.strftime('%b %d') for date in pd.to_datetime(df["date"])]

mids = (df.open + df.close)/2
spans = abs(df.close-df.open)

inc = df.close > df.open
dec = df.open > df.close
w = 0.5

output_file("custom_datetime_axis.html", title="custom_datetime_axis.py example")

TOOLS = "pan,wheel_zoom,box_zoom,reset,save"

p = figure(tools=TOOLS, plot_width=1000, toolbar_location="left")

# Using the custom TickFormatter. You must always define date_labels
p.xaxis[0].formatter = DateGapTickFormatter(date_labels = date_labels)

# x coordinates must be integers. If for example df.index are 
# datetimes, you should replace them with a integer sequence
p.segment(df.index, df.high, df.index, df.low, color="black")
p.rect(df.index[inc], mids[inc], w, spans[inc], fill_color="#D5E1DD", line_color="black")
p.rect(df.index[dec], mids[dec], w, spans[dec], fill_color="#F2583E", line_color="black")

p.title = "MSFT Candlestick with custom x axis"
p.xaxis.major_label_orientation = pi/4

p.grid[0].ticker.desired_num_ticks = 6

show(p)  # open a browser

When I try to run it (with Bokeh 0.11.1), I always get a blank browser page. What am I doing wrong? Also, what's the deal with (and the stuff after): implementation =

UPDATE 16/06:

Thanks for the fast response! I've tried to run it with the new 'implementation' found in 'bigreddot' answer, but I still get a blank browser page. With Bokeh 0.11.1. Now my code looks like:

from math import pi
import pandas as pd

from bokeh.sampledata.stocks import MSFT
from bokeh.plotting import figure, show, output_file
from bokeh.models.formatters import TickFormatter, String, List

# In this custom TickFormatter, xaxis labels are taken from an array of date
# Strings (e.g. ['Sep 01', 'Sep 02', ...]) passed to the date_labels property.
class DateGapTickFormatter(TickFormatter):
    date_labels = List(String)

    __implementation__ = """
    _ = require "underscore"
    Model = require "model"
    p = require "core/properties"

    class DateGapTickFormatter extends Model
      type: 'DateGapTickFormatter'

      doFormat: (ticks) ->
        date_labels = @get("date_labels")
        return (date_labels[tick] ? "" for tick in ticks)

      @define {
        date_labels: [ p.Any ]
      }

    module.exports =
      Model: DateGapTickFormatter
    """

df = pd.DataFrame(MSFT)[:50]

# xaxis date labels used in the custom TickFormatter
date_labels = [date.strftime('%b %d') for date in pd.to_datetime(df["date"])]

mids = (df.open + df.close)/2
spans = abs(df.close-df.open)

inc = df.close > df.open
dec = df.open > df.close
w = 0.5

output_file("custom_datetime_axis.html", title="custom_datetime_axis.py example")

TOOLS = "pan,wheel_zoom,box_zoom,reset,save"

p = figure(tools=TOOLS, plot_width=1000, toolbar_location="left")

# Using the custom TickFormatter. You must always define date_labels
p.xaxis[0].formatter = DateGapTickFormatter(date_labels = date_labels)

# x coordinates must be integers. If for example df.index are
# datetimes, you should replace them with a integer sequence
p.segment(df.index, df.high, df.index, df.low, color="black")
p.rect(df.index[inc], mids[inc], w, spans[inc], fill_color="#D5E1DD", line_color="black")
p.rect(df.index[dec], mids[dec], w, spans[dec], fill_color="#F2583E", line_color="black")

p.title = "MSFT Candlestick with custom x axis"
p.xaxis.major_label_orientation = pi/4

p.grid[0].ticker.desired_num_ticks = 6

show(p)

Am I missing something?

Answer 1

UPDATE: This task can be accomplished in recent releases much more simply, without any JS at all, by configuring label overrides. Here is a complete example:

import pandas as pd

from bokeh.io import show, output_file
from bokeh.plotting import figure
from bokeh.sampledata.stocks import MSFT

df = pd.DataFrame(MSFT)[:51]
inc = df.close > df.open
dec = df.open > df.close

p = figure(plot_width=1000, title="MSFT Candlestick with Custom X-Axis")

# map dataframe indices to date strings and use as label overrides
p.xaxis.major_label_overrides = {
    i: date.strftime('%b %d') for i, date in enumerate(pd.to_datetime(df["date"]))
}
p.xaxis.bounds = (0, df.index[-1])

p.segment(df.index, df.high, df.index, df.low, color="black")
p.vbar(df.index[inc], 0.5, df.open[inc], df.close[inc], fill_color="#D5E1DD", line_color="black")
p.vbar(df.index[dec], 0.5, df.open[dec], df.close[dec], fill_color="#F2583E", line_color="black")


show(p)

Zoomed in on one of the date gaps: