[FIXED] the graphs lines doesn't appear (tkinter, matplotlib)

Issue

i have a gui app that have some graph. I used my graph as a subplot. when I start to show graphs the graph lines don't appear but the axis are keeping going. what is the problem I don't know. I also write a simple code that has 2 subplots and they work properly but this one is not working. here is the code. it can be executable. when you press the Start Listing Datas button in interface graphs will start. i hope the code is understandable. I cut some parts that are unnecessary.

from tkinter import *
from tkinter import ttk 
import time 
import matplotlib.pyplot as plt
import matplotlib.animation as animation
from matplotlib.figure import Figure
from matplotlib.backends.backend_tkagg import (FigureCanvasTkAgg)
import random

root = Tk()

root.title("ktu")
root.state('zoomed')
root.configure(bg="#0059aa")
plt.style.use('ggplot')


#------------------------------------------------------------------------------------------------------------------------------------

#datas !!!!!!!!!!!!!!!!!!!!
global datas
datas = []
global packageNum
packageNum = 0
def randomData():
    # randData.clear()
    randData = []
    
    randData.append(356356)
    
    global packageNum
    packageNum = packageNum+1
    randData.append(packageNum)
    
    randData.append(    time.strftime("%H") + ":"+  
                     time.strftime("%M") + ":"+
                     time.strftime("%S") + ", " +
                     time.strftime("%d") + "/"+
                     time.strftime("%m") + "/"+
                     time.strftime("%Y"))
    randData.append(random.randint(0,10000)) # data for yindex 3
    randData.append(random.randint(0,10000)) # data for yindex 4
    randData.append(random.randint(0,700))   # data for yindex 5
    randData.append(random.randint(0,700))   # data for yindex 6
    randData.append(randData[6]-randData[5]) 
    randData.append(random.randint(10,20))   # data for yindex 8
    randData.append(random.randint(20,25))   # data for yindex 9
    randData.append(random.randint(39,50))   # data for yindex 10
    randData.append(random.randint(1,6))     # data for yindex 11
    randData.append(0.0000) 
    randData.append(0.0000) 
    randData.append(random.randint(0,700)) 
    randData.append(0.0000) 
    randData.append(0.0000) 
    randData.append(random.randint(0,700)) 
    randData.append("durum")
    randData.append(random.randint(0,100)) 
    randData.append(random.randint(0,100)) 
    randData.append(random.randint(0,100)) 
    randData.append(random.randint(0,50)) 
    randData.append("hayır")
    randData.append(" ")

    return randData 





#------------------------------------------------------------------------------------------------------------------------------------

#seri port 

seriPortOuter = LabelFrame(root,text=u"SERIAL PORT",border=3, width=170,height=210)
seriPortOuter.place(x=5,y=305)

text1= Label(seriPortOuter,text=u"get connection", width=14, 
                    font=("Helvetica",10),
                    fg="white", bg="red")
text1.place(x=3,y=5)

text2= Label(seriPortOuter,text="COM Port", width=8, 
                    font=("Helvetica",10))
text2.place(x=1,y=30)

portList = ["Option1", "Option2", "Option3",
          "Option4", "Option5", "Option6"]
 
portCombo = ttk.Combobox(seriPortOuter, values = portList, width=8)
portCombo.set("")
portCombo.place(x=68,y=30)



text3= Label(seriPortOuter,text=u"Speed", width=4, 
                    font=("Helvetica",10))
text3.place(x=1,y=55)

speedList = ["Option1", "Option2", "Option3",
          "Option4", "Option5", "Option6"]
 
speedCombo = ttk.Combobox(seriPortOuter, values = speedList, width=8)
speedCombo.set("") 
speedCombo.place(x=68,y=55)

global x
x=0
def StartListing():

    root.after(2000,StartListing)
    global x
    
    global datas
    datas = randomData()
    GraphIt(plot1, x, 3, plot1Canvas,fig_plot1, 0, 0)
    GraphIt(plot2, x, 4, plot2Canvas,fig_plot2, 1, 0) 
    GraphIt(plot3, x, 5, plot3Canvas,fig_plot3, 0, 1)
    GraphIt(plot4, x, 6, plot4Canvas,fig_plot4, 1, 1)
    GraphIt(plot5, x, 10, plot5Canvas,fig_plot5, 0, 2)
    GraphIt(plot6, x, 9, plot6Canvas,fig_plot6, 1, 2)
    GraphIt(plot7, x, 11, plot7Canvas,fig_plot7, 0, 3)
    GraphIt(plot8, x, 8, plot8Canvas,fig_plot8, 1, 3)
    x= x+1



StartListingButton = Button(seriPortOuter, text=u"Start Listing Datas", command=StartListing, width=19)
StartListingButton.place(x=10,y=125)


#graph

graph_canvas = Canvas(root, width=842,height=575, bg="#0059aa" )
graph_canvas.place(x=585,y=30) #607~

# graph_canvas.config(highlightbackground="white")

#Pressure 1

fig_plot1= Figure(figsize=(2.33,2.5), dpi=100)
plot1= fig_plot1.add_subplot(111)
plot1.set_title(u'Pressure1 (Pa)',fontsize=8)
plot1Canvas = FigureCanvasTkAgg(fig_plot1, master=graph_canvas)
plot1Canvas.get_tk_widget().grid(row=0,column=0,pady=5, padx=3)
plot1Canvas.draw()

