DEV Community

David Newberry
David Newberry

Posted on

Real-time plotting with pyplot

I wanted to graph some data that I was generating from a simple polling app. I have tinkered with pyplot in the past, but I haven't tried creating anything from scratch. Luckily, it's really popular, and there are tons of examples to be found on StackOverflow and elsewhere.

I did a search and started with this SO answer related to updating a graph over time.

import matplotlib.pyplot as plt
import numpy as np

# You probably won't need this if you're embedding things in a tkinter plot...
plt.ion()

x = np.linspace(0, 6*np.pi, 100)
y = np.sin(x)

fig = plt.figure()
ax = fig.add_subplot(111)
line1, = ax.plot(x, y, 'r-') # Returns a tuple of line objects, thus the comma

for phase in np.linspace(0, 10*np.pi, 500):
    line1.set_ydata(np.sin(x + phase))
    fig.canvas.draw()
    fig.canvas.flush_events()
Enter fullscreen mode Exit fullscreen mode

This code animates a sine wave changing phase.

First two lines import the libraries I want to use: matplotlib.pyplot does the plotting and handling the GUI.

The ion() method, if I understand (though I may not), makes pyplot drive the GUI. You could also use it inside a tkinter program, or use it to generate static images, but in our case it makes sense to let it handle the GUI of the plot for us. (That's what the flush_events() call later on is doing: allowing interactivity with the figure window.)

This example uses the numpy method linspace() to create the x values. It returns a numpy array, which is a fancy Python list.

The reason to use np.sin instead of math.sin is broadcasting. That's the numpy term for applying the function to every item in a list. In fact, it occurs to me that the same thing could be achieved without numpy using map:

map(lambda n: math.sin(n), x)
Enter fullscreen mode Exit fullscreen mode

But numpy broadcasting is convenient and simple to use.

Now comes the pyplot setup. First, create a new "figure" (fig). Into this figure, add a subplot (ax) -- there could be many. 111 has the rather esoteric interpretation, "create a 1x1 grid, and place this subplot in the first cell."

Into this subplot (or set of axes), a line is plotted using the x and y values passed. (Points are connected with straight lines and plotted continuously.) "r-" is the shorthand way of specifying a solid, red line. We could specify multiple lines, so plot() returns a tuple; the code above uses tuple unpacking to extract the one value we want.

It's a good start, but I need to extend the x-axis over time. This code also doesn't update the bounds of the y-axis if necessary -- it's locked into whatever bounds it calculates for the first plot. A little more searching lead me to this SO answer. To quote them:

You will need to update the axes' dataLim, then subsequently update the axes' viewLim based on the dataLim. The appropriate methods are axes.relim() and ax.autoscale_view() method.

Sure, sounds good. Based on their example, I created a demo graph that grows in both x and y.

import matplotlib.pyplot as plt
import numpy as np
from threading import Thread
from time import sleep

x = list(map(lambda x: x / 10, range(-100, 100)))
x_next_max = 100
y = np.sin(x)

# You probably won't need this if you're embedding things in a tkinter plot...
plt.ion()

fig = plt.figure()
ax = fig.add_subplot(111)
line1 = ax.plot(x, y, 'r-')[0] # Returns a tuple of line objects

growth = 0

while True:
    x.append(x_next_max / 10)
    x_next_max += 1
    line1.set_xdata(x)
    line1.set_ydata(np.sin(x) + np.sin(np.divide(x, 100)) + np.divide(x, 100))
    ax.relim()
    ax.autoscale()
    fig.canvas.draw()
    fig.canvas.flush_events()

    sleep(0.1)
Enter fullscreen mode Exit fullscreen mode

Now I'm getting somewhere. But, this is a blocking loop, and I need my data to be occasionally updated. If I had multiple threads, I'd have to worry about being thread-safe with updating my variables. In this case, I can be lazy because I know that the variable only gets updated once every 5 minutes (or however often the polling function runs); there is no danger of the variable getting overwritten in the middle of a line of code.

import matplotlib.pyplot as plt
import numpy as np
from threading import Timer
from time import sleep

x = list(map(lambda x: x / 10, range(-100, 100)))
x_next_max = 100
y = np.sin(x)

# You probably won't need this if you're embedding things in a tkinter plot...
plt.ion()

fig = plt.figure()
ax = fig.add_subplot(111)
line1 = ax.plot(x, y, 'r-')[0] # Plot returns a tuple of line objects

growth = 0
new_x = None

dT = 1

def grow():
    global new_x, x_next_max
    while True:
        new_x = x + [x_next_max / 10]
        x_next_max += 1
        sleep(dT) # grow every dT seconds

t = Thread(target=grow)
t.start()

while True:

    if new_x:
        x = new_x
        new_x = None
        line1.set_xdata(x)
        line1.set_ydata(np.sin(x) + np.sin(np.divide(x, 100)) + np.divide(x, 100))
        ax.relim()
        ax.autoscale()
        fig.canvas.draw()

    fig.canvas.flush_events()

    sleep(0.1)
Enter fullscreen mode Exit fullscreen mode

The graph is only updated when the grow thread assigns a value to new_x. Notice that the flush_events() call is outside the "if" statement, so that it is being called frequently.

Top comments (0)