My graphs are plotting incorrectly when drawn with FigureCanvasTkAgg

Essentially, I'd like to be able to add a plot into my tkinter UI, from a set of lists. It's the shape of the lines drawn by the lists that matter- when using the following, it outputs a step-shaped graph which I would like to import into my UI.

import matplotlib.pyplot as plt
import numpy as np
x =  [-0.25, -0.125, 0, 0.125, 0.25]    
Ex = [0, 5.6, 5.6, 2.4, 2.4, 1.0, 1.0, 2.7, 2.7, 0]
xx = [-0.25, -0.25, -0.125, -0.125, 0.0, 0.0, 0.125, 0.125, 0.25, 0.25]
plt.plot(Ex,xx)
plt.plot(np.zeros(len(x)), x)

correct image

When I used a different function from a tutorial I found to plot the graph straight into the UI it adds the points with identical x values together, only plotting a simple line graph instead like the following code plots:

import tkinter as tk
from pandas import DataFrame
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg

Ex = [0, 5.6, 5.6, 2.4, 2.4, 1.0, 1.0, 2.7, 2.7, 0]
xx = [-0.25, -0.25, -0.125, -0.125, 0.0, 0.0, 0.125, 0.125, 0.25, 0.25]

data1 = {"E(x)": Ex,
         "Height": xx
        }
df1 = DataFrame(data1,columns=["E(x)","Laminate Height"])

window= tk.Tk() 
frm_graph = tk.Frame()
frm_graph.pack()

Explot = plt.Figure(figsize=(5,4), dpi=100)
a1 = Explot.add_subplot(111)
line2 = FigureCanvasTkAgg(Explot, master=frm_graph)
line2.get_tk_widget().pack(side=tk.LEFT, fill=tk.BOTH)
df1 = df1[["E(x)","Height"]].groupby("E(x)").sum()
df1.plot(kind='line', legend=False, ax=a1, color='b', fontsize=10)

window.mainloop()

Current tkinter failed plot

I have no clue how to solve this, although at a guess the .groupby() command is what breaks the plot- the tutorial I followed sucked and any way to add the graph with the correct plot points to a tkinter frame would be appreciated.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum