Pie Chart

Install a pie chart to give your users a visual representation of counted records, percentages, or record categories.

Skill Level: Beginner

Before You Begin

• Know the basics of Databases and Relationships in Adalo

• For most applications of the pie chart, you will need two collections:

  • A collection of record categories (for example restaurant categories, trip categories, book categories, etc.) or similar that can be tied to the pie chart

  • A collection of records with a relationship (many-to-many works best) to those categories (for example restaurants, trips, books, etc.)

• You do not need a paid Adalo plan to implement this feature

Walkthrough

Simple

1.) While in your Adalo app, click the big plus sign in the top left corner

2.) Scroll down to the Marketplace section and click Explore Marketplace

3.) Find Chart Kit in the list and click Install

4.) Back in the components list, enter Pie Chart in the search bar, then click and drag the component onto the desired screen

5.) In the Pie Chart section dropdown, under the What is this a chart of dropdown, select the collection you wish to display with the chart (in this case, it is the Categories collection)

6.) If a filter is needed, add it just below in the Filter dropdown. For instance, instead of showing all Trip Categories, you can add a filter to show only the Logged in User's > Restaurants > Restaurant Categories to show only the categories of restaurants the user has been to.

7.) In the Show value as dropdown, you can choose to display the values in the chart key as counts, percentages, or hide them completely.

8.) In the Slice Value field, you can use Magic Text to display a Count of the records that have a relationship to the categories collection. For instance, you may choose Restaurants > Count or Trips > Count. Note that you can also type in a value here, but the value will be true for all slices.

9.) In the Slice Label field just below that, you can label all slices by typing it in directly, or you can use Magic Text to display the Category names for each slice (recommended).

10.) The Slices section dropdown allows you to change various options about the pie chart that are mostly based on personal preference:

• Maximum Number of Slices - use the slider to choose how many sections to display in the pie chart

• Other Slice Label - change what the "Other" slice is called by typing in the field or using Magic Text

• Slice Colors - use the dropdown to change whether pie chart colors are complementary to a chosen color or assign custom colors to each slice of the pie

• Slice Actions - here you can add click actions for the slices of the pie much like you would in a list. By clicking on a pie slice, you can send that slice's related record data to another screen or use it to create, update, or delete records. Note that Click Actions are not available for the "Other" slice.

Note that you will need data in your collections for the component to pull from in order for the pie chart to appear.

In-Depth

1.) While in your Adalo app, click the big plus sign in the top left corner

2.) Search for "Marketplace" and click Explore Marketplace

3.) Find Chart Kit in the list and click Install

4.) Back in the components list, enter Pie Chart in the search bar, then click and drag the component onto the desired screen

5.) In the Pie Chart section dropdown, under the What is this a chart of dropdown, select the collection you wish to display with the chart (in this case, it is the Categories collection)

6.) If a filter is needed, add it just below in the Filter dropdown. For instance, instead of showing all Trip Categories, you can add a filter to show only the Logged in User's > Restaurants > Restaurant Categories to show only the categories of restaurants the user has been to. Note that you'll need relationships to the Users collection to show this. You can also add Custom Filters here as well.

7.) In the Show value as dropdown, you can choose to display the values in the chart key as counts, percentages, or hide them completely.

8.) In the Slice Value field, you can use Magic Text to display a Count of the records that have a relationship to the categories collection. For instance, you may choose Restaurants > Count or Trips > Count. Note that you can also type in a value here, but the value will be true for all slices.

9.) In the Slice Label field just below that, you can label all slices by typing it in directly, or you can use Magic Text to display the Category names for each slice (recommended).

10.) The Slices section dropdown allows you to change various options about the pie chart that are mostly based on personal preference:

• Maximum Number of Slices - use the slider to choose how many sections to display in the pie chart

• Other Slice Label - change what the "Other" slice is called by typing in the field or using Magic Text

• Slice Colors - use the dropdown to change whether pie chart colors are complementary to a chosen color or assign custom colors to each slice of the pie

• Slice Actions - here you can add click actions for the slices of the pie much like you would in a list. By clicking on a pie slice, you can send that slice's related record data to another screen or use it to create, update, or delete records. Note that Click Actions are not available for the "Other" slice.

Video

Results

Now your users will be able to see a visual representation of the records in your database through a pie chart. For a clone-able kit of the app in this walkthrough, click here.

Learn More

• There are many different ways to implement the pie chart component. When counting records for displaying slice values, you can also add filters to this which allows you to narrowly define what is shown in the pie chart.

• You can change the size of the chart by clicking and dragging the handles on the chart's yellow bounding box

• If you need more functionality, you can check out the custom components

Help

If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!