GuidesAPI ReferenceLatest UpdatesBlogVideosStart Building Apps
API Reference

Charts Sample App

Sample charts app.

🚧

Important Note!

Note that the option of creating new apps with the Ionic and Bootstrap frameworks was removed but we still support the projects that were created with them earlier.

The Charts sample app shows how to display charts in a mobile app. This sample app is built on popular Chart.js library, angular-chart.js (AngularJS wrapper for Chart.js) and consists of two JavaScript files and one CSS file.

The sample app uses and demonstrates:

  • Ionic and Bootstrap.
  • Database.

📘

Ionic 5 Line Chart Sample App

You can also check our step-by-step tutorial that explains how to create a simple Ionic 5 mobile application with a line chart.

Getting the App UI

🚧

Important Note!

Note that the option of creating new apps with the Ionic and Bootstrap frameworks was removed but we still support the projects that were created with them earlier.

The app UI is available as a plugin inside the App Builder. This app is available for Ionic and Bootstrap app types.

  1. From a new or existing Ionic (or Bootstrap) app, click CREATE NEW > From Plugin, select Apperyio Charts.
  2. Click Import selected plugin(s).
  3. Select the Charts page for Default routing.
  4. Click Apply settings.

Testing the App

To test the app, click the Test button. This will launch the app in the browser with sample data defined inside the controller. The app should look like this:

514

Charts app.

Using the Database for Chart Data

Your app most likely will load chart data from a database. This section shows how to do that.

  1. Go to the Databases tab.
  2. Click Create new database. Type ChartsData for its name.
  3. Download the collection backup and unzip it (zip archive contains a single file data.json).
  4. Click Import a collection, type data for its name and choose the collection backup (data.json).
  5. Now, go back to your app and perform Create new > Database Service.
  6. Select ChartsData for database.
  7. Expand the data collection, select List service and click Import selected services.
  8. The code to use the database is already in the app. There is one small update you need to make. Go to the SCOPE view of the charts page. Open the init function (click edit) and modify it to comment out lines 33-43 and uncomment lines 1-32. Now, the app will load the charts data from the database.

You can now test the app again.