How to Create An Animated Chart In Python Tkinter
In this Python tutorial we will create an animated bar chart using the Tkinter library for the graphical user interface.
We will create an animated bar chart that transitions between two datasets over a specified duration.
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 Canvas, StringVar
from time import sleep
class AnimatedChart(tk.Frame):
def __init__(self, master=None):
super().__init__(master)
self.master = master
self.pack()
self.months = ["Jan","Feb", "Mar", "Apr", "May"]
self.data1 = [00, 00, 00, 00, 00]
self.data2 = [27, 63, 47, 81, 16]
self.current_data = self.data1
self.animated_data = self.data1.copy()
self.animated_duration = 2000
self.animation_steps = 100
self.step = 0
self.chart_title = "Sales"
self.create_widgets()
def create_widgets(self):
# Create canvas
self.canvas = Canvas(self, width=600, height=450, bg="white")
self.canvas.pack()
# Start animation
self.timer_callback()
def timer_callback(self):
if self.step <= self.animation_steps:
for i in range(len(self.data1)):
# Update animated data based on current step
start_value = self.data1[i]
end_value = self.data2[i]
self.animated_data[i] = start_value + (end_value - start_value) *
self.step / self.animation_steps
# Increment step and redraw chart
self.step += 1
self.draw_chart()
# Schedule next animation step
self.after(self.animated_duration // self.animation_steps,
self.timer_callback)
else:
# Switch to the other set of data for the next animation cycle
self.current_data = self.data2 if self.current_data == self.data1
else self.data1
self.step = 0
def draw_chart(self):
# Clear canvas
self.canvas.delete("all")
# Set chart dimensions
chart_width = 600
chart_height = 400
bar_spacing = 30
bar_width = (chart_width - (len(self.current_data) + 1) * bar_spacing) /
len(self.current_data)
# Draw chart title
self.canvas.create_text(chart_width // 2, 30, text=self.chart_title,
font=("Arial", 28, "bold"), fill="blue")
# Draw horizontal grid lines
for i in range(1, 26):
y = chart_height - i * (chart_height - 100) /25 - 20
self.canvas.create_line(bar_spacing, y, chart_width - bar_spacing, y,
fill="#e0e0e0")
# Draw vertical grid lines
for i in range(len(self.current_data) + 1):
x = bar_spacing + i * (bar_width + bar_spacing) + bar_width / 2
self.canvas.create_line(x, chart_height - 20, x, 80, fill="#e0e0e0")
# Draw bars and labels
for i in range(len(self.current_data)):
bar_height = (self.animated_data[i] / 100) * (chart_height - 100)
x = bar_spacing + i * (bar_width + bar_spacing)
y = chart_height - bar_height - 20
# Draw bar
self.canvas.create_rectangle(x, y, x + bar_width, chart_height - 20,
fill="#6a1b9a")
# Draw month label
self.canvas.create_text(x + bar_width / 2, chart_height - 5,
text = self.months[i], font=("Arial", 12), fill="black")
# Draw bar value label
self.canvas.create_text(x + bar_width / 2, y - 10,
text = str(int(self.animated_data[i])), font=("Arial", 14), fill="black")
if __name__ == "__main__":
root = tk.Tk()
root.title("Animated Chart")
app = AnimatedChart(master=root)
root.mainloop()
The Final Result:
