CODEWITHSUNDEEP
bokeh
systemsguy
systemsguy

Reputation: 81

How to add text to html files generated by Python Bokeh

How do I add text to the HTML files for plots that are generated by bokeh. I don't see any API for specifically writing text on the files. All you can do is make plots.

Upvotes: 8

Views: 9517

Answers (3)

Shrikant Shete
Shrikant Shete

Reputation: 329

I wanted to add some description to my graphs so people could understand some complex and domain specific terms and embedding plots/data into HTML documents seemed complex.

If all you want to add to graph is a simple text go ahead with this.

Documentation states that

Warning

The explicit purpose of these Bokeh Models is to embed raw HTML text for a browser to execute. If any portion of the text is derived from untrusted user inputs, then you must take appropriate care to sanitize the user input prior to passing to Bokeh.

Copying examples from above link for quick reference and in case link gets broken.


    from bokeh.io import output_file, show
    from bokeh.layouts import widgetbox
    from bokeh.models.widgets import Div
    from bokeh.models.widgets import Paragraph
    from bokeh.models.widgets import PreText
    
    output_file("div.html")
    
    pre = PreText(text="""Your text is initialized with the 'text' argument. The remaining Paragraph arguments are 'width' and 'height'.""",width=500, height=100)
    
    p = Paragraph(text="""Your text is initialized with the 'text' argument. The remaining Paragraph arguments are 'width' and 'height'""", width=200, height=100)
    
    div = Div(text="""Your <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>-supported text is initialized with the <b>text</b> argument.  The remaining div arguments are <b>width</b> and <b>height</b>. For this example, those values are <i>200</i> and <i>100</i> respectively.""", width=200, height=100)
    
    show(widgetbox(pre, p, div))

Upvotes: 3

bigreddot
bigreddot

Reputation: 34618

There are alot of ways to embed Bokeh plots in other documents. For static documents, you can have Bokeh create its standard default document, or you can have it use a template you provide. You can also generate just the div and script tags and then embed those in your own static pages or web-apps however you like. Any of the above can also either have the data in the document, in a sidecar .js file, or loaded from a Bokeh server. All these options are described in the user guide section on embedding:

http://docs.bokeh.org/en/latest/docs/user_guide/embed.html

and in the reference guide:

https://docs.bokeh.org/en/latest/docs/reference/resources.html

Please let us know if there is more or better information we could add there.

Upvotes: 2

dux2
dux2

Reputation: 1910

Here is an example for generating a single HTML file with both panads DataFrame and a Bokeh Plot. (Inspired from https://github.com/bokeh/bokeh/blob/master/examples/embed/embed_multiple.py)

import io
import pandas as pd
from bokeh.embed import components
from bokeh.models import HoverTool
from bokeh.models import LinearAxis, Range1d
from bokeh.plotting import figure
from bokeh.resources import CDN
from jinja2 import Template


template = Template(
    '''<!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8">
                <title>Overview</title>
                {{ resources }}
                {{ script }}
                <style>
                    .embed-wrapper {
                        display: flex;
                        justify-content: space-evenly;
                    }
                </style>
            </head>
            <body>
                <div>
                    {{ table }}
                </div>                    
                <div class="embed-wrapper">
                    {{ div }}
                </div>
            </body>
        </html>
        ''')

df: pd.DataFrame = get_data_frame()
table_html = df.to_html()

plot = figure(x_axis_label='time', y_axis_label='value', x_axis_type='datetime',
                plot_width=1600, plot_height=800,
                tools='pan,wheel_zoom,zoom_in,zoom_out,box_zoom,reset,save,hover,tap')
plot.sizing_mode = 'scale_width'
# now continue setup your plot 
# ...
#

# get bokeh parts
script_bokeh, div_bokeh = components(plot)
resources_bokeh = CDN.render()

# render everything together
html = template.render(resources=resources_bokeh,
                       script=script_bokeh,
                       table=table_html,
                       div=div_bokeh)

# save to file
out_file_path = "test.html"
with io.open(out_file_path, mode='w') as f:
    f.write(html)

Upvotes: 0

Related Questions