Tap Tool Highlight for Multi Line

Community Support
1

Hi,

I’ve a multi_line graph as below.

source_end = ColumnDataSource(data=dict(xs=x_value, ys=y_value,color=color_line))

plot_output = figure(plot_height=450, plot_width=600,match_aspect=True,
tools=“save,reset,tap”,x_range=[0,100], y_range=[0,100],toolbar_location=“below”)

plot_output.multi_line(‘xs’,‘ys’,source=source_end,color=‘color’,
line_width=6,line_alpha=1,line_cap=‘round’)

``

I’d like to have a tap highlight action where tapping on any line would highlight all the lines which have same ‘color’ value. I checked and couldn’t find any solution for it as most of it were customJS and my code is a server side code.

Any help would be appreciated.

Thanks.

2

from bokeh.models import ColumnDataSource

from bokeh.plotting import figure, curdoc

from datetime import datetime

import random

source = ColumnDataSource(dict(time = [[datetime.now(), datetime.now()]], value = [[random.randint(5, 10), random.randint(5, 10)]], color = [[‘red’]]))

plot = figure(plot_width = 1200, x_axis_type = ‘datetime’, tools = ‘pan,box_select,crosshair,resize,reset,save,wheel_zoom,tap’)

line = plot.multi_line(xs = ‘time’, ys = ‘value’, line_color = ‘color’, line_width = 4, name = “lines”, source = source)

def update():

    last_time = line.data_source.data[*'time'*][-1][1]

    last_value = line.data_source.data[*'value'*][-1][1]

    new_data = dict(time = [[last_time, datetime.now()]], value = [[last_value, random.randint(5, 10)]], color = [random.choice([*'green'*, *'blue'*, *'magenta'*, *'cyan'*, *'tomato'*])])

    source.stream(new_data)

def on_select(attr, old, new):

    try:
           selected_index = source.selected[*"1d"*][*"indices"*][0]

            selected_color = source.data[*'color'*][int(selected_index)]

            indices_1d = []

            [indices_1d.append(str(index)) for index, color in enumerate(source.data[*'color'*]) if color == selected_color]

            indices_2d = [{index: [0]} for index in indices_1d]

            source.selected.update({*"0d"*:{*"indices"*: []}, *"1d"*:{*"indices"*:indices_1d}, *"2d"*:{*"indices"*:indices_2d}})

    except IndexError:

            pass

source.on_change(‘selected’, on_select)

curdoc().add_periodic_callback(update, 1000)

curdoc().add_root(plot)

``

···

On Tuesday, January 1, 2019 at 8:21:41 AM UTC+1, Samira Kumar wrote:

Hi,

I’ve a multi_line graph as below.

source_end = ColumnDataSource(data=dict(xs=x_value, ys=y_value,color=color_line))

plot_output = figure(plot_height=450, plot_width=600,match_aspect=True,
tools=“save,reset,tap”,x_range=[0,100], y_range=[0,100],toolbar_location=“below”)

plot_output.multi_line(‘xs’,‘ys’,source=source_end,color=‘color’,
line_width=6,line_alpha=1,line_cap=‘round’)

``

I’d like to have a tap highlight action where tapping on any line would highlight all the lines which have same ‘color’ value. I checked and couldn’t find any solution for it as most of it were customJS and my code is a server side code.

Any help would be appreciated.

Thanks.