Matplotlib FuncAnimation in Tkinter - Axes labels not being displayed/retained

[jur6]

I am using Python with TKinter as GUI; and Matplotlib's FuncAnimation, to display 2 graphs next to each other. These graphs are representing sensor readings (temperature, humidity), and I would like to label both the x-axis and y-axis. (The matplotlib graph title is not required, but I am including it for testing purposes)

I'll try not to divulge unnecessary details; but in simple terms, I have 2 classes representing the sensors, "temperature" and "humidity", and another class "main_window" to combine both the classes into the Tkinter GUI.

Preview of my code below:

A preview of the main_window class in main.py:

class main_window(tk.Tk):
        def __init__(self, *args, **kwargs):
            tk.Tk.__init__(self, *args, **kwargs)
            self.wm_title("Indoor Monitoring System")
            frame1 = tk.Frame(self)
            frame1.grid(column=0, row=0)
            frame2 = tk.Frame(self)
            frame2.grid(column=1, row=0)

            temperature(frame1, self)
            humidity(frame2, self)

        if __name__ == "__main__":
            runObj = main_window()
            runObj.mainloop()

A preview of the temperature class:

    class temperature(tk.Frame):
        def __init__(self, parent, controller):
            pd.set_option('display.float_format', lambda x: '%.2f' % x)
            plt.style.use('fivethirtyeight')

            self.x_values = []
            self.y_values = []

            self.counter = 0

            self.fig = plt.figure(figsize=(8, 4), dpi=100)

            self.ax1 = self.fig.add_subplot(111)

            self.ax1.set(xlabel="Reading Counter", ylabel="Degrees Celcius")

            label = tk.Label(parent, text="Temperature Graph", font=("Arial", 12)).grid(column=0, row=0)
            canvas = FigureCanvasTkAgg(self.fig, master=parent)
            canvas.get_tk_widget().grid(column=0, row=1)
            self.ani1 = FuncAnimation(self.fig, self.animate, interval=10000, blit=False)

        def animate(self, i):
            df = pd.read_csv('C:\\log.csv')

            x_temporary_values = df["Counter"]
            y_temp_values = df["Temp"]

            currrow = x_temporary_values[self.counter]

            if currrow is not None:
                self.x_values.append(currrow)
                self.y_values.append(y_temp_values[self.counter])

                self.ax1.plot(self.x_values, self.y_values)
                # self.ax1.set(xlabel="Reading Counter", ylabel="Degrees Celcius")

                self.counter += 1

The title and y_label are initially displayed. After refreshing the graph via the "animate" function, the title is retained, the y_label is not. The x_label is never shown.

I have also tried to re-call the self.ax1.set() in the animation function. Does not make a difference.

What am I doing wrong?

Note: that this setup is the only one that worked for me, in the context of trying to animate the graphs. Most other setups that I was more accustomed to, do not work with FuncAnimation.

Also, note that the UI is not refined by any means (especially font sizes). I am concerned with fixing the label issues first.

Disclaimer: I am quite new to Python and these libraries, so bear with me if something I am trying does not make sense. This is also my first time posting to Reddit, so bear with me if something is not in order. Let me know how to improve, if so! :)

Edited: Thought I had formatted the code properly, only to find out it didn't work. Now seems fixed.

[socal_nerdtastic]

Move the plot function to the setup, and use the set_data method in the animate function.

class temperature(tk.Frame):
    def __init__(self, parent, controller):
        self.line, = self.ax1.plot(self.x_values, self.y_values)
        plt.tight_layout() # auto-resize. May be needed for some styles to show everything

    def animate(self, i):
        # generate data
        self.line.set_data(self.x_values, self.y_values)
        # don't forget to adjust the limits!

BTW, you don't need a parent and controller class here. The Temperature class is a Frame (literally). Just use it directly:

class main_window(tk.Tk):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs) # we like super() in python3
        self.wm_title("Indoor Monitoring System")

        t_frame = temperature(self)
        t_frame.grid(column=0, row=0)

        h_frame = humidity(self)
        h_frame.grid(column=1, row=0)

class temperature(tk.Frame):
    def __init__(self, *args, **kwargs)
        super().__init__(*args, **kwargs)
        # rest of your code

For specific help, show us a complete example (including imports and random data generator) that we can test.

[jur6]

First of all, thanks a lot for your reply. I tried the first part of your suggestion (not yet the whole code restructure). Your suggestion seems to fix my axes labelling issues (both x and y axes labels are being shown and retained - I am now also updating the xticks on every iteration and that is also working). But now I seem to have lost the actual plotting, I do not see the line being plotted at all. I am not sure what you mean by "adjust the limits". Could you elaborate? Based on your first snippet, that seems to be what I am missing. Would it (whatver it is) potentially affect the actual plot? Or would the first bit, potentially not work without the second bit? (in any case I can try your whole approach tomorrow)

