散景数据表中点击选择的图表 [英] Chart on click selection from data table in Bokeh

问题描述

我从另一个来源获取了以下代码-这不是我自己的代码.

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 will chart based on the row of the cell selected.

如何扩展此代码，以便如果我有多个变量(例如，下载"和上传")以及数据表中有更多列，则可以基于该单元格绘制数据(因此，行和列在何处)是重要的)?或者，如何将所选单元格的列号定义为变量(可以使用下面的selected_row来定义行号的方式相同)?

How do I expand this code such that if I have multiple variables (eg. 'downloads' and 'uploads') and so more columns in the data table, I can chart data based on that cell (so where row AND column are important)? Alternatively, how can I define as a variable the column number of a selected cell (in the same way selected_row below can be used to define the row number)?

from datetime import date
from random import randint
from bokeh.models import ColumnDataSource, Column
from bokeh.plotting import figure, curdoc
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, Div
import numpy as np

data = dict(dates = [date(2014, 3, i + 1) for i in range(10)],
            downloads = [randint(0, 100) for i in range(10)])
d_source = ColumnDataSource(data)

columns = [TableColumn(field = "dates", title = "Date", formatter = DateFormatter()),
           TableColumn(field = "downloads", title = "Downloads")]

data_table = DataTable(source = d_source, columns = columns, width = 400, height = 280)

def table_select_callback(attr, old, new):
    selected_row = new[0]
    download_count = data['downloads'][selected_row]
    chart_data = np.random.uniform(0, 100, size = download_count)
    p = figure(title = 'bla')
    r = p.line(x = range(len(chart_data)), y = chart_data)
    root_layout.children[1] = p

d_source.selected.on_change('indices', table_select_callback)

root_layout = Column(data_table, Div(text = 'Select Date'))
curdoc().add_root(root_layout)

推荐答案

我的建议是使用

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. 定义一个新的ColumnDataSource，其中将包含单击的单元格的行号和列号

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

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

使用来自此帖子像这样在新的table_info_source中填写row和column值:

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)

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

1. 在JS回调内部存储row和column索引，如下所示:

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

在Python回调中访问info_source.data信息以绘制图

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

print (info_source.data)

两个回调都附加到相同的源，但是通常首先执行JS回调，因此数据应按时在Python回调中可用.具有单击单元格的行和列的索引，您应该能够检索所需的数据并绘制图表.

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.

这篇关于散景数据表中点击选择的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！