Help: link the line plot to the hover over "map" plot failed

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_ts

hover.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)

Gonming,

There are errors in your JavaScript. The first of them is that "indexof" is undefined, the correct method name is "indexOf" If you open your browser's javascript console you can see these error messages in order to debug things.

Thanks,

Bryan

···

On Apr 29, 2016, at 1:50 AM, gongming wei <[email protected]> wrote:

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_ts

hover.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

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/38b09021-dc2f-4827-a174-1f1ea0e70230%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
<Map and Curve.py><shop demo data.csv>

The next problem is that tmppcata.length is 13 but datlen is 14, so you are indexing out of bounds for tmppcdata on the last iteration of the loop.

Bryan

···

On May 4, 2016, at 1:05 PM, Bryan Van de Ven <[email protected]> wrote:

Gonming,

There are errors in your JavaScript. The first of them is that "indexof" is undefined, the correct method name is "indexOf" If you open your browser's javascript console you can see these error messages in order to debug things.

Thanks,

Bryan

On Apr 29, 2016, at 1:50 AM, gongming wei <[email protected]> wrote:

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_ts

hover.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

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/38b09021-dc2f-4827-a174-1f1ea0e70230%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
<Map and Curve.py><shop demo data.csv>

Last helpful tip, then I have to leave the rest of the debugging to you. If you run your script with unminified resources:

  BOKEH_MINIFIED=no python foo.py

Then you can put a line with just "debugger" in it in your JS code wherever you like. Then if you view the page with the browser dev console open, you will get dropped into the JS debugger at that spot. You can inspect variables, single step code, etc. It seems like you have some data source dimensions that don't quite line up (the 13 vs 14 thing)

Bryan

···

On May 4, 2016, at 1:08 PM, Bryan Van de Ven <[email protected]> wrote:

The next problem is that tmppcata.length is 13 but datlen is 14, so you are indexing out of bounds for tmppcdata on the last iteration of the loop.

Bryan

On May 4, 2016, at 1:05 PM, Bryan Van de Ven <[email protected]> wrote:

Gonming,

There are errors in your JavaScript. The first of them is that "indexof" is undefined, the correct method name is "indexOf" If you open your browser's javascript console you can see these error messages in order to debug things.

Thanks,

Bryan

On Apr 29, 2016, at 1:50 AM, gongming wei <[email protected]> wrote:

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_ts

hover.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

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/38b09021-dc2f-4827-a174-1f1ea0e70230%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
<Map and Curve.py><shop demo data.csv>

Dear Bryan

Do appreciate your feedback!!

Finally, I solved the issue by following update of javascript callback function, and I highlighted the main change with red denotes deleted and cyan denotes added: I refer to the code of https://groups.google.com/a/continuum.io/d/msgid/bokeh/etPan.57284c0c.3e483177.6231%40jni-lscc-mbp.local for getting indexing: var indices=cb_data.index[‘1d’].indices;

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['names']; -->removed
   //var id=names.indexof(@name);  -->removed

var indices=cb_data.index['1d'].indices;   // Added 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] // --> removed
tmpdata[i]=tmppcdata[indices[0]][i] // Added
}
// trigger update of data source 2 for line plot updating
data2[‘y’].push(tmpdata)
sourcedata2.trigger(‘change’);
“”")

``

B. R.

Gongming

···

On Thursday, May 5, 2016 at 2:13:27 AM UTC+8, Bryan Van de ven wrote:

Last helpful tip, then I have to leave the rest of the debugging to you. If you run your script with unminified resources:

    BOKEH_MINIFIED=no python foo.py

Then you can put a line with just “debugger” in it in your JS code wherever you like. Then if you view the page with the browser dev console open, you will get dropped into the JS debugger at that spot. You can inspect variables, single step code, etc. It seems like you have some data source dimensions that don’t quite line up (the 13 vs 14 thing)

Bryan

On May 4, 2016, at 1:08 PM, Bryan Van de Ven [email protected] wrote:

The next problem is that tmppcata.length is 13 but datlen is 14, so you are indexing out of bounds for tmppcdata on the last iteration of the loop.

Bryan

On May 4, 2016, at 1:05 PM, Bryan Van de Ven [email protected] wrote:

Gonming,

There are errors in your JavaScript. The first of them is that “indexof” is undefined, the correct method name is “indexOf” If you open your browser’s javascript console you can see these error messages in order to debug things.

Thanks,

Bryan

On Apr 29, 2016, at 1:50 AM, gongming wei [email protected] wrote:

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_ts

hover.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


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/38b09021-dc2f-4827-a174-1f1ea0e70230%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Already used your tricks and found the bugs in my codes on ColumnDataSource and javascript part.

Thanks a lot

···

On Thursday, May 5, 2016 at 2:13:27 AM UTC+8, Bryan Van de ven wrote:

Last helpful tip, then I have to leave the rest of the debugging to you. If you run your script with unminified resources:

    BOKEH_MINIFIED=no python foo.py

Then you can put a line with just “debugger” in it in your JS code wherever you like. Then if you view the page with the browser dev console open, you will get dropped into the JS debugger at that spot. You can inspect variables, single step code, etc. It seems like you have some data source dimensions that don’t quite line up (the 13 vs 14 thing)

Bryan

On May 4, 2016, at 1:08 PM, Bryan Van de Ven [email protected] wrote:

The next problem is that tmppcata.length is 13 but datlen is 14, so you are indexing out of bounds for tmppcdata on the last iteration of the loop.

Bryan

On May 4, 2016, at 1:05 PM, Bryan Van de Ven [email protected] wrote:

Gonming,

There are errors in your JavaScript. The first of them is that “indexof” is undefined, the correct method name is “indexOf” If you open your browser’s javascript console you can see these error messages in order to debug things.

Thanks,

Bryan

On Apr 29, 2016, at 1:50 AM, gongming wei [email protected] wrote:

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_ts

hover.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


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/38b09021-dc2f-4827-a174-1f1ea0e70230%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Glad to hear! If you made something cool that you can share publicly, tweets to @BokehPlots are always appreciated!

Bryan

···

On May 21, 2016, at 10:38, gongming wei [email protected] wrote:

Already used your tricks and found the bugs in my codes on ColumnDataSource and javascript part.

Thanks a lot

On Thursday, May 5, 2016 at 2:13:27 AM UTC+8, Bryan Van de ven wrote:

Last helpful tip, then I have to leave the rest of the debugging to you. If you run your script with unminified resources:

    BOKEH_MINIFIED=no python foo.py

Then you can put a line with just “debugger” in it in your JS code wherever you like. Then if you view the page with the browser dev console open, you will get dropped into the JS debugger at that spot. You can inspect variables, single step code, etc. It seems like you have some data source dimensions that don’t quite line up (the 13 vs 14 thing)

Bryan

On May 4, 2016, at 1:08 PM, Bryan Van de Ven [email protected] wrote:

The next problem is that tmppcata.length is 13 but datlen is 14, so you are indexing out of bounds for tmppcdata on the last iteration of the loop.

Bryan

On May 4, 2016, at 1:05 PM, Bryan Van de Ven [email protected] wrote:

Gonming,

There are errors in your JavaScript. The first of them is that “indexof” is undefined, the correct method name is “indexOf” If you open your browser’s javascript console you can see these error messages in order to debug things.

Thanks,

Bryan

On Apr 29, 2016, at 1:50 AM, gongming wei [email protected] wrote:

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_ts

hover.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


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/38b09021-dc2f-4827-a174-1f1ea0e70230%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/7c00f7cf-fa97-40ac-8fdb-8ba0b0c1f4b1%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.