Data in Action: Collecting Data in Bar Graphs and Pie Charts

Track My Mood
This step-by-step guide shows you how to
create an app that tracks your mood for a Discussion: What Visualizations Do You
week or month, then displays the data with a Like?
helpful visual. Based on our popular Mood Visualizations present complex data in a
Ring tutorial, the app goes one step further graphical way that is easier for people to
— it allows you to create a visualization of understand. They help people see at a
the number of happy, angry, and sad days glance what is happening with an issue they
over time.

When you are done, modify the app to count

anything you want — such as recyclables
(“Bottles,” “Cans,” and “Cardboard Boxes”) or
cans of soup (“Caldo De Res,” “Menudo,” and
“Pozole”).

All the data stays in the app until you press Reset. Look for the following guide in this
series on sending your data to an online spreadsheet for sharing with a group.

1
Prerequisites:
● Comfort navigating App Inventor Designer and Blocks screens.
● If you are using a phone or table, you will need an up-to-date App Inventor
Companion (version 2.65 or higher) for Android devices (iOS not available yet, iOS
chart capability currently in development)
● Don’t have a device? To use the phone emulator on your computer, check the
setup instructions.

What Can You Do?

THE CHALLENGE: Put Your Data into Charts and Graphs
● Why create an app that collects data?
● What kinds of charts would best show your data?
PART 1: Get to Know the App Template
1. Download the app template
2. Check out the design
3. Check out the code
PART 2: Add Charts to Your App
4. Use the Chart component*
5. Set your charts to a bar graph and pie chart*
6. Rename the chart components
PART 3 Code the Data Entry Buttons
7. Code a button that keeps track of the total
8. Code the other buttons
PART 4: Update the Charts with the User Data
9. Write a procedure to update the charts
10. Add code to update the bar graph*
11. Add code to update the pie chart*
12. Fix the colors
PART 5: Make It Your Own!

* New App Inventor skills

2
THE CHALLENGE: Add Charts to Your App
Why Create an App to Collect Data?
Phone apps are a great way to collect data using surveys, polls, or observations of nature.
For example, the Track My Mood app collects a user’s private data (How are you feeling?)
in three categories (“Happy,” “Angry,” and “Sad”). The app shows the data back to you so
you can make sense of it.

What Kinds of Charts Are Best?

There are many ways to show data.
● Every time the user presses one of the buttons (Happy, Angry,
Sad), the app could show the totals as numbers (“13, 6, 3”). What
do you think?

● App Inventor can show data in many ways, including charts and
graphs:

Line Graphs Scatter Plots

help people track use dots to show
changes over time. the relationship
They are used to between two
show trends — like variables, such as
the change in height versus
average weight.
temperature every
year.

Bar Graphs Pie Charts

compare values in are best to
different compare parts to
categories, such as the whole, such
the number of days as the share of
with different different moods
moods. Taller bars during one
represent larger month or
values. different types of
spending in a
budget.

In this guide, you will learn how to pick different charts for use in your future app ideas!

