A hack to display a HoverTool with local timezone timestamps when streaming data from server

Community Support
1

I was struggling hard to find a way to display time in local (browser) timezone - it’s not currently supported by existing “formatters”-

Sharing it mostly for knowledge:

hover_ts_update_callback = CustomJS(args={'data_source':data_source}, code="""

    var el_arr = document.querySelectorAll('.hover_timestamp')

    el_arr.forEach(function(el) {

        if (cb_data.index['0d'].indices[0]) {
            var tick = data_source.data['time'][cb_data.index['0d'].indices[0]];
            var date = new Date(tick);
            var date_str = date.toLocaleDateString('en-EN', {
              hour: '2-digit',
              minute: '2-digit',
              second: '2-digit',
              hour12: false,
              month: 'short',
              day: 'numeric'
            });

            el.innerHTML = date_str;
        }
    })
""")

historical_hover_tool = HoverTool(
    tooltips=[('timestamp', '<div style="min-width: 100px;"><span class="hover_timestamp"></span></div>')] +
        [(var, '@%s{0.000}' % var) for var in signals],
    callback=hover_ts_update_callback,
)

fig = figure(
    tools = [historical_hover_tool],
)
2

FYI this will make things much simpler when it's done:

  allow custom formatter when using the hover tool · Issue #7647 · bokeh/bokeh · GitHub

I hope it's in the next release but will be worked on reasonably soon in any case.

Thanks,

Bryan

···

On Apr 17, 2018, at 11:24, Meir Tseitlin <[email protected]> wrote:

I was struggling hard to find a way to display time in local (browser) timezone - it's not currently supported by existing "formatters"-

Sharing it mostly for knowledge:

hover_ts_update_callback = CustomJS(args={'data_source':data_source}, code="""

    var el_arr = document.querySelectorAll('.hover_timestamp')

    el_arr.forEach(function(el) {
    
        if (cb_data.index['0d'].indices[0]) {
            var tick = data_source.data['time'][cb_data.index['0d'].indices[0]];
            var date = new Date(tick);
            var date_str = date.toLocaleDateString('en-EN', {
              hour: '2-digit',
              minute: '2-digit',
              second: '2-digit',
              hour12: false,
              month: 'short',
              day: 'numeric'
            });
        
            el.innerHTML = date_str;
        }
    })
""")

historical_hover_tool = HoverTool(
    tooltips=[('timestamp', '<div style="min-width: 100px;"><span class="hover_timestamp"></span></div>')] +
        [(var, '@%s{0.000}' % var) for var in signals],
    callback=hover_ts_update_callback,
)

fig = figure(
    tools = [historical_hover_tool],
)

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/a825c166-04bc-420c-aa5c-cfc6a07acb08%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.