{"id":6674,"date":"2025-09-30T14:56:47","date_gmt":"2025-09-30T14:56:47","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=6674"},"modified":"2025-09-30T14:56:47","modified_gmt":"2025-09-30T14:56:47","slug":"mit-app-inventor-pie-chart-tutorial","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/mit-app-inventor-pie-chart-tutorial\/","title":{"rendered":"MIT App Inventor Pie Chart Tutorial – Expense App in App Inventor"},"content":{"rendered":"\n

Hello friends,<\/p>\n\n\n\n

Welcome to Obsidian Soft.<\/p>\n\n\n\n

Today, I will teach you how to use the built-in charts component in MIT App Inventor to draw a pie chart. <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

We will make a simple budget app in this tutorial with expense amounts and their categories, and these expenses will be graphically displayed in a pie chart.<\/p>\n\n\n\n

So, let\u2019s begin.<\/p>\n\n\n\n

Open up MIT App Inventor. Start a new project and call it BudgetApp.<\/p>\n\n\n\n

Drag and drop a textbox from the user interface palette onto the viewer.<\/p>\n\n\n\n

Rename to amountTextbox. Make font bold, font size 18, and change hint to \u201cEnter Expense Amount\u201d<\/strong>.<\/p>\n\n\n\n

Drag and drop a listpicker from the user interface below the textbox. Rename to categoryPicker. Make font bold, font size 18, change text to \u201cChoose Expense Type\u201d, <\/strong>and in elements from string, type: Food, Travel, Bills, Other.<\/p>\n\n\n\n

Add a label for space below this listpicker. Remove all text from it.<\/p>\n\n\n\n

Add a button below this space. Rename to saveBtn. Make font bold, font size 18, and change text to \u201cSave\u201d.<\/p>\n\n\n\n

Now, drag and drop a Chart component from the Charts palette below the save button.<\/p>\n\n\n\n

Rename to PieChart. Make height 50% and width 70%. It is very important that you check the legendEnabled checkbox and change the type to Pie.<\/p>\n\n\n\n

Now, here comes another important thing. Drag and drop a ChartData2D component from the Charts palette inside this PieChart.<\/p>\n\n\n\n

Lastly, add a tinyDB component from storage to the viewer and also a notifier for error handling from the user interface.<\/p>\n\n\n\n

Our screen design is done, so let\u2019s go to the blocks section.<\/p>\n\n\n\n

Make a global variable for our list of expenses:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

And a global variable for our DB Tag:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Make an empty procedure of the first type that doesn\u2019t return a result by getting the relevant block from the Procedures section and name it updateChart.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Then, get the save button click event.<\/p>\n\n\n\n

First, we are going to check that the user has entered an amount, and if not, then we will go inside the else condition and show an alert message using the notifier.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Error handling handled \ud83d\ude09<\/p>\n\n\n\n

So, we need to add the data to the expenses list, where each item is a small list too, with 2 items:<\/p>\n\n\n\n

    \n
  1. Amount<\/li>\n\n\n\n
  2. Category<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Next, we need to store this expensesList in TinyDB against our DBTag. We will also empty our amountTexbox to prepare for future entries and call our updateChart procedure(empty at the moment)<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Next, what happens when the screen is initialized? We need to load our previously saved expenses list from the tinyDB against our DB tag into our global expenses list and construct the pie chart for it by calling updateChart procedure.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Lastly, let\u2019s work on our updateChart procedure.<\/p>\n\n\n\n

    First, we are going to clear our previously drawn pie chart by calling the Clear procedure for our ChartData2D component.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Next, we are going to initialize some local total variables for our expense categories to 0.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Now we\u2019ll loop through our expenses list. Remember that each expense is itself a small list where the first item is the amount and the second item is the category. For every expense, we check the category, and based on whether it\u2019s Food, Travel, Other, or Bills, we add the amount to the matching total variable. This way, by the end of the loop, each category variable holds the sum of all its expenses.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    After the for loop ends, we need to specify colors for our pie chart:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    And at the very end, we are going to provide our total variables to chartData2D as entries.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    So the final updateChart procedure looks like this:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    And this is done. I hope you liked this tutorial for making a pie chart in MIT App Inventor using no extensions<\/strong>. You can also have a look at the video tutorial for this project on my channel.<\/p>\n\n\n\n

    \n