Generating Graphics

The output step is built on the popular Jinja and Nunjucks templating engines, which allows for the embedding of Python variables and for the use of Python-like expressions (eg. for-loops, if-statements).

If a developer wishes to display graphics, such as matplotlib plots, they can use a utility function plt_show provided in the following snippet of code, that exports the matplotlib figure into an image that can be embedded into the output page.

import matplotlib.pyplot as plt
import numpy as np
import base64
import io

def plt_show(plt, width=500, dpi=100):
    # Converts matplotlib plt to image data string
    #   plt is the matplotlib pyplot or figure
    #   width is the width of the graph image in pixels
    #   dpi (dots per inch) is the resolution of the image
    bytes = io.BytesIO()
    plt.savefig(bytes, format='png', dpi=dpi)  # Save as png image
    if hasattr(plt, "close"):
        plt.close()
    bytes.seek(0)
    base64_string = "data:image/png;base64," + \
        base64.b64encode(bytes.getvalue()).decode("utf-8")
    return "<img src='" + base64_string + "' width='" + str(width) + "'>"

def main(inputs):
    # Code to generate a plot using matplot lib (plt)
    # The following line uses the plt_show function to create an embeddable image
    img = plt_show(plt)
    return {"Image": img}

As an example, the following snippet of code creates and exports an image of the cos function between 0 and 2Pi.

import matplotlib.pyplot as plt
import numpy as np
import base64
import io

def plt_show(plt, width=500, dpi=100):
    # Converts matplotlib plt to image data string
    #   plt is the matplotlib pyplot or figure
    #   width is the width of the graph image in pixels
    #   dpi (dots per inch) is the resolution of the image
    bytes = io.BytesIO()
    plt.savefig(bytes, format='png', dpi=dpi)  # Save as png image
    if hasattr(plt, "close"):
        plt.close()
    bytes.seek(0)
    base64_string = "data:image/png;base64," + \
        base64.b64encode(bytes.getvalue()).decode("utf-8")
    return "<img src='" + base64_string + "' width='" + str(width) + "'>"

def main(inputs):
    x = np.arange(0,2*np.pi,0.1)
    y = np.cos(x)
    plt.plot(x,y,label="cos")
    # Labels
    plt.xlabel("x")
    plt.ylabel("y")
    # The following line uses the plt_show function to create an embeddable image
    img = plt_show(plt)
    return {"Image": img}