Bokeh Slider custom JS callback

问题:

I am new to Bokeh and trying to implement a Slider callback using CustomJS. I have my sales data grouped by years, months, days. Based on the slider value(1-12), my monthly data has to be changed on the plot. Below is my code for this: Slider values(0-12)- Months numbers X-axis: Days(1-30) y-axis:Sales

df3=df


df3['Date2'] = pd.to_datetime(df['Inv Date'])
df3.set_index('Date2', inplace=True)


df3['month'] = df3.index.month
df3['year'] = df3.index.year
df3['day'] = df3.index.day

df3['Dateday'] = pd.to_datetime(df3[['year','month', 'day']])

source1=df3.groupby(['year','month','day'], as_index = False).sum()

current_month=ColumnDataSource(source1[source1['year']== dt.now().year])


hover3 = HoverTool(
        tooltips = [
            ('day', '@day'),
            ('Sales','@{Sales}{0,0}'),
            ],
        formatters = {
            'day': 'datetime',
            'Sales': 'numeral'}
       )

 p =  figure(
 title='YEARLY SALES',  
 plot_width=600, 
 plot_height=400, 
 min_border=3,

tools = [hover3,'box_zoom','wheel_zoom', 'pan','reset'],  
toolbar_location="above")
p.vbar(x='day', top='Sales', width=0.2, color='#e8bc76', 
source=current_month)
p.xaxis.axis_label = 'Day'
p.xaxis.axis_label_text_font_style = 'normal'
p.xaxis.axis_label_text_font_size = '12pt'
p.yaxis[0].formatter = NumeralTickFormatter(format="0,0")




callback = CustomJS(args=dict(source=current_month), code="""       
        var f = slider.get('value');
        var data = source.data; 

        data1=current_month[current_month['month']== f]
        day=data1[data1['day']]
        Sales=data1[data1['Sales']]
source.trigger('change');
    """)
slider = Slider(start=1, end=12, value=1, step=1, title="power",             
callback=callback)

layout = column(slider, p)

show(layout)

Can anyone please help me out. I am stuck here on filtering my dataframes based on the Custom Callbacks.

回答1:

This will be fairly quick if you want to use bokeh serve, which can call native python callback functions. This is also possible using javascript callback CustomJS as well.

Since I don't have your data, I have generated a dummy data using following code -

import pandas as pd
import random
from datetime import timedelta

df = pd.DataFrame({'base' : ["2017-01-01" for t in range(10000)],
    'Date' : [random.randint(0, 1035) for t in range(10000)], 
                   'Sales' : [random.random() for t in range(10000)]})
df['base'] = pd.to_datetime(df['base'])
df["Date2"] = df.apply(lambda x: x["base"] + timedelta(days=x['Date']), axis=1)
df.drop(['base', 'Date'], axis=1, inplace=True)

This will give 10000 Rows of random sales between 2017 to 2019. In the example below, I have filtered only for 2017.

In the next step, I will generate two ColumnDataSource - one for all 2017 data, and one for only month 1, 2017 data - to create initial graph. The second one will be used to generate vbar

from bokeh.models.widgets import Slider
from bokeh.layouts import widgetbox, column
from bokeh.models import Slider, ColumnDataSource, CustomJS
from bokeh.plotting import figure, curdoc
from bokeh.core.properties import value
from bokeh.models.ranges import FactorRange
from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import ColumnDataSource, CDSView, IndexFilter, BooleanFilter, HoverTool

df.set_index('Date2', inplace=True)
df['month'] = df.index.month
df['year'] = df.index.year
df['day'] = df.index.day
source1=df.groupby(['year','month','day'], as_index = False).sum()
source = source1[source1['year']== 2017]
sourcex = source[source['month'] ==1]
Overall=ColumnDataSource(source)
Curr=ColumnDataSource(sourcex)
boolinit = source['month']==1
view = CDSView(source=Overall, filters=[BooleanFilter(boolinit)])
hover3 = HoverTool(tooltips = [('day', '@day'),('Sales','@{Sales}{0,0}')],
                   formatters = {'day': 'datetime','Sales': 'numeral'})

