MIT App Inventor Chart - Build an Expense App with Pie Chart

TL;DR

Create a Chart2D component set to type “pi,” enable the legend, and clear it before rebuilding slices.

Briefing Cornell Notes

Briefing

MIT App Inventor’s built-in chart component can generate a clean, color-coded pie chart for a simple expense tracker—by storing each expense (amount + category) in TinyDB, rebuilding category totals on startup, and feeding those totals into a Chart2D set to “pi.” The core workflow is straightforward: collect user input, validate it, save it locally, and then redraw the pie chart so the legend and slices always match the saved data.

The app’s interface starts with an amount text box and a category list picker containing comma-separated options: food, travel, bills, and other. A Save button triggers input checks. Amount must not be empty (and the tutorial notes that restricting the input to numbers helps prevent invalid entries). If the amount is missing, a notifier shows an alert prompting the user to enter an amount.

When input passes validation, the app appends a two-item list to a global expenses list: the first slot holds the amount, and the second slot holds the selected category (pulled from the category picker’s selection). That updated expenses list is then stored in TinyDB under a tag (using a global DB tag variable to avoid spelling mistakes). After saving, the amount text box is cleared so the next entry can be entered without manual deletion, and a dedicated update routine is called to refresh the chart immediately.

On app launch, the same TinyDB tag is used to load the saved expenses list. If no saved data exists yet, the app falls back to an empty list. With the list loaded, the update routine runs again so the pie chart reflects prior entries.

The update chart procedure is where the pie chart becomes meaningful. First, it clears the existing chart data (Chart2D’s clear). Then it initializes four running totals—total food, total travel, total bills, and total other—to zero. A for-each loop iterates through the expenses list; each expense is itself a small list where index 1 is the amount and index 2 is the category. The code compares the category string against the exact spellings used in the picker. Matching categories add the expense amount into the corresponding total.

After the loop, the chart colors are set using a list of four colors (cyan, yellow, pink, and a fourth color chosen in the tutorial). Finally, the routine adds entries to the Chart2D pie chart: food, travel, bills, and other paired with their computed totals as Y values. The result is a pie chart with distinct slices and a legend that stays synchronized with the user’s saved budget categories—without relying on external extensions, which the tutorial highlights as a compatibility advantage for iPhones.

Cornell Notes

The expense app uses MIT App Inventor’s Chart2D component to build a pie chart from saved budget entries. Each saved expense is stored as a two-item list—amount plus category—in TinyDB. On startup and after every save, the app loads the expenses list, clears the chart, and recomputes totals for food, travel, bills, and other by looping through the saved entries. Those totals are then fed into the Chart2D pie chart via add entries, with a matching set of slice colors. This approach keeps the pie chart accurate across sessions and ensures the legend and slice sizes reflect the stored data.

How does the app represent each expense internally so it can compute pie-chart totals later?

Each expense is stored as a small list with two slots: the first slot is the amount from the amount text box, and the second slot is the chosen category from the category picker’s selection. These expense lists are appended into a global expenses list, which is then saved to TinyDB as a single structure.

What input validation prevents broken pie-chart calculations?

Before saving, the Save button handler checks that the amount text box is not equal to an empty text block. If it is empty, the app uses a notifier show alert to prompt the user to enter an amount. The tutorial also notes that enforcing numeric-only input in the designer can prevent non-number entries that would otherwise cause issues when building the chart.

How does the app ensure saved data persists and the chart redraws after reopening?

When the user saves, the updated expenses list is stored in TinyDB under a global DB tag. On screen initialize, the app retrieves the list from TinyDB using the same tag; if nothing exists yet, it uses an empty list. After loading, it calls update chart to rebuild the pie chart from the stored totals.

Why is exact category spelling emphasized in the chart update logic?

During update chart, the code compares the category string inside each expense list against food, travel, bills, and other. Those comparisons only work if the category picker options match the strings used in the if/else-if chain exactly. A mismatch would route amounts into the wrong total or skip them entirely.

What steps convert raw expense entries into pie-chart slices?

Update chart first clears existing chart data, then initializes total food, total travel, total bills, and total other to zero. A for-each loop iterates through the expenses list; for each expense, it checks the category (second slot) and adds the amount (first slot) into the matching total. After totals are computed, the app sets slice colors and calls add entries with X labels (food/travel/bills/other) and Y values (the totals).

Review Questions

What data structure is stored in TinyDB, and how is it organized for later aggregation?
Describe the sequence of operations performed in update chart from clearing the chart to adding entries.
How does the app handle the case where no saved expenses exist yet when the screen initializes?

Key Points

1
Create a Chart2D component set to type “pi,” enable the legend, and clear it before rebuilding slices.
2
Store each expense as a two-item list: [amount, category], then append it to a global expenses list.
3
Persist the entire expenses list in TinyDB under a consistent DB tag and reload it on screen initialize.
4
Validate the amount input on Save by rejecting empty text and (optionally) restricting input to numbers.
5
Recompute category totals every time by looping through expenses and summing amounts based on exact category string matches.
6
Set chart slice colors as a list with one color per category, then add entries using the computed totals as Y values.

Highlights

The pie chart stays accurate by clearing Chart2D and recalculating totals from TinyDB on every startup and after each save.

Each expense is stored as a two-slot list (amount first, category second), which makes category-based aggregation reliable.

Exact spelling of category strings (food, travel, bills, other) is critical because the update logic uses direct string comparisons.

Using TinyDB lets the app rebuild the chart across sessions without external services or extensions.

Topics

MIT App Inventor
Pie Chart
Chart2D
TinyDB
Expense Tracker

MIT App Inventor Chart - Build an Expense App with Pie Chart - Graph MIT App Inventor