How to create a user input to update the y-axes of the Matplotlib graph on Canvas in PysimpleGUI - matplotlib

Question

I want to create a field in PysimpleGUI where the user can choose the y-axis value of the Matplotlib graph and that the program update the graph. I started learning PysimpleGUI and I am not very experienced with this. I didn't find the answer via google.
I didn't try too much as I am not very experienced and didn't find a solution via google. I expect to get an idea how to create such an user input which updates the y-axis of the graph in PysimpleGUI

Answer 1

Example code to embed matplotlib into PySimpleGUI.
import math, random
from pathlib import Path
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
from matplotlib.figure import Figure
import PySimpleGUI as sg
# 1. Define the class as the interface between matplotlib and PySimpleGUI
class Canvas(FigureCanvasTkAgg):
"""
Create a canvas for matplotlib pyplot under tkinter/PySimpleGUI canvas
"""
def __init__(self, figure=None, master=None):
super().__init__(figure=figure, master=master)
self.canvas = self.get_tk_widget()
self.canvas.pack(side='top', fill='both', expand=1)
# 2. create PySimpleGUI window, a fixed-size Frame with Canvas which expand in both x and y.
font = ("Courier New", 11)
sg.theme("DarkBlue3")
sg.set_options(font=font)
layout = [
[sg.Input(expand_x=True, key='Path'),
sg.FileBrowse(file_types=(("ALL CSV Files", "*.csv"), ("ALL Files", "*.*"))),
sg.Button('Plot')],
[sg.Frame("", [[sg.Canvas(background_color='green', expand_x=True, expand_y=True, key='Canvas')]], size=(640, 480))],
[sg.Push(), sg.Button('Exit')]
]
window = sg.Window('Matplotlib', layout, finalize=True)
# 3. Create a matplotlib canvas under sg.Canvas or sg.Graph
fig = Figure(figsize=(5, 4), dpi=100)
ax = fig.add_subplot()
canvas = Canvas(fig, window['Canvas'].Widget)
# 4. initial for figure
ax.set_title(f"Sensor Data")
ax.set_xlabel("X axis")
ax.set_ylabel("Y axis")
ax.set_xlim(0, 1079)
ax.set_ylim(-1.1, 1.1)
ax.grid()
canvas.draw() # do Update to GUI canvas
# 5. PySimpleGUI event loop
while True:
event, values = window.read()
if event in (sg.WINDOW_CLOSED, 'Exit'):
break
elif event == 'Plot':
"""
path = values['Path']
if not Path(path).is_file():
continue
"""
# 6. Get data from path and plot from here
ax.cla() # Clear axes first if required
ax.set_title(f"Sensor Data")
ax.set_xlabel("X axis")
ax.set_ylabel("Y axis")
ax.grid()
theta = random.randint(0, 359)
x = [degree for degree in range(1080)]
y = [math.sin((degree+theta)/180*math.pi) for degree in range(1080)]
ax.plot(x, y)
canvas.draw() # do Update to GUI canvas
# 7. Close window to exit
window.close()
You can add Input elements with different keys, get the value of element by values[key] when plot to update your y-axis.
Update - Example Code
Add Input elements for y-axis data
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
from matplotlib.figure import Figure
import PySimpleGUI as sg
class Canvas(FigureCanvasTkAgg):
"""
Create a canvas for matplotlib pyplot under tkinter/PySimpleGUI canvas
"""
def __init__(self, figure=None, master=None):
super().__init__(figure=figure, master=master)
self.canvas = self.get_tk_widget()
self.canvas.pack(side='top', fill='both', expand=1)
days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
sg.set_options(font=("Courier New", 16))
layout = [
[sg.Text("Income last week")],
[sg.Canvas(size=(640, 480), background_color='green', expand_x=True, expand_y=True, key='Canvas')],
[sg.Text(day, size=10, justification='center') for day in days],
[sg.Input(size=10, justification='right', key=('Day', i)) for i in range(len(days))],
[sg.Push(), sg.Button('Plot')]
]
window = sg.Window('Title', layout, finalize=True)
fig = Figure(figsize=(5, 4), dpi=100)
ax = fig.add_subplot()
canvas = Canvas(fig, window['Canvas'].Widget)
while True:
event, values = window.read()
if event == sg.WIN_CLOSED:
break
elif event == 'Plot':
# x = [i for i in range(len(days))]
y = []
for i in range(len(days)):
try:
value = float(values[('Day', i)])
except:
value = 0
y.append(value)
ax.cla()
ax.grid()
ax.plot(days, y)
canvas.draw()
window.close()