Introduction

In this detailed tutorial, you will learn how to build a mobile app with a chart inside of it.

Before You Start

• Tutorial level: beginner; your first mobile app.
• Prerequisites: an Appery.io account.

Creating App

You can select how you would like to get the app working under your Appery.io account:

1. Download the app backup with further installing it (the backup can be securely saved for further use);
2. Create the app from our template with one click (the easiest and quickest option: you will get the working app in a matter of moments)
3. Create the app by yourself using our step-by-step illustrated instructions (more time-consuming but highly educating option that will help in mastering work with Appery.io).

Downloads and Resources

You can try the app yourself by creating from the backup:

1. Download the app backup file.
2. Click From backup and select the project backup file on your drive.
3. Type in the app name.
4. Click Create.

Creating App from Template

👍

NEW: One-Click Template Installation!

You can now enjoy the one-click-away option of installing the template app: simply click the button below and in a moment, your app is ready to start! There’s no need to go to the Create new app dialog or download the template backup with further installing it!

But if you are interested in the app details, please check out the steps below.

Creating New App

1. From the Apps tab, click Create new app.
2. Select Blank as a template, enter the app name, and click Create.

Building UI

The new application appears with a default first page. To build the UI for your app:

1. Under the Project view, unfold Pages and open the Screen1 page.
2. From PALETTE on the left, drag the Chart component and drop it to the screen.

Defining Application Logic

1. Switch to the CODE panel, add a variable: data with type Any and specify its value as array of numbers (for example, [65,78,45,214,456]). These numbers will be used to draw your line chart:

2. Go back to the DESIGN panel and select the Chart Data component inside your app (you can use the OUTLINE view menu or the Breadcrumbs for navigating between the app UI components).
3. Then, under the PROPERTIES panel on the right, specify its property Legend Label property as My Chart and select data for the Data property:

5. Now, click the TEST button in the App Builder Toolbar to check if your line chart looks good on the screen.

As we can see, it looks OK but we can make it more informative so let's add labels to it.

6. On the CODE panel, add one more variable: labels with type Any and specify the value as array of labels (for example, ["June", "July", "August", "September", "October"]).
   Now, the Variables section should look like this:

7. Go back to the page DESIGN panel, select the chart container and under the PROPERTIES panel on the right, specify the property Label as labels:

Click SAVE and test again:

Before we finish, let’s also add a title to our chart.

8. Select the chart container again and for Show Advanced Properties select Title, then expand the Title property below, specify the property Text as My First Chart Title, and set the property Display to True:

Testing App

Click SAVE and then TEST:

Testing on Device

When your app version is ready, you might also like to test it on the device.

👍

Using Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app. The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.