Changing a color attribute of embedded Bokeh plot upon click in jQuery Data Table

Hi there!

I am trying to combine a Bokeh plot in my web app together with a jQuery Data Table.

What I want to do is following:

1. After the page loads, the user is presented with a MultiLine plot that has most of the lines in the same color (here green). Above the plot there is a jQuery Data Table in which the user can browse the entries related to the aforementioned plot.

2. Upon clicking on one of the entries in the Data Table, I would like to change the color of one of the lines corresponding to the clicked entry.

3. When clicked on another entry, the color will change again accordingly.

What are my options? In the MultiLine call in Python I set the color to be a list of hex values plus when I click on a specific row in the data table on the page, I can easily pull the index of the color value in that list that should be changed using JavaScript.

I also see that color coding list in the Bokeh JS code in the page’s source code, but I don’t know how to access them and change so the plot would get updated automatically.

Really grateful for any hints as I feel I am hitting a wall here.

Best,

Piotr

PS

This is the current situation, I would like the RIC1 to highlight in the plot in, say, red (the orange line is added there on Python level).

Hi,

I think what would be useful to use is selection glyphs, and link your data table with the plot. What would you do is to configure your multi line glyph renderer with selection glyph, which would differ by color from the main glyph. Then you would set plot selection accordingly when data table’s items are clicked. This how bokeh’s built-in data table works.

Your approach with changing the color by changing the data is also viable, and may be preferred in certain scenarios. However, changing data of a column data source comes with certain caveats.

I’m limited to my phone right now, so this is as much advice I can give you.

Mateusz