We Keep Coding

Make interactive graph of count history in tkinter

I have the following code for a counter with two buttons, one to increase the count and the other to decrease it. The count is a label containing a number. The graph that appears with the buttons is supposed to visualise the history of the counted number ie. x axis is the index number of results_table and the y axis is the number that appears in the count. The buttons and the count work but the graph doesn't show with the following code. There is obviously something I am missing to get the graph to update. Here's the code:
import tkinter
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
from matplotlib.figure import Figure
class App:
def __init__(self, master):
# Create a container
frame = tkinter.Frame(master)
# Create 2 buttons
self.button_left = tkinter.Button(frame,text="-", command=self.decrease, bg = 'red', fg = 'white')
self.button_left.pack(side="left")
self.button_right = tkinter.Button(frame,text="+", command=self.increase, bg = 'green', fg = 'white')
self.button_right.pack(side="right")
self.label_value = tk.Label(frame, text = '0')
self.label_value.pack(side = "bottom")
fig = Figure()
ax = fig.add_subplot(111)
self.line, = ax.plot(0)
self.canvas = FigureCanvasTkAgg(fig,master=master)
self.canvas.draw()
self.canvas.get_tk_widget().pack(side='top', fill='both', expand=1)
frame.pack()
result_table = []
def decrease(self):
value = int(self.label_value["text"])
self.label_value["text"] = f"{value - 1}"
result_table.append(self.label_value['text'])
x, y = self.line.get_data('result_table')
self.canvas.draw()
def increase(self):
value = int(self.label_value["text"])
self.label_value["text"] = f"{value + 1}"
result_table.append(self.label_value['text'])
x, y = self.line.get_data('result_table')
self.canvas.draw()
root = tkinter.Tk()
app = App(root)
root.mainloop()
Any help graetly appreciated.
Matt

so I solved your problem, but it is not a straight forward answer/solution.
First of all you designed your GUI quiet good! I just wouldn't use pack() but I prefer grid().
Next, I had to delete your class, because I never used tkinter with a class. Maybe you will be able to put it back in.
So what I did:
As already mentioned by Matiiss, you don't really use your x and y values to plot your figure. Your result_table on the other hand just works fine and stores all values created!
So you have to plot them as y values and your x values are basically dependent on the length of your result_table len(result_table). For this part I used numpy to always generate an array of the appropriate length.
Furthermore, I created an extra container fig_frame inside the root, where I always display the figure.
This code worked for me:
import tkinter as tk
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
from matplotlib.figure import Figure
import numpy as np
def decrease():
value = int(label_value["text"])
label_value["text"] = f"{value - 1}"
result_table.append(label_value['text'])
x = np.arange(len(result_table))
y = result_table
create_fig(x, y)
def increase():
value = int(label_value["text"])
label_value["text"] = f"{value + 1}"
result_table.append(label_value['text'])
x = np.arange(len(result_table))
y = result_table
create_fig(x, y)
def create_fig(x, y):
fig = Figure()
ax = fig.add_subplot(111)
line, = ax.plot(x, y)
canvas = FigureCanvasTkAgg(fig, fig_frame)
canvas.draw()
canvas.get_tk_widget().grid(row=0, column=0)
root = tk.Tk()
# Create a container
frame = tk.Frame(root)
fig_frame = tk.Canvas(root, height=650, width=650, borderwidth=1, relief='ridge')
fig_frame.pack()
# Create 2 buttons
button_left = tk.Button(frame, text="-", command=decrease, bg='red', fg='white')
button_left.pack(side="left")
button_right = tk.Button(frame, text="+", command=increase, bg='green', fg='white')
button_right.pack(side="right")
label_value = tk.Label(frame, text='0')
label_value.pack(side="bottom")
fig = Figure()
ax = fig.add_subplot(111)
line, = ax.plot(0)
canvas = FigureCanvasTkAgg(fig, fig_frame)
canvas.draw()
canvas.get_tk_widget().grid(row=0, column=0)
frame.pack()
result_table = []
root.mainloop()
Keep going like this! You really already did a great work and even if my code looks different to your code, most parts are just rearranged!

