How to Create a Dashboard Form In Python Tkinter
The Dashboard includes a title bar, several data panels, and a bar chart.
The data panels display financial information such as Sales, Expenses, Profit, and Customers, while the bar chart shows order data for different products.
What We Are Gonna Use In This Project:
- Python Programming Language.- Tkinter for GUI.
- VS Code Editor.
- VS Code Editor.
Project Source Code:
import tkinter as tk
from tkinter import Frame, Label, BOTH, Canvas
class Dashboard:
def __init__(self, root):
self.root = root
self.root.title("Dashboard")
self.root.geometry("780x600")
self.root.configure(bg="#e6e6e6")
self.create_title_bar()
self.create_dashboard()
def create_title_bar(self):
# Create a dark gray title bar
title_bar = Frame(self.root, bg="#333333", height=30)
title_bar.pack(side="top", fill="x")
# Add a white label with the title text "Dashboard"
title_label = Label(title_bar, text="Dashboard", font=("Arial", 16, "bold"),
fg="#fff", bg="#333")
title_label.pack(side="left", padx=10, pady=5)
def create_dashboard(self):
# Create a light gray dashboard frame
dashboard_frame = Frame(self.root, bg="#f2f2f2")
dashboard_frame.pack(fill=BOTH, expand=True)
# Add data panels with different colors
self.add_data_panel(dashboard_frame, "Sales","$500k", 0, "#a55eea", "#8854d0")
self.add_data_panel(dashboard_frame,"Expenses","$350k",1,"#e74c3c","#c0392b")
self.add_data_panel(dashboard_frame, "Profit","$150k",2,"#2ecc71","#27ae60")
self.add_data_panel(dashboard_frame,"Customers","1,000",3,"#f39c12","#d35400")
# Add a chart panel with a light gray background
chart_panel = Frame(dashboard_frame, bg="#dcdcdc", bd=2, relief="solid")
chart_panel.place(x = 20, y = 20, width=740, height=350)
# Add a title label to the chart panel
chart_title_label = Label(chart_panel, text="Orders",
font=("Arial", 20, "bold"), fg="#fff", bg="#e74c3c")
chart_title_label.pack(fill="x")
# Add a canvas to the chart panel
chart_canvas = Canvas(chart_panel, bg="#ddd", bd=0)
chart_canvas.pack(fill="both", expand=True)
# Draw Chart
self.draw_chart(chart_canvas)
def add_data_panel(self, parent, title, value, index, bg_color, title_bg_color):
# Create a data panel with a colorful background
data_panel = Frame(parent, bg = bg_color, bd=2, relief="solid")
data_panel.place(x=len(parent.winfo_children()) * 20 + index * 170, y = 400,
width=170, height=100)
# Add a white title label
title_label = Label(data_panel, text = title, font=("Arial", 20, "bold"),
fg="#fff", bg=title_bg_color)
title_label.pack(fill="x")
# Add a white value label
value_label = Label(data_panel, text=value, font=("Arial", 24), fg="#fff",
bg=bg_color)
value_label.pack(fill="x")
def draw_chart(slef, canvas):
data = [100, 200, 150, 300, 250, 350]
max_data_value = max(data)
bar_width = 60
bar_spacing = 55
start_x = 50
start_y = 250
for i, value in enumerate(data):
bar_height = int(value / max_data_value * (start_y - 60))
x = start_x + (bar_width + bar_spacing) * i
y = start_y - bar_height
# Draw a blue rectangle for the chart bar
canvas.create_rectangle(x, y, x + bar_width, start_y, fill="#3498db")
# Add value to the bar
canvas.create_text(x + 30, y - 15, text=str(value), fill="#4b6584",
font=("Arial", 14, "bold"))
# Add dark gray text for the product label
canvas.create_text(x + 30, start_y + 15, text=f"Product {i + 1}",
fill="#333", font=("Arial", 12))
if __name__ == "__main__":
root = tk.Tk()
app = Dashboard(root)
root.mainloop()
The Final Result:
