Creating Mobile Charts In Ionic 2 Framework Using SQLite

Ionic 2 Framework Using SQLite

Ionic is one of the leading SDK (Software development kit) for hybrid mobile app development in open-source platform. The latest Ionic SDK, Ionic 2 is built on top of AngularJS. Ionic is an open source framework which provides an array of tools and services for unique development of hybrid mobile apps using web technologies like CSS, HTML5, and SasS.

This tutorial showcases how you can render charts in Ionic framework using SQLite which is an embedded SQL database engine. To render charts, we’ll use FusionCharts JavaScript Library.

Requirements

Before you start, make sure you have the following components on your local machine:

To render charts in Ionic 2 framework, refer to the step by step process given below:

Step 1: Setting up the Environment

  • Install Ionic 2 in your local system. Run the following code in the terminal:
    npm install -g ionic cordova
    You can also refer to the documentation page of Ionic 2 from here.
  • After the installation, create the skeleton of the app. Run the following code in cmd shell to create the skeleton:
    ionic start fusiondatabase blankThe above command will install all the dependencies to run a basic project.
  • Install SQLite plugin.
    From your CMD shell, get into application directory
    Reference : c:\ionicprojects\fusiondatabase>
  • Once you are in the application directory, run the following command:
    ionic cordova plugin add cordova-sqlite-storage
    Note: To know more, refer to the documentation of SQLite plugin.
  • app.module.ts file is pre build in the project created. The command mentioned below will import the SQLite class to the app.module.ts file. SQLite class, imports the SQLite native plugin for Ionic 2.
    import { SQLite } from '@ionic-native/sqlite';
  • Pass the SQLite class in the provider of app.module.ts file. Refer to the code below:
  • It’s time to import SQLite and SQLiteObject in home.ts file.You’ll get the file in folder named home under src folder [src -> home -> home.ts]. Once done, from the terminal run the command given below:
    import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
  • Create a reference of the constructor using the following code in your home.ts file
  • Add the FusionCharts angular 2 plugin to your project. Run the following command in your CMD shell:
    npm install angular2-fusioncharts --save
  • The entire app.module.ts looks like:

    With this, you have set the environment by installing and configuring all the applications required.

Step 2: Setting up the database

It’s time to create the database from where the data will be fetched to render the chart. In your home.ts file, copy the code below:

Step 3: Preparing the Chart Data Source

It’s time to prepare the data source for the chart to be rendered. Refer to the code given below:

By following the steps mentioned above, you are ready with your home.ts file with all the required code:

Step 4: Creating FusionCharts Directive

Include FusionCharts directive inside home.html file located in home folder under src folder. [Reference path: src → home→ home.html]

Refer to the following code which will already be present in home.html file:

Step 5: Building the application

Now that we are done with the coding, it’s time to build the application. We will be working with android application (you can also build the application for iOS). Run the following command in your CMD shell:
ionic cordova build android

This command builds all the files for your application automatically.

Note: Please make sure you have cordova plugin installed in your system

Step 6: Running the app

All set?
It’s time to render the chart in your application. Just copy the command stated below and run it in your CMD shell:
ionic cordova android run

Running the above command will open your emulator and deploy the application. The output looks like:
charts in ionic 2
Note: Before you run the above command, make sure that you have the android emulator already installed in your system. Please note, the above sample will not get rendered properly in a browser as most of the browsers do not support cordova natively. Thus we recommend to check the application in an emulator, as using Ionic server may not give you the desired output.

If you find any difficulty in rendering the chart or you see any error in your code, click here to download the complete source code of the sample project we have created for this tutorial.

Leave a Comment