Chart on click selection from data table in Bokeh

后端 未结 2 1631
攒了一身酷
攒了一身酷 2021-01-24 06:26

I\'ve taken the below code from another source - it is not my own code.

The code allows you to select a cell in the data table, and the \'downloads\' data for that cell

相关标签:
2条回答
  • 2021-01-24 07:01

    This is the final working code (run from command line with bokeh serve --show app.py):

    from datetime import date
    from random import randint
    from bokeh.models import ColumnDataSource, Column, TableColumn, DateFormatter, DataTable, CustomJS
    from bokeh.plotting import figure, curdoc
    
    source = ColumnDataSource(dict(dates = [date(2014, 3, i + 1) for i in range(10)], downloads = [randint(0, 100) for i in range(10)]))
    columns = [TableColumn(field = "dates", title = "Date", formatter = DateFormatter()), TableColumn(field = "downloads", title = "Downloads")]
    data_table = DataTable(source = source, columns = columns, width = 400, height = 280, editable = True, reorderable = False)
    info_source = ColumnDataSource(dict(row = [], column = []))
    
    source_code = """
    var grid = document.getElementsByClassName('grid-canvas')[0].children;
    var row, column = '';
    
    for (var i = 0,max = grid.length; i < max; i++){
        if (grid[i].outerHTML.includes('active')){
            row = i;
            for (var j = 0, jmax = grid[i].children.length; j < jmax; j++)
                if(grid[i].children[j].outerHTML.includes('active')) {
                    column = j; 
                    source2.data = {row: [row], column: [column]};
                }
        }
    }"""
    
    callback = CustomJS(args = dict(source = source, source2 = info_source), code = source_code)
    source.selected.js_on_change('indices', callback)
    
    def py_callback(attr, old, new):
        source.selected.update(indices = [])
        print(info_source.data)
    
    source.selected.on_change('indices', py_callback)
    curdoc().add_root(Column(data_table))
    
    0 讨论(0)
  • 2021-01-24 07:19

    My suggestion is to use my another post that uses a JS callback to access the row and column of the selected cell. This must be a JS callback as it uses HTML elements to walk through. So the steps are as follows:

    1. Define a new ColumnDataSource that will contain the row and column number of a clicked cell

      info_source = ColumnDataSource(dict(row = [], column = []))

    2. Use the JS callback from this post to fill in the row and column values in this new table_info_source like this:

    callback=CustomJS(args=dict(source=d_source,source2=info_source),code=source_code)
    source.selected.js_on_change('indices', callback)

    1. Inside the JS callback store the row and column index like this:

      source2.data = {row:[row],column:[column]};

    2. Access the info_source.data information in your Python callback to draw a plot

      print (info_source.data)

    Both callback are attached to the same source but usually JS callback is executed first so the data should be available in the Python callback on time. Having the index of row and column of the clicked cell you should be able to retrieve the required data and draw your chart.

    0 讨论(0)
提交回复
热议问题