If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

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.

The plugins is built on popular Chart.js library, angular-chart.js (AngularJS wrapper for Chart.js) and consists of two JavaScript and one CSS assets.

Create a new app

To start, you are going to create a new app.

  1. Click Create new app. Choose Ionic AngularJS App or Bootstrap AngularJS App. Enter any app name you want.
  2. When the app builder loads, you will see the Start page.

Next you are going to import the Appery.io Charts plugin.

Import the plugin

  1. To import the plugin, click CREATE NEW > From Plug-in:
    from_plugin
  2. Check the box for Appery.io Charts:
  3. Click Import selected plug-ins.
  4. Go to Project > Routing and set the charts page as Default route.

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.

The app just has one page that fully demonstrates Appery.io Charts plugin.
charts_page

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:

  1. Go to Databases tab. Click Create new database. Type ChartsData for its name.
  2. Download the collection backup and unzip it (zip archive contains a single file data.json).
  3. Next, click Import a collection, type data for its name and choose the collection backup (data.json).
  4. Now go back to your app and perform CREATE NEW > Database Services. Select ChartsData for database. Expand data collection, select List and click Import selected services.
  5. The needed code is already in your app. Go to SCOPE of the charts page, comment lines from 35 to 43 and uncomment the code from 1 to 32 line:

Now charts will be built based on data retrieved from the database. You are ready to test the app!