How To Create Charts In Your Mobile Application Using Ionic 2

create charts with ionic 2

With the number of smartphone users globally pegged at 2.3 billion, there is a distinctive shift in the consumption of digital media. While users have been consuming online content from desktops, of late trends show a rise in consumption through smartphones. This has resulted in a massive number of apps. However, the hurdle with this is that we need to develop apps for individual platforms. To overcome this, hybrid apps are gaining popularity.

Today we shall create a chart in a mobile app using a hybrid framework—Ionic 2. We will use the FusionCharts JavaScript charting library to create charts in the apps. The reason for preferring Ionic 2 is that it is based on Angular. Interestingly, the FusionCharts library has an Angular extension, which will make the process of creating the charts quick and simple.

Requirements

To create a chart in a mobile app developed using Ionic 2, you will need the following components downloaded and installed:

Creating charts in Ionic 2

Step 1: Creating an app in Ionic 2

To get started, we need to create an app in the Ionic 2 framework.

  1. Run the following command from the shell interface.
    ionic start myapp
    This will automatically create all the dependencies required to create the app.

Step 2: Installing Dependencies

Next, we need to integrate the FusionCharts library in the Ionic 2 framework.

  1. Install the FusionCharts-Angular extension in the project node_modules using the following command.
    npm install angular2 -fusioncharts --save
  2. Import the files into the app.module.ts file. [Path: src → app → app.module.ts]

Step 3: Configuring the chart

Now we need to provide the data that would be used to render the chart. The data source has to be updated in the home.ts file located in [Path: src → home → home.ts]

  1. Update the data source for rendering the chart in the home.ts file.

Step 4: Creating the FusionCharts directive

Now that the data is added, we need to create the FusionCharts directive that will create the chart element.

  1. Add the following code to the home.html file. [Path: src → home → home.html]

Step 5: Rendering the chart

Now that we have our code in place, let us run the code to see the output.

  1. Run the following command from the shell interface.
    ionic serve

If you’ve followed the steps closely, your output should like the chart shown in the image below:

If you see any errors in your code, you can download the complete source code of the sample project we have created for this tutorial.

Leave a Comment