The sample app uses and demonstrates:
- Ionic and Bootstrap.
Ionic 4 Line Chart Tutorial
You can also check our step-by-step tutorial that explains how to create a simple Ionic 4 mobile application with a line chart.
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.
- From a new or existing Ionic (or Bootstrap) app, click CREATE NEW > From Plugin, select Apperyio Charts.
- Click Import selected plugin(s).
- Select the Charts page for Default routing.
- Click Apply settings.
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:
Your app most likely will load chart data from a database. This section shows how to do that.
- Go to the Databases tab.
- Click Create new database. Type ChartsData for its name.
- Download the collection backup and unzip it (zip archive contains a single file data.json).
- Click Import a collection, type data for its name and choose the collection backup (data.json).
- Now, go back to your app and perform Create new > Database Service.
- Select ChartsData for database.
- Expand the data collection, select List service and click Import selected services.
- 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.
Updated 6 months ago