Bokeh Interaktiver Marginal Plot

Wenn du dir nicht sicher bist, in welchem der anderen Foren du die Frage stellen sollst, dann bist du hier im Forum für allgemeine Fragen sicher richtig.
Antworten
Squipy
User
Beiträge: 39
Registriert: Sonntag 30. Juni 2019, 16:42

Hallo Zusammen,
ich versuche mich gerade bei einer Dashboarddarstellung mittels Bokeh und habe es auch schon hinbekommen mir ein marginal plot darstellen zu lassen. Wichtig ist, dass die X und Y Komponenten mittels Dropdownmenü geändern kann und Output eine funktionsfähige html Datei ist.

Das klappt beim Hauptplot auch schon sehr gut, allerdings aktualisieren sich nicht die Histogramme (ph und pv) nicht und ich verstehe nicht wieso. Hat von euch jemand eine Idee?

Code: Alles auswählen

source = ColumnDataSource(stat_data_df)
#curdoc().theme = 'light_minimal'


#Add plot main
def create_marginal_plot(source,x_axis_label, y_axis_label, n_bin_h, n_bin_v):       
    plot_options_main = dict(width=700, plot_height=500, 
                            tools=('pan,wheel_zoom,box_zoom,reset, crosshair'))
    
    plot_main = figure(
        toolbar_location=None,
        x_axis_label = x_axis_label,
        y_axis_label = y_axis_label,
        **plot_options_main
        )
    plot_main.background_fill_color = "#fafafa"
    plot_main.scatter(x ="x", y = "y", 
              source = source,color="#3A5785")
    
    #create the horizontal histo
    hhist, hedges = np.histogram(source.data['x'], bins=n_bin_h)
    hzeros = np.zeros(len(hedges)-1)
    hmax = max(hhist)*1.1
    
    LINE_ARGS = dict(color="#3A5785", line_color=None)
    
    ph = figure(toolbar_location=None,
                plot_width=plot_main.plot_width, 
                plot_height=200, 
                min_border=10, min_border_left=50, y_axis_location="left")
    #ph.xgrid.grid_line_color = None
    ph.yaxis.major_label_orientation = np.pi/4
    ph.background_fill_color = "#fafafa"
    
    ph.quad(bottom=0, left=hedges[:-1], right=hedges[1:], top=hhist, 
            color="white", line_color="#3A5785")
    ph.quad(bottom=0, left=hedges[:-1], right=hedges[1:], top=hzeros, 
            alpha=0.5, **LINE_ARGS)
    ph.quad(bottom=0, left=hedges[:-1], right=hedges[1:], top=hzeros, 
            alpha=0.1, **LINE_ARGS)
    
    
    # create the vertical histogram
    vhist, vedges = np.histogram(source.data['y'], bins=n_bin_v)
    vzeros = np.zeros(len(vedges)-1)
    vmax = max(vhist)*1.1
    
    pv = figure(toolbar_location=None, plot_width=200,y_axis_location=None,
                plot_height=plot_main.plot_height,
                
                min_border=10)
    pv.ygrid.grid_line_color = None
    pv.xaxis.major_label_orientation = np.pi/4
    pv.background_fill_color = "#fafafa"
    
    pv.quad(left=0, bottom=vedges[:-1], top=vedges[1:], right=vhist, 
            color="white", line_color="#3A5785")
    pv.quad(left=0, bottom=vedges[:-1], top=vedges[1:], right=vzeros, 
            alpha=0.5, **LINE_ARGS)
    pv.quad(left=0, bottom=vedges[:-1], top=vedges[1:], right=vzeros, 
            alpha=0.1, **LINE_ARGS)
 
    return plot_main, pv, ph 



x_axis_label = stat_data[stat_data_df.columns[5]]['unit_x']
y_axis_label = stat_data[stat_data_df.columns[7]]['unit_y']

output_file('Dashboard.html')
plot_main, pv, ph = create_marginal_plot(source,x_axis_label, y_axis_label, n_bin_h, n_bin_v)



callback_x = CustomJS(args={'source':source},code="""
        // print the selectd value of the select widget - 
        // this is printed in the browser console.
        // cb_obj is the callback object, in this case the select 
        // widget. cb_obj.value is the selected value.
        console.log(' changed selected option', cb_obj.value);

        // create a new variable for the data of the column data source
        // this is linked to the plot
        var data = source.data;

        // allocate the selected column to the field for the y values
        data['x'] = data[cb_obj.value];

        // register the change - this is required to process the change in 
        // the y values
        source.change.emit();
""")

callback_y = CustomJS(args={'source':source},code="""
        // print the selectd value of the select widget - 
        // this is printed in the browser console.
        // cb_obj is the callback object, in this case the select 
        // widget. cb_obj.value is the selected value.
        console.log(' changed selected option', cb_obj.value);

        // create a new variable for the data of the column data source
        // this is linked to the plot
        var data = source.data;

        // allocate the selected column to the field for the y values
        data['y'] = data[cb_obj.value];

        // register the change - this is required to process the change in 
        // the y values
        source.change.emit();
""")

#add dropdown menu
select_x = Select(title="Value X:", value=def_x_channel, options=channel_list,
                  callback=callback_x)
select_y = Select(title="Value Y", value=def_y_channel, options=channel_list,
                  callback = callback_y)

p = gridplot([[ ph,None], [plot_main,pv ]], merge_tools=False,
                 toolbar_location=None)

layout = gridplot([[column(select_x, select_y),None], [p,None]],
                  toolbar_location=None)

   
show(layout)
Antworten