p =  figure(title='YEARLY SALES',  plot_width=600, plot_height=400, min_border=3,
tools = [hover3,'box_zoom','wheel_zoom', 'pan','reset'],  
toolbar_location="above")

r = p.vbar(x='day', top='Sales', width=0.2, color='#e8bc76', source=Curr)
p.xaxis.axis_label = 'Day'
p.xaxis.axis_label_text_font_style = 'normal'
p.xaxis.axis_label_text_font_size = '12pt'

Now, we will write the javascript callback function, it will change the ColumnDataSource used in vbar by applying filter on the overall ColumnDataSource. Add this to slider callback, and we have a javascript based data filter -

callback = CustomJS(args=dict(source=Overall, sc=Curr), code="""       
        var f = slider.value;
        sc.data['x'] = [];
        sc.data['top'] = [];
        for (var i = 0; i <= source.get_length(); i++){
          if (source.data['month'][i] == f){
            sc.data['day'].push(source.data['day'][i])
            sc.data['Sales'].push(source.data['Sales'][i])
          }
        }
        sc.change.emit();
    """)
slider = Slider(start=1, end=12, value=1, step=1, title="Month", callback=callback)
callback.args["slider"] = slider

layout = column(slider, p)

output_file("Filterdata.html")
#fig.view.filters[0].booleans = indices
show(layout)

This will generate the HTML of following type -

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bokeh Plot</title>
        
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.16.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.16.min.css" type="text/css" />
        
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.16.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.16.min.js"></script>
<script type="text/javascript">
    Bokeh.set_log_level("info");
