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

Chart.js is an easy way to include animated, interactive graphs in your app or website. Chart.js is a JavaScript library that uses the HTML5 canvas element and provides six chart types: line, bar, radar, polar area, pie and doughnut charts. It’s modular and lightweight and is supported by the majority of modern browsers.

Introduction

In this tutorial, you’ll learn how to use Chart.js library in the Appery.io Ionic/AngularJS app. The tutorial includes steps that will guide you through the process of integrating and using Chart.js library. The same steps apply to Bootstrap/AngularJS projects.

Appery.io also has Appery.io Charts plug-in. See how to use it here.

If you are not familiar with the Ionic/AngularJS frameworks, we recommend that you read the following documentation about AngularJS and Ionic. You can also read the Bootstrap documentation.

In this application, a user can view charts built on the defined data. This app uses the Chart.js module and shows you an example of integrating AngularJS modules.

Before you begin

This tutorial assumes you know AngularJS basic principles.

Before building an app, download Chart.js and Angular Chart from GitHub:

Creating a new app

Create a new app in the Builder; from the Apps page, click Create new app, select Ionic AngularJS App, enter an app name, and click Create.

The app builder opens. The app already has index and Screen1 pages by default. You will build the Screen1 page later.

Adding the Chart.js libraries

To add the libraries to your app, follow these steps:

  1. Click CREATE NEW > JavaScript.
  2. In the dialog box, enter the file name (for example, chart.  (Do not include .js extension in the file name.), choose Upload from file and select the Chart.js file that you downloaded from GitHub.
  3. Repeat the step 2 to upload the angular-chart.js file. For the file name, enter angular-chart.
  4. The uploaded files open in new project tabs. In the angular-chart tab, provide the following change:
    • in the line
      change chart.js to angular-chart:


    This will allow the Chart.js library to integrate correctly to the Appery.io project.

  5. Go to the Source view and expand the WEB_RESOURCES/libs folder. Click the gear icon next to the libs folder and select Create folder.
    chart003-create_folder
  6. Enter the new folder name angular-chart and click Create. Click the gear icon next to the new folder, select Upload to this folder and select the angular-chart.css file that was downloaded from GitHub.

Configuring App settings

Go to the Project view and open Project > App settings. There, define the following:

  • On the General tab, click Add. A new tag appears. The tag name is link, for the attributes enter the link to the angular-chart.css file:
  • Switch to the Resources tab. In the Internal resources list find the names of the uploaded JavaScript files (chart and angular-chart), and set the Type parameters for each:
    • External lib for chart,
    • Angular module for angular-chart.

Building the page

Using the Chart.js library is quite easy. Follow these steps to create a line chart:

  1. Open Screen1, and add an HTML component to the page. It is empty now, but it will display a chart based on the data you add to the project.
  2. In a real project you can load data from a service or a storage. In this tutorial, define data in the scope of the page:
    1. Switch to the SCOPE tab:
      chart005-scope_tab
    2. Click Edit for the init function.
    3. Add the following code:

      Here, a chartData object is defined. It contains the information necessary to render the chart. The labels property defines the strings that will be represented across the x-axis. The series property lists the data series for the chart. In this example, there are three series, that’s why the data property contains three arrays of data.

  3. Switch back to the DESIGN tab. For the HTML component, click Edit in the PROPERTIES panel.
  4. Add the following HTML markup:

Testing the app

It’s time to test the app. Click the TEST button in the toolbar and the preview opens:
chart008-line_chart

Other types of chart

To display other chart types:

  • For a bar chart, paste the following HTML markup:
    chart009-bar_chart
  • For a radar chart, paste the following HTML markup:
    chart010-radar_chart
  • For a polar area chart:
    • add the following code to the init function in the SCOPE tab:
      This chart type is possible for only one serie.
    • paste the following HTML markup:

    chart011-polararea_chart

  • For a pie chart:
    • you can use the same code in the init function in the SCOPE tab as for a polar area. This chart type is possible for only one serie.
    • paste the following HTML markup:

    chart012-pie_chart

  • For a doughnut chart:
    • you can use the same code in the init function in the SCOPE tab as for a polar area. This chart type is possible for only one serie.
    • paste the following HTML markup:

    chart013-doughnut_chart

For more information, read Angular Chart.

If you want to display more than one chart on a page, add an HTML component for every chart.