As illustrated with the attached picture, I have two charts, Chart 1 is map like chart which I borrow from
“http://bokeh.pydata.org/en/latest/docs/gallery/choropleth.html”， another chart, Charter 2, is to plot one line which data’s index is referred to what the area my mouse hovering over. Unfortunately, the link of the two charts seems not successful, the hover on Chart 1 to different area (@name) will not trigger the Chart 2 line plot updating.
Except for the excerpted codes bellow, I also attach my initial code and simulated data for line plot with this post, any help from any of you are greatly appreciated.
Codes for Chart 1 data and plot
pcdata=np.hstack((np.zeros((len(timelabel),booth_nr)),testdata.values)) # Array of test data with zeo value filled in booth area
Combine the two patches, booth and guest area, together
data_source = ColumnDataSource(data=dict(
x=booth_xs+guest_xs, # area borders
y=booth_ys+guest_ys, # area borders
linecolor=[“white”]*booth_nr+[“#884444”]*guest_nr, # line color
linewidth=[2]*booth_nr+[0.5]*guest_nr,
fillcolor=[“grey”]*booth_nr+thiscolors, # fill color
fillalpha=[0.5]*booth_nr+[0.7]*guest_nr,
guestcount=[“N.A.”]*booth_nr+[guest_area[code][‘count’] for code in guest_area],
name=booth_name+guest_name, # Area name to be referred for the 2nd Chart
rate=[“N.A.”]*booth_nr+guest_count_per_area,
pcdata=pcdata.T.tolist() # updated on Apr. 26 we have to do this transform !!!
))
TOOLS=“pan,wheel_zoom,box_zoom,reset,hover,save”
pheatmap = figure(title=“heatmap over location”, toolbar_location=“left”,
plot_width=900, plot_height=600, tools=TOOLS)
plot the map
pheatmap.patches(‘x’,‘y’,source=data_source,
fill_color=‘fillcolor’, fill_alpha=‘fillalpha’,
line_color=‘linecolor’, line_width=‘linewidth’)
pheatmap.xaxis.visible = False
pheatmap.yaxis.visible = False
pheatmap.xgrid.grid_line_color = None
pheatmap.ygrid.grid_line_color = None
pheatmap.text([booth_area[code][‘center’][0] for code in booth_area],[booth_area[code][‘center’][1] for code in booth_area],[booth_area[code][‘name’] for code in booth_area],text_color=‘white’,text_font_size=‘22pt’)
hover=pheatmap.select_one(HoverTool)
Codes for Chart 2 data and plot
data_source_2 = ColumnDataSource(data=dict(
x=timelabel,
y=pcdata[:,booth_nr] # booth nr will be referred from the area the mouse hovering by JS
))Create plinedaily to plot the daily distribution for any area
plinedaily = figure(title=“hourly footfall”, toolbar_location=“left”,
plot_width=900, plot_height=200, tools=“reset,save”)plinedaily.line(x=‘x’, y =‘y’,source=data_source_2, line_width=2, color=‘green’)
**Callback JS I would like to link both charts together, use the @name by hover and raw name list for indexing **
define the callback to update the plot data for plinedaily
update_ts = CustomJS(args=dict(sourcedata=data_source,sourcedata2=data_source_2),
code=“”"
// get data source from callback args
var data = sourcedata.get(‘data’);
var data2=sourcedata2.get(‘data’)
var names = data[‘name’];
var id=names.indexof(“@name”) // Get the index of current area to pick up
var tmpdata=data2[‘y’]
// output the data for curve plot
var datlen=tmpdata.length
var tmppcdata=data[‘pcdata’]
for (var i = 0; i <datlen; i++) { // Retrieve the new data according to id
tmpdata[i]=tmppcdata[id][i]
}
// trigger update of data source 2 for line plot updating
data2[‘y’].push(tmpdata)
sourcedata2.trigger(‘change’);
“”")
hover.point_policy = “follow_mouse”
hover.callback = update_tshover.tooltips = [
(“guest area”, “@name”),
(‘guest count’,‘@guestcount’),
(“footfall by area”, “@rate”),
(“(xpos, ypos)”, “($x, $y)”),
]
figout = vplot(pheatmap,plinedaily)
Thanks in advance!!
B. R.
Gongming
Map and Curve.py (7.5 KB)
shop demo data.csv (287 Bytes)