Using HTMLTemplateFormater to iterate over array and color text in table rows in Python Bokeh

Question

I want to color the text of a specific row in a DataTable in Bokeh. The color should depend on the entry in color array (Like for example when using a graph in bokeh)

I set up my code like this:

source = ColumnDataSource(data=dict(
        neighbors=[],
        words=[],
        ref_fragments=[],
        closest=[],
        distances=[],
        color=[]
    ))

columns = [TableColumn(field='neighbors', title='Neighbor Fragment', width=100),
       TableColumn(field='words', title='Word', width=100),
       TableColumn(field='ref_fragments', title='Reference Fragment', width=100),
       TableColumn(field='closest', title='Closest Words', width=200),
       TableColumn(field='distances', title='Distances', width=300)]


table = DataTable(source=source, columns=columns, width=800, height=800)

The source will be filled during runtime interaction. When using a graph in bokeh it would be easy to simply use the 'color' attribute in the source to color points accordingly. Sadly this does not work with DataTables.

A question and answer on Stackoverflow (https://stackoverflow.com/a/51048558/3220400)

template="""                
        <p style="color:<%= 
            (function colorfromarry(){
                //HERE CODE THAT SETS COLOR SPECIFIC TO THE ENTRY IN THE COLOR ENTRY OF ITS ROW
            }()) %>;"> 
            <%= value %>
        </p>
        """
formatter =  HTMLTemplateFormatter(template=template)

and then I can use the formatter on the specific column. In my case I would assume I have to use the same formatter on each column? My question is, how to set the colorfromarry function, so that each entry in the row gets a color specific to the entry in the array (e.g. row i looks at color[i])?

score 1 · Accepted Answer · answered Jul 23 '19 at 02:40

Set the same formatter to all the columns:

from bokeh.io import output_notebook, show
output_notebook()

from random import randint
from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, HTMLTemplateFormatter

output_file("data_table.html")

template="""<div style="color: <%= color %>"><%= value %></div>"""
formatter =  HTMLTemplateFormatter(template=template)

source = ColumnDataSource(data=dict(
        neighbors=[1, 2, 3],
        words=["a", "b", "c"],
        ref_fragments=["x", "y", "z"],
        closest=["A", "B", "C"],
        distances=[10, 20, 30],
        color=["#ff0000", "#00ff00", "#0000ff"]
    ))

columns = [
    TableColumn(field='neighbors', title='Neighbor Fragment', width=100, formatter=formatter),
    TableColumn(field='words', title='Word', width=100, formatter=formatter),
    TableColumn(field='ref_fragments', title='Reference Fragment', width=100, formatter=formatter),
    TableColumn(field='closest', title='Closest Words', width=200, formatter=formatter),
    TableColumn(field='distances', title='Distances', width=300, formatter=formatter)
    ]

table = DataTable(source=source, columns=columns, width=800, height=800)

show(widgetbox(table))

perfect, Thank you very much! – Daniel Töws Jul 23 '19 at 08:49 — Daniel Töws, Jul 23 '19 at 08:49

Using HTMLTemplateFormater to iterate over array and color text in table rows in Python Bokeh

1 Answers1