Python beginner’s tutorial for using matplotlib online

4 min readAug 28, 2022

This tutorial provides instructions to create this web-based Python app to plot the cos function for particular parameters provided by the user. The user is required to provide the parameters A and B in the equation y=Acos(Bx) along with the limits a and b of the plot.

Step 1: Info

You can fill in the required fields as shown in the following image.
You can use the default Favicon Image.
The Primary Image used is available here.

Step 2: Inputs

Start by creating the input group: “Function Parameters” and two numerical input variables.

Edit the first input variable:

Set the variable name to capitala.
Set label to “A”.
Set the default value to 1
Restrict the range between a min of -10 and a max of 10 with a step of 0.001.

Click on APPLY CHANGES to save your work:

Similarly, apply the changes shown in the following image to the second input.

You can also add a rich text input that clarifies to the user the form that the cosine equation uses and the limits of the parameters “A” and “B”. To do so, click on the “+” button and drag in a RichText input. Hover over the recently created input and click on the edit button. Add the required text and use the latex equation generator if desired, as shown in the following image:

You should now see the following inputs on your screen:

Using your mouse, drag the rich text field and move it above the parameters “A” and “B”:

Now, go ahead and create a new input group titled: “Plot Parameters”. Create two inputs “a” and “b” to specify the left and right boundaries of the plot. Set their variable names as a and b respectively. Change their default values to -10 and 10 respectively. You should now see the following on your screen:

Step 3: Code

As described in Generating Graphics, you need to first define the plt_show utility function which generates an embeddable image before defining the main function:

import matplotlib.pyplot as plt
import numpy as np
import base64
import iodef 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}

To access the inputs generated in the previous step, click on <> Input Variables, and copy each variable and paste it in a new variable assignment inside the main function:

def main(inputs):
    A = inputs['capitala']
    B = inputs['capitalb']
    a = inputs['a']
    b = inputs['b']
    # Code to generate a plot using matplotlib (plt)
    # The following line uses the plt_show function to create an embeddable image
    img = plt_show(plt)
    return {"Image": img}

You can now use matplotlib functions to generate the required plot:

def main(inputs):
    A = inputs['capitala']
    B = inputs['capitalb']
    a = inputs['a']
    b = inputs['b']
    x = np.arange(a,b,0.01)
    y = A*(np.cos(B*x))
    plt.plot(x,y)
    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}