Ionic 2

Ionic 2 charts

Chart is an interactive way to show data. I will show you simple line chart in this example to start with charts. I will use Angular Chart which is Angular 2 directives for Chart.js library. You will find the repository here.

 

Setting up the project

At first create a new project with side menu template. It will create a new project directory name ‘ionic2-charts’ with additional files in it. You can download end result from github.

ionic start --v2 ionic2-charts sidemenu

Now we will install ng2-charts using npm inside the project directory.

cd ionic2-charts
npm install ng2-charts --save

We have to add this installed module in out app. To do that open up src/app/app.module.ts file and add the following import statements.

import { ChartsModule } from 'ng2-charts';

import 'chart.js';

Then add the ChartsModule class in imports array. The whole file will look like this.

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { ChartsModule } from 'ng2-charts';
import 'chart.js';
import { MyApp } from './app.component';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';

@NgModule({
 declarations: [
  MyApp,
  Page1,
  Page2
],
 imports: [
  IonicModule.forRoot(MyApp), ChartsModule
 ],
 bootstrap: [IonicApp],
  entryComponents: [
   MyApp,
   Page1,
   Page2
  ],
 providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

The project setup process is done. Next thing is easy, adding charts.

 

Create new page

At first we will create a new page.

ionic generate page line_chart

 

Add this page in src/app/app.module.ts file. Import the page first

import { LineChartPage } from '../pages/line-chart/line-chart';

then add LineChartPage class in declarations and entryComponents arrays.

 

Open src/app/app.component.ts file and import LineChartPage same as above. Add following JSON object with pages array in line 23

{ title: 'Line Chart', component: LineChartPage },

Our new page now added with side menu. To show this new LineChartPage at first we have to set as root page. To do that replace the line 15 of src/app/app.component.ts with the following line.

rootPage: any = LineChartPage;
ionic serve --lab

If you run above command in your terminal right now you’ll see this.

 

Adding line chart

You see it right. there is no side menu toggle button and title is line_chart. Let’s fix these and add a simple line chart.

<button ion-button menuToggle>
 <ion-icon name="menu"></ion-icon>
</button>

Add this above code in src/pages/line-chart.html at line 10. Inside ion-navbar tag, above ion-title tag. Then change ion-title tag inside with Line Chart and put the html code below inside ion-content tag.

 <canvas baseChart width="100%" height="100%"
 [datasets]="lineChartData"
 [labels]="lineChartLabels"
 [legend]="lineChartLegend"
 [chartType]="lineChartType"
 (chartHover)="chartHovered($event)"
 (chartClick)="chartClicked($event)"></canvas> 

 <h3>Chart data</h3>
 <ion-row>
 <ion-col *ngFor="let label of lineChartLabels">{{label}}</ion-col>
 </ion-row>
 <ion-row *ngFor="let d of lineChartData">
 <ion-col *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</ion-col>
 </ion-row> 

Line chart template is done. Now open up src/pages/line-chart.ts file add the following code at line 15 inside LineChartPage class.

public lineChartType:string = 'line';
public lineChartData:Array<any> = [{data: [18, 48, 27, 39, 10, 27, 40], label: 'Series'}];
public lineChartLabels:Array<any> = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun']; 

You can run the application any platform and it will look like the following screenshot.

 

Now you can explore more adding more pages with different kinds of charts.

Thank you for reading. If you have any question, feel free to ask in comment.