In this tutorial you will learn how to import and use the Appery.io Charts plugin. You will also see how to use database as data source for charts.
Create a new app
To start, you are going to create a new app.
- Click Create new app. Choose Ionic AngularJS App or Bootstrap AngularJS App. Enter any app name you want.
- When the app builder loads, you will see the
Next you are going to import the Appery.io Charts plugin.
Import the plugin
- To import the plugin, click
CREATE NEW > From Plug-in:
- Check the box for
- Click Import selected plug-ins.
- Go to
Project > Routingand set the
That’s it. Let’s now test the app.
Running the app
That’s all you need to do. You can now run the app by clicking the TEST button.
Try to change the chart type by clicking appropriate buttons. You can find all the types supported by Chart.js library here.
Initially, charts are built based on data that is stored to scope variable. See how to use database as data source for charts below.
Using database as charts data source
First, you will need a database to store data. Lets create one:
- Go to Databases tab. Click Create new database. Type
ChartsDatafor its name.
- Download the collection backup and unzip it (zip archive contains a single file
- Next, click
Import a collection, type data for its name and choose the collection backup (
- Now go back to your app and perform
CREATE NEW > Database Services. Select
ChartsDatafor database. Expand
Listand click Import selected services.
- The needed code is already in your app. Go to
chartspage, comment lines from
43and uncomment the code from
Now charts will be built based on data retrieved from the database. You are ready to test the app!