</script>
    </head>
    <body>
        
        <div class="bk-root">
            <div class="bk-plotdiv" id="1b4d2791-052d-4f87-b697-2703d126d006"></div>
        </div>
        
        <script type="application/json" id="59b3ceeb-f6e4-457f-8243-236ad4e4ecc6">
          {"6e250d5c-2f75-4d15-9ea7-19bd720babe3":{"roots":{"references":[{"attributes":{"callback":null,"formatters":{"Sales":"numeral","day":"datetime"},"renderers":"auto","tooltips":[["day","@day"],["Sales","@{Sales}{0,0}"]]},"id":"07bbdbc1-b49b-4f0e-a9b7-214f33f39250","type":"HoverTool"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"554a6885-1e34-4138-80c0-2dbb98325bc3","type":"BoxAnnotation"},{"attributes":{"children":[{"id":"e8e7c404-9a9e-4a03-bdd4-3f0bcd5dc234","type":"WidgetBox"},{"id":"afe8da60-9dbb-4cea-958f-247636333a7c","subtype":"Figure","type":"Plot"}]},"id":"0a97fc7d-20ab-49fa-b18f-ca63fdc4d277","type":"Column"},{"attributes":{"axis_label":"Day","axis_label_text_font_size":{"value":"12pt"},"axis_label_text_font_style":"normal","formatter":{"id":"1909b1bd-0493-46ce-a5f6-b7dbdc4853c3","type":"BasicTickFormatter"},"plot":{"id":"afe8da60-9dbb-4cea-958f-247636333a7c","subtype":"Figure","type":"Plot"},"ticker":{"id":"238e4175-dd46-4884-b52d-12443011009a","type":"BasicTicker"}},"id":"7e35e0a2-4439-4e0e-a3c1-47fbd9e6fa37","type":"LinearAxis"},{"attributes":{"formatter":{"id":"19bf27b3-a519-4d20-ae4b-1228506e8c65","type":"BasicTickFormatter"},"plot":{"id":"afe8da60-9dbb-4cea-958f-247636333a7c","subtype":"Figure","type":"Plot"},"ticker":{"id":"2ee2fcc2-f073-43b3-9aca-2ee8c03357fa","type":"BasicTicker"}},"id":"e9dd9ab8-79fd-43f3-96a0-3a8b0e833438","type":"LinearAxis"},{"attributes":{"data_source":{"id":"fe1ac751-02a0-4545-89ff-87dbe314a34f","type":"ColumnDataSource"},"glyph":{"id":"aa4dd815-46f2-42c9-9b8a-1779434e9afc","type":"VBar"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"25d28579-4ce2-4d3e-8946-c6e0500c573c","type":"VBar"},"selection_glyph":null,"view":{"id":"c32a4aeb-a7a3-4130-a0e0-af65a56efacf","type":"CDSView"}},"id":"552417f6-d44d-4004-8d17-81b1e4b05e7b","type":"GlyphRenderer"},{"attributes":{"children":[{"id":"eb513edf-4b54-4590-9b7b-d4cc1f60420c","type":"Slider"}]},"id":"e8e7c404-9a9e-4a03-bdd4-3f0bcd5dc234","type":"WidgetBox"},{"attributes":{},"id":"bcfbd38a-8abf-4a13-a5e2-61ebfe5004a1","type":"PanTool"},{"attributes":{"callback":null},"id":"b3d136e0-d5f7-4255-9038-d25e07847ec2","type":"DataRange1d"},{"attributes":{},"id":"1909b1bd-0493-46ce-a5f6-b7dbdc4853c3","type":"BasicTickFormatter"},{"attributes":{"below":[{"id":"7e35e0a2-4439-4e0e-a3c1-47fbd9e6fa37","type":"LinearAxis"}],"left":[{"id":"e9dd9ab8-79fd-43f3-96a0-3a8b0e833438","type":"LinearAxis"}],"min_border":3,"plot_height":400,"renderers":[{"id":"7e35e0a2-4439-4e0e-a3c1-47fbd9e6fa37","type":"LinearAxis"},{"id":"bafbac35-977e-4aff-9a7f-794ec9b01659","type":"Grid"},{"id":"e9dd9ab8-79fd-43f3-96a0-3a8b0e833438","type":"LinearAxis"},{"id":"c72d4b3e-b711-4ba8-a197-82ad4457ed7e","type":"Grid"},{"id":"554a6885-1e34-4138-80c0-2dbb98325bc3","type":"BoxAnnotation"},{"id":"552417f6-d44d-4004-8d17-81b1e4b05e7b","type":"GlyphRenderer"}],"title":{"id":"f6ba763a-1582-4691-8c88-658157e6752c","type":"Title"},"toolbar":{"id":"95b4b9e2-94be-4be2-9761-be749c59ae45","type":"Toolbar"},"toolbar_location":"above","x_range":{"id":"c3a3bd50-523c-4fb1-b623-179318de5821","type":"DataRange1d"},"x_scale":{"id":"366a8395-e407-44d6-9740-75995f462aa6","type":"LinearScale"},"y_range":{"id":"b3d136e0-d5f7-4255-9038-d25e07847ec2","type":"DataRange1d"},"y_scale":{"id":"61100931-0c81-49dd-b38e-b0ba2ad2b715","type":"LinearScale"}},"id":"afe8da60-9dbb-4cea-958f-247636333a7c","subtype":"Figure","type":"Plot"},{"attributes":{"callback":null},"id":"c3a3bd50-523c-4fb1-b623-179318de5821","type":"DataRange1d"},{"attributes":{},"id":"19bf27b3-a519-4d20-ae4b-1228506e8c65","type":"BasicTickFormatter"},{"attributes":{},"id":"f6af654a-341d-45a8-a1a4-c2d17e5ea072","type":"UnionRenderers"},{"attributes":{"overlay":{"id":"554a6885-1e34-4138-80c0-2dbb98325bc3","type":"BoxAnnotation"}},"id":"8bd715e6-c00a-4a79-b615-697fac1cb0ff","type":"BoxZoomTool"},{"attributes":{},"id":"238e4175-dd46-4884-b52d-12443011009a","type":"BasicTicker"},{"attributes":{"dimension":1,"plot":{"id":"afe8da60-9dbb-4cea-958f-247636333a7c","subtype":"Figure","type":"Plot"},"ticker":{"id":"2ee2fcc2-f073-43b3-9aca-2ee8c03357fa","type":"BasicTicker"}},"id":"c72d4b3e-b711-4ba8-a197-82ad4457ed7e","type":"Grid"},{"attributes":{"callback":null,"data":{"Sales":{"__ndarray__":"8NQrVcgzF0BmMWa9ZFEJQI0Nm+l22BFAkpu8wBOxG0CFf2FD7okNQKqmXZOEDhlAwIGsfto5FkBnl1JfhlwQQFbqcDGFTRJAr0Xiczd5IkDSpmZHOyURQNRIWMMZqwVA4DSUAzIkHkDly04nIZsJQAxQHPiCBwpA9bjTr6g0GUBlCMyBLaMdQI0PreXoOQVADFRAxvEIFkAcwvjsW4UPQFBni1oUUxhAJzhcwTr6GkD73ROYc0ERQIIKgPW5OglAjuGAQmxwFkBMPcUNQeEVQGD60x1g+RZAAuog6+lOFEAtXcdh1csRQGrJzOkK3A5ATOF2Rs3rGUA=","dtype":"float64","shape":[31]},"day":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],"index":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],"month":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"year":[2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017]},"selected":{"id":"b457b820-5485-4b7a-9872-3c44fad0cd7a","type":"Selection"},"selection_policy":{"id":"3b7b5e0f-6ed6-43f4-af7c-f949bf6641b9","type":"UnionRenderers"}},"id":"fe1ac751-02a0-4545-89ff-87dbe314a34f","type":"ColumnDataSource"},{"attributes":{},"id":"3b7b5e0f-6ed6-43f4-af7c-f949bf6641b9","type":"UnionRenderers"},{"attributes":{},"id":"366a8395-e407-44d6-9740-75995f462aa6","type":"LinearScale"},{"attributes":{},"id":"b457b820-5485-4b7a-9872-3c44fad0cd7a","type":"Selection"},{"attributes":{"args":{"sc":{"id":"fe1ac751-02a0-4545-89ff-87dbe314a34f","type":"ColumnDataSource"},"slider":{"id":"eb513edf-4b54-4590-9b7b-d4cc1f60420c","type":"Slider"},"source":{"id":"b605ddc1-1408-4956-864f-c602df6f550a","type":"ColumnDataSource"}},"code":"       \n        var f = slider.value;\n        sc.data['x'] = [];\n        sc.data['top'] = [];\n        for (var i = 0; i &lt;= source.get_length(); i++){\n          if (source.data['month'][i] == f){\n            sc.data['x'].push(source.data['day'][i])\n            sc.data['top'].push(source.data['Sales'][i])\n          }\n        }\n        sc.change.emit();\n    "},"id":"46a732ae-b9c4-4617-b4fe-831f344608ec","type":"CustomJS"},{"attributes":{},"id":"0f4916a7-aa28-4cdb-839e-f4de9080462d","type":"WheelZoomTool"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_scroll":"auto","active_tap":"auto","tools":[{"id":"07bbdbc1-b49b-4f0e-a9b7-214f33f39250","type":"HoverTool"},{"id":"8bd715e6-c00a-4a79-b615-697fac1cb0ff","type":"BoxZoomTool"},{"id":"0f4916a7-aa28-4cdb-839e-f4de9080462d","type":"WheelZoomTool"},{"id":"bcfbd38a-8abf-4a13-a5e2-61ebfe5004a1","type":"PanTool"},{"id":"14f7d7d3-d67b-4d72-a86d-6a1d7b5dcc7d","type":"ResetTool"}]},"id":"95b4b9e2-94be-4be2-9761-be749c59ae45","type":"Toolbar"},{"attributes":{},"id":"14f7d7d3-d67b-4d72-a86d-6a1d7b5dcc7d","type":"ResetTool"},{"attributes":{},"id":"2ee2fcc2-f073-43b3-9aca-2ee8c03357fa","type":"BasicTicker"},{"attributes":{"fill_color":{"value":"#e8bc76"},"line_color":{"value":"#e8bc76"},"top":{"field":"Sales"},"width":{"value":0.2},"x":{"field":"day"}},"id":"aa4dd815-46f2-42c9-9b8a-1779434e9afc","type":"VBar"},{"attributes":{"source":{"id":"fe1ac751-02a0-4545-89ff-87dbe314a34f","type":"ColumnDataSource"}},"id":"c32a4aeb-a7a3-4130-a0e0-af65a56efacf","type":"CDSView"},{"attributes":{"plot":{"id":"afe8da60-9dbb-4cea-958f-247636333a7c","subtype":"Figure","type":"Plot"},"ticker":{"id":"238e4175-dd46-4884-b52d-12443011009a","type":"BasicTicker"}},"id":"bafbac35-977e-4aff-9a7f-794ec9b01659","type":"Grid"},{"attributes":{"callback":null,"data":{"Sales":{"__ndarray__":"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","dtype":"float64","shape":[365]},"day":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],"index":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364],"month":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,9,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12],"year":[2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017,2017]},"selected":{"id":"f24d2be8-f2e0-4cf3-9823-80c20d1a436e","type":"Selection"},"selection_policy":{"id":"f6af654a-341d-45a8-a1a4-c2d17e5ea072","type":"UnionRenderers"}},"id":"b605ddc1-1408-4956-864f-c602df6f550a","type":"ColumnDataSource"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"#1f77b4"},"line_alpha":{"value":0.1},"line_color":{"value":"#1f77b4"},"top":{"field":"Sales"},"width":{"value":0.2},"x":{"field":"day"}},"id":"25d28579-4ce2-4d3e-8946-c6e0500c573c","type":"VBar"},{"attributes":{},"id":"61100931-0c81-49dd-b38e-b0ba2ad2b715","type":"LinearScale"},{"attributes":{"plot":null,"text":"YEARLY SALES"},"id":"f6ba763a-1582-4691-8c88-658157e6752c","type":"Title"},{"attributes":{"callback":{"id":"46a732ae-b9c4-4617-b4fe-831f344608ec","type":"CustomJS"},"end":12,"start":1,"title":"Month","value":1},"id":"eb513edf-4b54-4590-9b7b-d4cc1f60420c","type":"Slider"},{"attributes":{},"id":"f24d2be8-f2e0-4cf3-9823-80c20d1a436e","type":"Selection"}],"root_ids":["0a97fc7d-20ab-49fa-b18f-ca63fdc4d277"]},"title":"Bokeh Application","version":"0.12.16"}}
        </script>
        <script type="text/javascript">
          (function() {
            var fn = function() {
              Bokeh.safely(function() {
                (function(root) {
                  function embed_document(root) {
                    
                  var docs_json = document.getElementById('59b3ceeb-f6e4-457f-8243-236ad4e4ecc6').textContent;
                  var render_items = [{"docid":"6e250d5c-2f75-4d15-9ea7-19bd720babe3","elementid":"1b4d2791-052d-4f87-b697-2703d126d006","modelid":"0a97fc7d-20ab-49fa-b18f-ca63fdc4d277"}];
                  root.Bokeh.embed.embed_items(docs_json, render_items);
                
                  }
                  if (root.Bokeh !== undefined) {
                    embed_document(root);
                  } else {
                    var attempts = 0;
                    var timer = setInterval(function(root) {
                      if (root.Bokeh !== undefined) {
                        embed_document(root);
                        clearInterval(timer);
                      }
                      attempts++;
                      if (attempts > 100) {
                        console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing")
                        clearInterval(timer);
                      }
                    }, 10, root)
                  }
                })(window);
              });
            };
            if (document.readyState != "loading") fn();
            else document.addEventListener("DOMContentLoaded", fn);
          })();
        </script>
    </body>
</html>

回答2:

This CustomJs worked.

    callback = CustomJS(args=dict(source=Overall, sc=Curr), code="""       
    var f = slider.value;
    sc.data['day'] = [];
    sc.data['ExtendedPrice'] = [];
    for (var i = 0; i <= source.get_length(); i++){
      if (source.data['month'][i] == f){

        sc.data['day'].push(source.data['day'][i])
        sc.data['ExtendedPrice'].push(source.data['ExtendedPrice'][i])
      }
    }
    sc.change.emit();
""")

I appreciate your time aritesh. Thank you so much!