#basınç 2
fig_plot2= Figure(figsize=(2.33,2.5), dpi=100)
plot2= fig_plot2.add_subplot(111)
plot2.set_title(u'Pressure2 (Pa)',fontsize=8)
plot2Canvas = FigureCanvasTkAgg(fig_plot2, master=graph_canvas)
plot2Canvas.get_tk_widget().grid(row=1,column=0,pady=5, padx=3)
plot2Canvas.draw()

#yükseklik 1
fig_plot3= Figure(figsize=(2.33,2.5), dpi=100)
plot3= fig_plot3.add_subplot(111)
plot3.set_title(u'altitude1 (m)',fontsize=8)
plot3Canvas = FigureCanvasTkAgg(fig_plot3, master=graph_canvas)
plot3Canvas.get_tk_widget().grid(row=0,column=1,pady=5, padx=2)
plot3Canvas.draw()

#yükseklik 2
fig_plot4= Figure(figsize=(2.33,2.5), dpi=100)
plot4= fig_plot4.add_subplot(111)
plot4.set_title(u'altitude2 (m)',fontsize=8)
plot4Canvas = FigureCanvasTkAgg(fig_plot4, master=graph_canvas)
plot4Canvas.get_tk_widget().grid(row=1,column=1,pady=5, padx=2)
plot4Canvas.draw()

#nem özgün görev
fig_plot5= Figure(figsize=(2.33,2.5), dpi=100)
plot5= fig_plot5.add_subplot(111)
plot5.set_title('temperature (°C)',fontsize=8)
plot5Canvas = FigureCanvasTkAgg(fig_plot5, master=graph_canvas)
plot5Canvas.get_tk_widget().grid(row=0,column=2,pady=5, padx=2)
plot5Canvas.draw()

#sıcaklık
fig_plot6= Figure(figsize=(2.33,2.5), dpi=100)
plot6= fig_plot6.add_subplot(111)
plot6.set_title(u'temperature (°C)',fontsize=8)
plot6Canvas = FigureCanvasTkAgg(fig_plot6, master=graph_canvas)
plot6Canvas.get_tk_widget().grid(row=1,column=2,pady=5, padx=2)
plot6Canvas.draw()

#pil
fig_plot7= Figure(figsize=(2.33,2.5), dpi=100)
plot7= fig_plot7.add_subplot(111)
plot7.set_title('voltage (V)',fontsize=8)
plot7Canvas = FigureCanvasTkAgg(fig_plot7, master=graph_canvas)
plot7Canvas.get_tk_widget().grid(row=0,column=3,pady=5, padx=2)
plot7Canvas.draw()

#hız
fig_plot8= Figure(figsize=(2.33,2.5), dpi=100)
plot8= fig_plot8.add_subplot(111)
plot8.set_title(u'descent velocity (m/sn)',fontsize=8)
plot8Canvas = FigureCanvasTkAgg(fig_plot8, master=graph_canvas)
plot8Canvas.get_tk_widget().grid(row=1,column=3,pady=5, padx=2)
plot8Canvas.draw()


def GraphIt(myplot,xindex, yindex, canvas, fig, rw, col):
    myplot.plot(xindex, datas[yindex])

    canvas = FigureCanvasTkAgg(fig,master=graph_canvas)
    canvas.draw()
    canvas.get_tk_widget().grid(row=rw,column=col,pady=5, padx=2)
    plt.show()
    




root.mainloop()

Solution

plot default want to draw lines and for a line at least 2 xy pairs are needed. To only draw a point, plot accepts a third parameter, for example 'ro' to represent a red dot.

There's already canvas created for each figure, it is not necessary to get new canvas by calling FigureCanvasTkAgg again.

def GraphIt(myplot, xindex, yindex, canvas, fig, rw, col):
    myplot.plot(xindex, datas[yindex], 'ro')
    # canvas = FigureCanvasTkAgg(fig,master=graph_canvas)
    canvas.draw()
    # canvas.get_tk_widget().grid(row=rw, column=col, pady=5, padx=2)
    # plt.show()

For line segment to plot, need more points as arguments, following code keep old data and send two points as arguments, then you will find line segment drawn.

global x, old_datas
x, old_datas = 0, None

def StartListing():

    root.after(2000,StartListing)
    global x

    global datas, old_datas
    datas = randomData()
    GraphIt(plot1, x,  3, plot1Canvas, fig_plot1, 0, 0)
    GraphIt(plot2, x,  4, plot2Canvas, fig_plot2, 1, 0)
    GraphIt(plot3, x,  5, plot3Canvas, fig_plot3, 0, 1)
    GraphIt(plot4, x,  6, plot4Canvas, fig_plot4, 1, 1)
    GraphIt(plot5, x, 10, plot5Canvas, fig_plot5, 0, 2)
    GraphIt(plot6, x,  9, plot6Canvas, fig_plot6, 1, 2)
    GraphIt(plot7, x, 11, plot7Canvas, fig_plot7, 0, 3)
    GraphIt(plot8, x,  8, plot8Canvas, fig_plot8, 1, 3)
    x= x+1
    old_datas = datas

def GraphIt(myplot, xindex, yindex, canvas, fig, rw, col):
    x1, y1 = xindex, datas[yindex]
    if old_datas:
        x0, y0 = x1-1, old_datas[yindex]
        myplot.plot([x0, x1], [y0, y1], 'r-')
    canvas.draw()

Answered By - Jason Yang