3
PART 1: Get to Know the App Template
1. Download the app template.
● The template gives you a head start on building the app.
● Locate the file (MoodTracker_tempate.aia) provided in the folder for this
lesson.
● Download the file to your computer's hard drive. Note where you saved the file.
● Go to App Inventor (http://ai2.appinventor.mit.edu) and import the AIA file
from your computer.

2. Check out the design:

4
 What Does It Do? Make Your Prediction
Look over the components in the Designer screen. Can you predict what each
does? (Note: This guide will use these same component names later. Please do not
rename them.)

5
 ● HorizontalArrangement1 contains three Buttons to track
Happy, Angry, and Sad days in the app:

● HorizontalArrangement2 and HorizontalArrangement3

are empty boxes where you will put charts. These
handy formatting components come from the Layout
drawer in App Inventor.

● HorizontalArrangement4 contains the reset button that

deletes all the data in the app.

3. Check out the code:

Click on Blocks in App Inventor to see the code to get you started:

6
PART 2: Add Charts to Your App
4. Use the Chart component (NEW SKILL)
● In Designer, drag a Chart component
onto your app.
● Drop it inside HorizontalArrangement2
(that empty space up top!):

● Drag a ChartData2D component into

the new Chart. The component is
always attached directly to a Chart
component by dragging it on top.
ChartData2D handles all the data for
the chart.

7
5. Set your charts to a bar graph and pie chart (NEW SKILL)
● In the properties for the chart, click the Type, and choose “bar”:

● Make some adjustments to the design in the properties for the chart.
○ The bar graph needs
some labels. The first
label on the graph
appears under the y-
axis (the line all the
way to the left). To
make everything look
right, make the first
label a 0 by adding
this exact string to
the LabelsFromString
property: “0, Happy,
Angry, Sad”

8
 ○ Uncheck “LegendEnabled”
for the bar graph. (For the
pie chart, you can ignore this
setting and keep it checked.)

○ Check the settings

“XfromZero” and
“YFromZero” to make the
bar graph start from 0
instead of the first number
in the data.
○ You will find the Height
and Width properties here,
too, if you want to adjust
the user interface later.

● Add the pie chart. How would you repeat the steps above to add a pie chart to
the empty HorizonalArrangement3?

9
6. Rename the chart
components
to keep track of them
when coding
● Clear names help
you choose the
right components
when you are
coding. Change the
name of Chart1 to
“barGraph”
● Change ChartData2D1
to
“barGraphData2D”
● Do the same for both pie chart components
on the bottom, as shown.

PART 3: Code the Data Entry Buttons

7. Code a button that keeps track of the total
● Code the happyButton to keep track of how many times the user presses it.

10
● How would you use the
blocks shown below —
including the variable
happyButtonTotal — to
keep a total of how many
times the user has pressed
the button?
● Use what you know from
other App Inventor apps to
do this. Once you are done,
check your work on the next
page.

11
 ● Your new code should look like this:

8. Code the other buttons

● Do the same for angryButton and sadButton. Check your work using the
image below.
● Code the Reset Button.
○ Reset all the variables to 0 when the user presses Reset. Check your work
using the image below.
○ Reset the bar graph by dragging barGraphData2D.Clear from the
barGraphData2D drawer:

○ Using the same method, reset the pie chart.

12
PART 4: Update the Charts with the User Data
9. Write a procedure to update the charts
● To change the charts, you could
add the same code to all three Remember Procedures?
buttons. But that would be a lot of
duplication. You may have come across them in
● Instead, create procedures! other coding projects — procedures
store a sequence of code under a name.
Instead of having to keep adding the
same long code every time, call the
procedure whenever you want your

● Drag a to procedure do block and drop it into an empty space in your code.
This procedure will “do” all actions to update the charts.

● Name the procedure “updateCharts”

13
10. Add code to update the bar graph (NEW SKILL)
● How will you update the bar graph with the new values in variables
happyButtonTotal, angryButtonTotal, and sadButtonTotal to the bar
graph?
○ First, Clear away any old data in the bar graph.

○ Add data to the bar graph. There is a block in the topChartData2D

drawer to import a list into the bar graph. Can you find it? Turn the page
to see if you were right.

14
○ Here’s the block — ImportFromList:

○ ImportFromList, of course, takes a list. Drop a make a list block in the

empty slot. (We’ll figure out what kind of list next!)

○ Create enough space in the block for 3 slots:

15
○ The list will consist of 3 types of data — data for the Happy, Angry, and
Sad categories.

○ This list has several mini-

lists. The mini-lists show What is a list . . . OF LISTS??
the name of the category
A “list of lists” is an important data
and its value. It is a list of structure for programming data
lists! science. Data is often in this format.
Picture a long list of containing two

○ Add 3 make a list blocks into the existing block:

16
 ■ For the first slot, the
element will define
the placement of
“Happy” on the bar
graph. “Happy” will
be the first bar, so
add a number block
with 1 in this spot.
(Note: The bar graph
starts with a 0 slot before the first element, but the 0 slot appears
over the y-axis, so we don’t notice it.)

■ Add the data for the

variable
happyButtonTotal
in the second
element.

○ Using the example above, code the other entries for the Angry and Sad
data (angryButtonTotal and sadButtonTotal).

11. Add code to update the pie chart (NEW SKILL)

● Use what you learned in the bar graph example to code the pie chart on the
bottom. Code the procedure to clear the pie chart data and import the latest
data from a list. Check your work on the next page.

17
● Did you code your procedure block like this? That’s close!

● That code would certainly work, but the pie chart on the bottom can take
strings for each category in the data. (The bar graph can only use numbers to
identify the category names.)
○ From the text drawer, drag in text blocks.
○ Add the names of the categories (Happy, Angry, Sad):

18
○ The last step is to make all the buttons “call” this procedure every time the
user presses a button. Look in the procedure drawer for a block that would
help.

19
Test your code with App Inventor Companion (version 2.65 or
higher) on your phone or tablet, or by using the emulator. In
the App Inventor menu, go to Connect —> AI Companion or
Connect —> Emulator.
● Click the Happy, Angry, and Sad buttons. The chart and
graph should change (it will appear all black for now. We
will fix the colors next!)

● If the buttons are not working, check your code:

20
12. Fix the chart colors
● An all-black chart seems like a pretty bad user interface
(UI)! What problems do you see for users interpreting
the bar graph in black? How about the pie chart?
● Clearly, color is needed. We will use the blocks in the
template:

● Put colors in the charts when the app starts on your phone or tablet.
○ Add a when Screen1.initialize block:

○ Drag the set barGraphData2D.Colors block and drop it into the when
Screen1.initialize block. This block changes the colors of the bar graph. (Be
careful not to use the barGraphData2D.Color blocks.)

21
○ Drag a set Colors block for the
bottom chart.

○ Drop the make a list blocks from the template into the blocks.
■ Drop the 4-color list into the bar graph (topChartData2D) block. (We
use 4 colors for the bar graph to prevent putting color on top of the y-
axis. The colors correspond to the numbers 0, 1, 2, 3)

■ Drop the 3-color list into the pie chart (bottomChartData2D) block.

22
Test again with the full code with App Inventor Companion
(version 2.65 or higher) on your phone or tablet, or by using the
emulator. In the App Inventor menu, go to Connect —> AI
Companion or Connect —> Emulator.
● Click the Happy, Angry, and Sad buttons. Do they work
as expected? If not, double check your code below:

23
PART 5: Make It Your Own!
● Create your own categories. Replace Happy, Angry, Sad with anything you want to
count. You could have more or less than 3 categories.
● Try other types of data, such as the types of pets in your classroom (“Cat,” “Dog,”
“Snake,” “Other”)?
● Send your data to an online spreadsheet (Check the next tutorial in this series to
learn how to do this).
○ Reasons to send your data online:
■ Keep the data safe in case your phone dies!
■ Perform analysis on the data in a spreadsheet.
■ Share data with others through an app or internet link.
■ With enough data over time, you can create a predictive model to
understand what may happen in the future!

24