How to format a bokeh DataTable cell based on another column value?

Question

Salutations.

I am developing an application using bokeh server (version 0.12.13) and I have a DataTable widget with several columns. One of them are a measure of an issue open days and another is an estimate of days to close such issue.

In some situations, the amount of days that an issue is open surpasses the estimated amount and I would like to colour the estimated days column red if that happens.

I have tried using "widget.HTMLTemplateFormatter", but I haven't figured out how to access another column value to make the comparison and decide whether paint the cell red or not.

Does anyone know how to get around this?

Answer 1

You can either define a javascript function within the underscore js code to conditionally color each cell. Each of the fields within the data source linked to the table can be accessed.

from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn, HTMLTemplateFormatter
from bokeh.io import show

dict1 = {'estd':[1]*6,
         'actd':[1, 1, 1, 2, 2, 2],
         'z'   :[3, 3, 3, 3, 3, 3]}

source = ColumnDataSource(data=dict1)

template="""
<b><div style="background:<%= 
    (function colorfromint(){
        if(actd > estd){
            return("Red")
        }
        else{
            return("White")
        }
     }()) %>;">
<%= (value).toFixed(1) %></div></b>
"""

formater =  HTMLTemplateFormatter(template=template)
columns = [
    TableColumn(field="estd", title="Estimated Days"),
    TableColumn(field="actd", title="Actual days",formatter=formater),
    TableColumn(field="z", title="z")
]

data_table = DataTable(source=source, columns=columns, width=800)

show(data_table)

If the data does not change you can define the colors using python code, see the second example here: How do I adjust number format in bokeh data table using HTMLTemplateFormatter?.