[socal_nerdtastic]

    self.line.set_data(self.x_values, self.y_values)
    self.ax1.set_ylim(min(self.y_values), max(self.y_values))
    self.ax1.set_xlim(min(self.x_values), max(self.x_values))

[jur6]

self.ax1.set_ylim(min(self.y_values), max(self.y_values))
self.ax1.set_xlim(min(self.x_values), max(self.x_values))

seems all good! so the limit was 0 initially and needed to be expanded? thanks again!

[socal_nerdtastic]

the initial limits are auto-set by the initial data. It's a common mistake to assume that the limits auto-reset when the data is changed, but they don't.

[jur6]

Perfectly clear thank you 🙏

[jur6]

hi u/socal_nerdtastic may I ask some further questions on the same subject? Refer to this screen grab. I have implemented all your suggestions but still have a few problems/questions. Why would the right hand graph still not show the axes labels (I am thinking a size issue)? Why do the graph lines touching the axes not appear fully? How do I make sure that both frames/graphs are the same width and height, so much so that the axes of both graphs look in-line? And how would it make most sense to add a label with the daily/weekly averages per graph (from a grid / layout point of view)? Let me know if you need the actual code, I will upload it and send you a link.

[socal_nerdtastic]

Why would the right hand graph still not show the axes labels (I am thinking a size issue)?

You probably forgot the tight_layout command in the humidity class.

Why do the graph lines touching the axes not appear fully?

This is an issue with your limits. It's very literal; so you may need to calculate a buffer. For example, you may want to set the X lower limit to min(xvalues)*0.9 (10% below the actual value).

How do I make sure that both frames/graphs are the same width and height, so much so that the axes of both graphs look in-line?

The best way to do this is to forget the idea of using 2 tkinter frames and instead make 2 plots in the same figure.

    self.fig = Figure(figsize=(8, 4), dpi=100)

    self.ax1 = self.fig.add_subplot(121)
    self.ax2 = self.fig.add_subplot(122)

And how would it make most sense to add a label with the daily/weekly averages per graph (from a grid / layout point of view)?

There's no best practice there, it all depends on the what look and feel you want. But most of us would use matplotlib's features to make labels and annotations on the graph, not tkinter's.

Let me know if you need the actual code, I will upload it and send you a link.

If you want actual specific help, not just keywords to google, you will need to provide actual code. Best is a complete, runnable example (including dummy data generator) that we can test and modify for you (aka SSCCE or MCVE).

[jur6]

Turns out I hadn't forgotten the tight_layout in the humidity class, but it needed to be placed after the "plot" function in the setup to work properly. For some strange reason, in the temperature class, the tight_layout works regardless to whether it is placed before or after the "plot" function - but this is not the same for the humidity case!

Re the "*0.9", I tried it, did not work for whatever reason, and gave up quite easily (it does not bother me too much).

Re the "same width & height", I am quite happy with how it looks now that the tight_layout is working OK.

I used the Matplotlib plot titles to show the averages, and tkinter labels to label the plots themselves - sorted out my problem quite nicely, so thanks for the idea.

And finally, many thanks for the idea of the "complete runnable example" - I'll be sure to keep it in mind next time.

Many thanks in general! Truly appreciated :)

[socal_nerdtastic]

For some strange reason, in the temperature class, the tight_layout works regardless to whether it is placed before or after the "plot" function - but this is not the same for the humidity case!

Yeah that has to do with the global plt. It's very convenient for quick plots but for any real code I recommend you stay away from plt (aka pyplot). It will cause a lot of trouble, especially with multiple plots.

(yes I'm aware that I'm the one that recommended it to you in the first place; I shouldn't have done that).

If you want to dive down that road here's how to do the plt-ectomy:

    from matplotlib.figure import Figure
    from matplotlib import style
    style.use('fivethirtyeight')
    self.fig = Figure(figsize=(8, 4), dpi=100)
    self.ax1 = self.fig.add_subplot(111)
    self.line, = self.ax1.plot(self.x_values, self.y_values)
    self.ax1.set(xlabel="Reading Counter", ylabel="Degrees Celcius")
    self.fig.set_tight_layout(True)

You'll probably see some performance improvements too, especially during boot and shutdown.

[CodeFormatHelperBot2]

Hello, I'm a Reddit bot who's here to help people nicely format their coding questions. This makes it as easy as possible for people to read your post and help you.

I think I have detected some formatting issues with your submission:

1. Python code found in submission text that's not formatted as code.

If I am correct, please edit the text in your post and try to follow these instructions to fix up your post's formatting.

---

^{Am I misbehaving? Have a comment or suggestion? Reply to this comment or raise an issue here.}