Bokeh DateRangeSlider misbehaving

I literally just started working with Boken and am struggling with DateRangeSlider. I didn't find much documentation but I used a few pieces of code I found online and managed to get it to work .... more or less.

The problem is that if you try to run the code I wrote, sometimes the slicer works and other times the graph disappears.

16 Sep 2017 - 29 Apr 2021: .

So, I need to understand why it doesn't always work and besides, is there a way to use the values from a column in the daterange, in order to show only available dates (Monday to Friday)? Or is there another solution to what I am trying to do, maybe 2 sliders??Dont's know

I replaced my data with share data because as in that case I don't have data for every day, but only for weekday.

import pandas as pd  import pandas_datareader as web  from bokeh.plotting import figure, output_file, show  from bokeh.models import ColumnDataSource,HoverTool,DateRangeSlider,CustomJS  from bokeh.layouts import column      company = 'TSLA'  df = web.DataReader('TSLA',data_source = 'yahoo', start = '2012-01-01')  tools_to_show = 'pan,crosshair,wheel_zoom,zoom_in,zoom_out,box_zoom,save,reset'    source = ColumnDataSource(data={      'date' : df.index.values,      'close' : df['Close'],      'date_formatted' : df.index.astype(str)  })    source2 = ColumnDataSource(data={      'date' : df.index.values,      'close' : df['Close'],      'date_formatted' : df.index.astype(str)  })    date_range_slider = DateRangeSlider(value=(min(df.index.values), max(df.index.values)),                                       start=min(df.index.values), end=max(df.index.values), step=1)        callback = CustomJS(args=dict(source=source, ref_source=source2), code="""      // print out array of date from, date to      console.log(cb_obj.value);       // dates returned from slider are not at round intervals and include time;      const date_from = Date.parse(new Date(cb_obj.value[0]).toDateString());      const date_to = Date.parse(new Date(cb_obj.value[1]).toDateString());      console.log(date_from, date_to)        // Creating the Data Sources      const data = source.data;      const ref = ref_source.data;        // Creating new Array and appending correctly parsed dates      let new_ref = []            ref["date"].forEach(elem => {          elem = Date.parse(new Date(elem).toDateString());          new_ref.push(elem);          console.log(elem);      })        // Creating Indices with new Array      const from_pos = new_ref.indexOf(date_from);      const to_pos = new_ref.indexOf(date_to) + 1;                 // re-create the source data from "reference"      data["close"] = ref["close"].slice(from_pos, to_pos);      data["date"] = ref["date"].slice(from_pos, to_pos);        source.change.emit();      """)    p = figure(plot_height =800, plot_width = 1200,             x_axis_label='Date', y_axis_label='Close price USD $',x_axis_type='datetime',             tools=tools_to_show,title="Stock Price")    p.line(source=source, x = 'date', y='close',line_width=2)  p.add_tools(HoverTool(      tooltips=[          ( 'date','@date_formatted'),          ( 'close','$@close{0.2f}')      ],mode='vline'))    layout = column(p,date_range_slider)    date_range_slider.js_on_change('value', callback)  output_file('close_chart.html')  show(layout)  

https://stackoverflow.com/questions/67324669/bokeh-daterangeslider-misbehaving April 30, 2021 at 04:31AM