In this short tutorial, you’ll see how to create a tkinter GUI with the following components:
- Canvas screen, where you can place items, such as labels and buttons
- Labels to display text on top of the Canvas
- Entry Boxes to allow users type values
- Function to display a Bar and Pie charts
- Button to trigger the function
Create a GUI in Python using tkinter
To start, here is the complete code to create the tkinter GUI. Later, you’ll see an explanation of the main components of the code.
You’ll need to ensure that the Matplotlib package is installed in Python. This package is used to display the charts (i.e., the bar and the pie charts).
import tkinter as tk
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg
from matplotlib.figure import Figure
root = tk.Tk()
root.geometry("900x500")
canvas = tk.Canvas(root, width=800, height=300)
canvas.pack()
label1 = tk.Label(root, text="Graphical User Interface")
label1.config(font=("Arial", 20))
canvas.create_window(400, 50, window=label1)
entry1 = tk.Entry(root)
canvas.create_window(400, 90, window=entry1)
entry2 = tk.Entry(root)
canvas.create_window(400, 110, window=entry2)
entry3 = tk.Entry(root)
canvas.create_window(400, 130, window=entry3)
def create_charts():
x1 = float(entry1.get())
x2 = float(entry2.get())
x3 = float(entry3.get())
figure1 = Figure(figsize=(4, 3), dpi=100)
subplot1 = figure1.add_subplot(111)
x_axis = [float(x1), float(x2), float(x3)]
y_axis = [float(x1), float(x2), float(x3)]
subplot1.bar(x_axis, y_axis, color="lightsteelblue")
bar1 = FigureCanvasTkAgg(figure1, root)
bar1.get_tk_widget().place(x=50, y=180)
figure2 = Figure(figsize=(4, 3), dpi=100)
subplot2 = figure2.add_subplot(111)
labels2 = "Label1", "Label2", "Label3"
pie_sizes = [float(x1), float(x2), float(x3)]
my_colors2 = ["lightblue", "lightsteelblue", "silver"]
explode2 = (0, 0.1, 0)
subplot2.pie(
pie_sizes,
colors=my_colors2,
explode=explode2,
labels=labels2,
autopct="%1.1f%%",
shadow=True,
startangle=90,
)
subplot2.axis("equal")
pie2 = FigureCanvasTkAgg(figure2, root)
pie2.get_tk_widget().place(x=450, y=180)
button1 = tk.Button(
root,
text=" Create Charts ",
command=create_charts,
bg="palegreen2",
font=("Arial", 11, "bold"),
)
canvas.create_window(400, 162, window=button1)
root.mainloop()
Let’s now dive into the main components of the Python code:
The Canvas
The Canvas is your GUI screen where you can place items, such as buttons, labels, entry boxes and more. You can control the dimensions of the Canvas by changing the width and height values:
canvas = tk.Canvas(root, width=800, height=300)
canvas.pack()
The Labels
Labels can be used to print text on top of the Canvas. For our example, a label was added to display the following text:
‘Graphical User Interface’
You may specify a different font-family and font-size for your labels. In our case, the font family is ‘Arial’ and the font size is ’20.’
Finally, you can control the position of the label by modifying the coordinates on the last row below (for our example, the coordinates are 400 and 50):
label1 = tk.Label(root, text="Graphical User Interface")
label1.config(font=("Arial", 20))
canvas.create_window(400, 50, window=label1)
The Entry Boxes
The 3 entry boxes are used to collect information from the user. That information will then be used to create the Matplotlib charts.
As before, you can control the position of the entry boxes by specifying the coordinates:
entry1 = tk.Entry(root)
canvas.create_window(400, 90, window=entry1)
entry2 = tk.Entry(root)
canvas.create_window(400, 110, window=entry2)
entry3 = tk.Entry(root)
canvas.create_window(400, 130, window=entry3)
The Function
The ‘create_charts‘ function will be called when the user clicks on the first button (i.e., ‘button1’) to draw the charts.
The information collected in the entry boxes, will then be used to depict the bar and pie charts. Here is a full guide that explains how to place charts on a tkinter GUI.
def create_charts():
x1 = float(entry1.get())
x2 = float(entry2.get())
x3 = float(entry3.get())
figure1 = Figure(figsize=(4, 3), dpi=100)
subplot1 = figure1.add_subplot(111)
x_axis = [float(x1), float(x2), float(x3)]
y_axis = [float(x1), float(x2), float(x3)]
subplot1.bar(x_axis, y_axis, color="lightsteelblue")
bar1 = FigureCanvasTkAgg(figure1, root)
bar1.get_tk_widget().place(x=50, y=180)
figure2 = Figure(figsize=(4, 3), dpi=100)
subplot2 = figure2.add_subplot(111)
labels2 = "Label1", "Label2", "Label3"
pie_sizes = [float(x1), float(x2), float(x3)]
my_colors2 = ["lightblue", "lightsteelblue", "silver"]
explode2 = (0, 0.1, 0)
subplot2.pie(
pie_sizes,
colors=my_colors2,
explode=explode2,
labels=labels2,
autopct="%1.1f%%",
shadow=True,
startangle=90,
)
subplot2.axis("equal")
pie2 = FigureCanvasTkAgg(figure2, root)
pie2.get_tk_widget().place(x=450, y=180)
The Button
The button (i.e., ‘button1’) can be used to trigger the ‘create_charts‘ function in order to draw the charts.
You can position the button on the Canvas by specifying the coordinates (in our case, the coordinates are 400 and 162):
button1 = tk.Button(
root,
text=" Create Charts ",
command=create_charts,
bg="palegreen2",
font=("Arial", 11, "bold"),
)
canvas.create_window(400, 162, window=button1)
Launch the tkinter GUI
Once you’re ready, run the complete code in Python, and you’ll get the tkinter GUI.
Type a value within each of the input boxes. For example, type the values of 4, 5 and 6 in the input boxes, and then click on the “Create Charts” button.
You’ll then see the two charts at the bottom section of your screen (based on the 3 values that you typed):
- On the left side, you’ll see the bar chart
- On the right side, you’ll observe the pie chart (representing your values in % terms)
Additional Resources – Tkinter GUI
- The following guide further explains how to place charts on a tkinter GUI
- You may also want to check how to add message boxes to your GUI
- Finally, you may refer to the tkinter documentation to find out more about tkinter