I have a plot imbedded in my GUI and I want to add a cursor to display the x and y coordinates as I hover over the plot

Plot displaying properly
x=[]
y=[]
figure = Figure(figsize=(5, 4), dpi=100)
plot = figure.add_subplot(1, 1, 1)
figure.suptitle(Date, fontsize=12)
plot.plot(x, y, color="blue")
cursor = Cursor(plot,horizOn=True,vertOn=False,color="green",linewidth=2.0)
canvas = FigureCanvasTkAgg(figure, root)
canvas.get_tk_widget().grid(column=0, row=3,columnspan=4,pady = 4, padx=4)
cursor = Cursor() takes ax and it seems i cant put plot.axes

You need to create the Cursor instance after creating the canvas:
canvas = FigureCanvasTkAgg(figure, root)
canvas.get_tk_widget().grid(column=0, row=3,columnspan=4,pady = 4, padx=4)
cursor = Cursor(plot, horizOn=True, vertOn=False, color="green", linewidth=2.0)
Full example code:
import tkinter as tk
from matplotlib.backends.backend_tkagg import (FigureCanvasTkAgg, NavigationToolbar2Tk)
from matplotlib.figure import Figure
from matplotlib.widgets import Cursor
Date = "2021-06-01"
root = tk.Tk()
x = []
y = []
figure = Figure(figsize=(5, 4), dpi=100)
plot = figure.add_subplot(1, 1, 1)
#print(plot)
figure.suptitle(Date, fontsize=12)
plot.plot(x, y, color="blue")
canvas = FigureCanvasTkAgg(figure, root)
canvas.get_tk_widget().grid(column=0, row=3,columnspan=4,pady = 4, padx=4)
# pack_toolbar=False will make it easier to use a layout manager later on.
toolbar = NavigationToolbar2Tk(canvas, root, pack_toolbar=False)
toolbar.update()
toolbar.grid(sticky="ew")
cursor = Cursor(plot, useblit=True, horizOn=True, vertOn=True, color="green", linewidth=2.0)
root.mainloop()
And the output:

How can I make a code that displays buttons on one half of a tkinter frame and a plot on the other half?

I have a code here.
import tkinter as tk
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
import matplotlib.pyplot as plt
import matplotlib
import math
import numpy as np
root = tk.Tk()
fig = plt.figure()
ax = fig.add_subplot(1, 1, 1)
ax.spines['left'].set_position('center')
ax.spines['bottom'].set_position('center')
ax.spines['right'].set_color('none')
ax.spines['top'].set_color('none')
ax.xaxis.set_ticks_position('bottom')
ax.yaxis.set_ticks_position('left')
x = np.linspace(3,-3,10000)
p = np.sin(x)
w = np.sin(2*x)
l = np.sin(x)/x
c = np.cos(1/x)
r = np.tan(x)
ur = np.cos(x)/x
def firstx():
plt.plot(x, p, 'p-', label = 'y=sin(x)')
fig.canvas.draw()
def snx():
plt.plot(x, w, 'c-', label = 'y=sin(2x)')
fig.canvas.draw()
def thx():
plt.plot(x, l, 'm-', label = 'y=sin(x)/x')
fig.canvas.draw()
def fthx():
plt.plot(x, c, 'v-', label = 'y=sin(1/x)')
fig.canvas.draw()
def tan():
plt.plot(x, r, 's-', label = 'y=tan(x)')
ax.set_ylim([-5, 5])
fig.canvas.draw()
canvas = FigureCanvasTkAgg(fig, master=root)
plot_widget = canvas.get_tk_widget()
plot_widget.grid(row=0, column=1)
tk.Button(root, text="y=sin(x)", command=firstx).grid(row=0, column=0)
tk.Button(root, text="y=sin(2x)", command=snx).grid(row=1, column=0)
tk.Button(root, text="y=sin(x)/x", command=thx).grid(row=2, column=0)
tk.Button(root, text="y=sin(1/x)", command=fthx).grid(row=3, column=0)
tk.Button(root, text="y=tan(x)", command=tan).grid(row=4, column=0)
root.mainloop()
If you run the code you will see one button on the left and the rest of the buttons on the bottom left. How do I make it so that the buttons are all on the left and not the bottom left?
P.S. I am using python 3.6.6.

Change this line:
plot_widget.grid(row=0, column=1)
to
plot_widget.grid(row=0, column=1, rowspan=5)
Read about the rowspan= argument here https://anzeljg.github.io/rin2/book2/2405/docs/tkinter/grid.html or https://effbot.org/tkinterbook/grid.htm

TKinter Matplotlib plot not displaying

I am trying to make a TKinter app that displays a graph made with networkx, using FigureCanvasTkAgg, But the plot it not displayed, only a blank white square is displayed. Here is my program:
root = Tk()
root.wm_protocol('WM_DELETE_WINDOW', root.quit)
canvas = FigureCanvasTkAgg(fig1, master=root)
#canvas.show()
canvas.get_tk_widget().place(relx=.5,rely=.4,anchor="center")
root.title("Item Search")
root.title_font = font.Font(family='Helvetica', size=30, weight="bold", slant="italic")
root.configure(background="#00FFFF")
label = Label(root, text = "Item Search", bg="#236B8E",fg="#67C8FF", height=2, width=root.winfo_height(),font=("Courier", 25))
label.pack(side=TOP,fill=X)
button1 = Button(root, text = "Load User Items", command = lambda:get_user_items(button2),height=2,width=11)
button1.place(relx=.5,rely=.7,anchor="center")
button2 = Button(root, text="Find the Shortest way", comman = find_shortest_way, height=2,width=15,state="disabled")
button2.place(relx=.5,rely=.9,anchor="center")
init()
init() function:
item_db = pd.read_csv("all_items.csv")
item_dict={}
for shelf in item_db:
for item in item_db[shelf]:
if shelf != np.nan:
item_dict[item] = int(shelf)
store.add_node(0,pos=(1,1))
store.add_node(1,pos=(1,0.5))
store.add_node(2,pos=(1,0))
store.add_node(3,pos=(2,0.5))
store.add_node(4,pos=(2,0))
store.add_node(5,pos=(3,1))
store.add_node(6,pos=(3.5,0.5))
store.add_node(7,pos=(4,0))
store.add_node(8,pos=(4,2))
store.add_node(9,pos=(5,2))
store.add_node(10,pos=(5,0))
store.add_edge(0,1,weight=1)
store.add_edge(1,2,weight=1)
store.add_edge(1,3,weight=1)
store.add_edge(3,4,weight=1)
store.add_edge(3,7,weight=2)
store.add_edge(3,6,weight=1)
store.add_edge(3,5,weight=2)
store.add_edge(5,6,weight=1)
store.add_edge(5,8,weight=2)
store.add_edge(6,8,weight=3)
store.add_edge(7,10,weight=1)
store.add_edge(8,9,weight=1)
store.add_edge(8,7,weight=4)
pos=nx.get_node_attributes(store,'pos')
nx.draw(store,pos,with_labels=True)
labels = nx.get_edge_attributes(store,'weight')
nx.draw_networkx_edge_labels(store,pos,edge_labels=labels)
plt.axis('off')
fig1.canvas.draw()
How do I display the plot? what am I doing wrong?

