Animate a Bar Graph
Visualize a changing sensor as a moving bar.
Animate a Bar Graph is a free Arduino & IoT Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Arduino & IoT Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why a Bar Graph
Numbers are precise, but a bar tells the story instantly. A growing bar shows a rising sensor value far faster than reading digits. 📊
Start From a Reading
Animation begins with fresh data. Each loop you grab a new sensor value, for example an analogRead that lands between 0 and 1023.
int value = analogRead(A0);Map to Bar Width
The raw range rarely matches the screen. Use map to rescale 0-1023 into 0-128 pixels so the value fits your display width.
int barWidth = map(value, 0, 1023, 0, 128);Clamp the Result
A noisy reading can overshoot. Wrap it in constrain so the bar never draws past the screen edge and corrupt the layout.
barWidth = constrain(barWidth, 0, 128);Clear Each Frame
Animation is just redrawing fast. Every frame starts with clearDisplay so the old bar vanishes before the new length is drawn.
display.clearDisplay();Draw the Bar
Now paint the bar with fillRect, using your mapped width. A fixed x, y, and height keep it steady while the width breathes with the data.
display.fillRect(0, 28, barWidth, 8, WHITE);Add a Frame
Outline the full track with drawRect so users see the maximum. The fill grows inside this border, giving the bar clear context.
display.drawRect(0, 28, 128, 8, WHITE);Label the Value
Pair the bar with the exact number. Set the cursor above it and print the reading so users get both the shape and the precise figure.
display.setCursor(0, 0);
display.print(value);Push the Frame
Send the finished frame with display.display(). Because the whole buffer updates at once, the bar moves cleanly with no half-drawn flicker.
display.display();Pace the Animation
Redrawing as fast as possible looks jittery. A small delay of 50 milliseconds smooths motion and steadies a twitchy sensor reading.
delay(50);The Full Loop
Put it together: read, map, clear, draw, display, pause. That cycle in loop() is the engine behind every live OLED animation you build.
Quick Check
Your bar shows ghost trails from previous frames.
Recap
You turned readings into a live bar graph: read, map, constrain, clear, fill, frame, label, and display in a paced loop. That is real-time visualization.
Frequently asked questions
Is the “Animate a Bar Graph” lesson free?
Yes — the full text of “Animate a Bar Graph” is free to read here on the web, and the Arduino & IoT Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Arduino & IoT Academy course, upgrade to CoddyKit PRO.
What will I learn in “Animate a Bar Graph”?
Visualize a changing sensor as a moving bar. You practise Arduino & IoT Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Arduino & IoT Academy?
No prior experience is required. Arduino & IoT Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Animate a Bar Graph” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Arduino & IoT Academy lesson?
Yes. Every Arduino & IoT Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.