In this minimal example I have to use nx.draw(..., ax=fig.gca() ) to display graph
import tkinter
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
import matplotlib.pyplot as plt
import networkx as nx
root = tkinter.Tk()
fig = plt.Figure()
#sub = fig.add_subplot('111')
canvas = FigureCanvasTkAgg(fig, master=root)
#canvas.draw()
canvas.get_tk_widget().pack() #fill='both', expand=True)
G = nx.dodecahedral_graph()
ax = fig.gca() # it can gives list of `ax` if there is more subplots.
nx.draw(G, ax=ax)
tkinter.mainloop()
Other example which display NetworkX with other standard plots.
import tkinter
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
import matplotlib.pyplot as plt
import networkx as nx
root = tkinter.Tk()
fig = plt.Figure()
sub1 = fig.add_subplot('311')
sub2 = fig.add_subplot('312')
sub3 = fig.add_subplot('313')
canvas = FigureCanvasTkAgg(fig, master=root)
#canvas.draw()
canvas.get_tk_widget().pack() #fill='both', expand=True)
data = [1, 3, 2, 4]
sub1.plot(data)
G = nx.dodecahedral_graph()
nx.draw(G, ax=sub2)
data = [1, 3, 2, 4]
sub3.plot(data)
tkinter.mainloop()

Error in matplotlib popup window (AttributeError: 'NoneType' object has no attribute 'set_canvas')

I tried to plot the graph in pop up window. It pops up. But there is an error.
import tkinter as tk
window = tk.Tk()
window.configure(background='white')
label_1 = tk.Label(window, text="Conpyright 123456789123456798", anchor=tk.S)
label_1.pack()
ws = window.winfo_screenwidth()
hs = window.winfo_screenheight()
w = 980 # width for the Tk root
h = 600 # height for the Tk root
x = (ws / 2) - (w / 2)
y = (hs / 2) - (h / 2)
window.geometry('%dx%d+%d+%d' % (w, h, x, y))
canvas = tk.Canvas(window, bg="white", width=980, height=580, highlightthickness=0)
canvas.pack()
canvas_scroll = tk.Scrollbar(canvas, command=canvas.yview)
canvas_scroll.place(relx=1, rely=0, relheight=1, anchor=tk.NE)
canvas.configure(yscrollcommand=canvas_scroll.set, scrollregion=())
minw_var = tk.DoubleVar()
entry_minw_number = tk.Entry(canvas, textvariable=minw_var)
canvas.create_window(220,215, window=entry_minw_number)
maxw_var = tk.DoubleVar()
entry_maxw_number = tk.Entry(canvas, textvariable=maxw_var)
canvas.create_window(355,215, window=entry_maxw_number)
minl_var = tk.DoubleVar()
entry_minl_number = tk.Entry(canvas, textvariable=minl_var)
canvas.create_window(220,240, window=entry_minl_number)
maxl_var = tk.DoubleVar()
entry_maxl_number = tk.Entry(canvas, textvariable=maxl_var)
canvas.create_window(355,240, window=entry_maxl_number)
rect_var = tk.IntVar()
entry_rect_number = tk.Entry(canvas, textvariable=rect_var)
canvas.create_window(290,270, window=entry_rect_number)
And this is the part for matplotlib
-------------------------------------------------------------------------
def plot_sheet(self):
fig,ax = plt.subplots(1)
ax.set_xlim([0, self.W])
ax.set_ylim([0, self.L])
recs = []
for i in range(len(self.rect_list)):
if self.rect_rotate[i]:
ax.add_patch(patches.Rectangle((self.rect_pos[i][0], self.rect_pos[i][1]), self.rect_list[i].l, self.rect_list[i].w,linewidth=3,edgecolor='r'))
else:
ax.add_patch(patches.Rectangle((self.rect_pos[i][0], self.rect_pos[i][1]), self.rect_list[i].w, self.rect_list[i].l,linewidth=3,edgecolor='r'))
#plt.show()
return fig
def plot_sheets(self):
for i in range(len(self.sheets)):
self.sheets[i].plot_sheet()
def cal_culate1():
fig = packing_options[best_index].plot_sheets()
dataPlot = FigureCanvasTkAgg(fig, master = window)
dataPlot.show()
dataPlot.get_tk_widget().pack(side='top', fill='both', expand=1)
window.mainloop()
I wrote dataPlot = FigureCanvasTkAgg(fig, master = window). There is an error in master = window.
File "", line 687, in cal_culate1
dataPlot = FigureCanvasTkAgg(fig, master = window)
File "C:\Users\sel\Anaconda3\lib\site-packages\matplotlib\backends_backend_tk.py", line 204, in init
super(FigureCanvasTk, self).init(figure)
File "C:\Users\sel\Anaconda3\lib\site-packages\matplotlib\backend_bases.py", line 1618, in init
figure.set_canvas(self)
AttributeError: 'NoneType' object has no attribute 'set_canvas'
What should be written there?

You didn't show how you create your class for plotting, so i can only go by assumption here. First create a empty list:
import tkinter as tk
window = tk.Tk()
window.configure(background='white')
figure_holder = []
Then append to the list when you create your figure:
def plot_sheets(self):
for i in range(len(self.sheets)):
a = self.sheets[i].plot_sheet()
figure_holder.append(a)
Retrieve the figure object from the list when you plot it:
def cal_culate1():
fig = figure_holder[0]
dataPlot = FigureCanvasTkAgg(fig, master = window)
#dataPlot.show()
dataPlot.get_tk_widget().pack(side='top', fill='both', expand=1)

I made minimal working example which shows how do this.
it will need changes for your code but I don't know what you have in code and you didn't create minimal working example.
It creates three figures in generate_all_figures (in your code it will be plot_sheets with s) using plot_sheet (without s) and keep on list.
window display first figure from this list.
Buttons remove canvas with figure and create new canvas with next/previous figure from list.
I use grid() instead of pack() because this way I can easily put new canvas in the same place.
import tkinter as tk
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
class MyClass():
def __init__(self):
self.sheets = [[1,2,3], [3,1,2], [1,5,1]]
self.W = 2
self.L = 5
self.all_figures = []
def plot_sheet(self, data):
"""plot single figure"""
fig, ax = plt.subplots(1)
ax.set_xlim([0, self.W])
ax.set_ylim([0, self.L])
ax.plot(data)
return fig
def generate_all_figures(self):
"""create all figures and keep them on list"""
for data in self.sheets:
fig = self.plot_sheet(data)
self.all_figures.append(fig)
def show_figure(number):
global dataPlot
# remove old canvas
if dataPlot is not None: # at start there is no canvas to destroy
dataPlot.get_tk_widget().destroy()
# get figure from list
one_figure = my_class.all_figures[number]
# display canvas with figuere
dataPlot = FigureCanvasTkAgg(one_figure, master=window)
dataPlot.draw()
dataPlot.get_tk_widget().grid(row=0, column=0)
def on_prev():
global selected_figure
# get number of previous figure
selected_figure -= 1
if selected_figure < 0:
selected_figure = len(my_class.all_figures)-1
show_figure(selected_figure)
def on_next():
global selected_figure
# get number of next figure
selected_figure += 1
if selected_figure > len(my_class.all_figures)-1:
selected_figure = 0
show_figure(selected_figure)
# --- main ---
my_class = MyClass()
my_class.generate_all_figures()
window = tk.Tk()
window.rowconfigure(0, minsize=500) # minimal height
window.columnconfigure(0, minsize=700) # minimal width
# display first figure
selected_figure = 0
dataPlot = None # default value for `show_figure`
show_figure(selected_figure)
# add buttons to change figures
frame = tk.Frame(window)
frame.grid(row=1, column=0)
b1 = tk.Button(frame, text="<<", command=on_prev)
b1.grid(row=0, column=0)
b2 = tk.Button(frame, text=">>", command=on_next)
b2.grid(row=0, column=1)
window.mainloop()
Probably it could be done without replacing canvas but by replacing data in plot (fig.data ???, ax.data ??? I don't remember)