If you are not already Setup and Install Ionic
Framework with Angular 4 – Setup
and Install Ionic 3 and Angular 4
If you are not already created your apps using
Ionic 3 and Angular 4, Please follow below Ionic 3 CLI Commands steps.
Step
1 – Once
installed the globally utilities, create your first Ionic app using the
commands.
ionic
start myApp
sidemenu
That is the syntax for a new project in
Ionic.
1. myApp - will be the
directory name and the app name from your project.
2. sidemenu - ionic start myApp
sidemenu. This is starter template for your project.
The myApp is any name of your choice and sidemenu is one of the Ionic supported template. The app-name and template name is decided by you as per your requirements.
Step 2 -Run your App
For viewing the app in a browser, we
need to run below command
o cd myApp
o ionic serve
Step
3 – Install Angular 2 Charts and Charts.js
npm
install ng2-charts
--save
npm
install chart.js
--save
Once installation is completed, import chartsModule
import
{ ChartsModule } from
'ng2-charts';
After Import chartsModule, declare the charts
module in imports array.
import
{ BrowserModule } from
'@angular/platform-browser';
import
{ ErrorHandler, NgModule
} from '@angular/core';
import
{ IonicApp, IonicErrorHandler,
IonicModule } from
'ionic-angular';
import
{ ChartsModule } from
'ng2-charts';
import
{ MyApp } from
'./app.component';
import
{ HomePage } from
'../pages/home/home';
import
{ ListPage } from
'../pages/list/list';
import
{ LoginPage } from
'../pages/login/login';
import{
RegisterPage } from
'../pages/register/register';
import{
UsersPage } from
'../pages/users/users';
import
{ StatusBar } from
'@ionic-native/status-bar';
import
{ SplashScreen } from
'@ionic-native/splash-screen';
@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
LoginPage,
RegisterPage,
UsersPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
ChartsModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
LoginPage,
RegisterPage,
UsersPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler,
useClass: IonicErrorHandler}
]
})
export
class AppModule
{}
After declare the charts module in imports array,
add the charts HTML code in your Apps,
Home.html
–
<h2>Business
Charts</h2>
<div>
<div
style="display:
block">
<canvas
baseChart height="350"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
Home.ts -
import
{ Component } from
'@angular/core';
import
{ NavController } from
'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export
class HomePage
{
constructor(public
navCtrl: NavController)
{ }
public barChartOptions:any
= {
scaleShowVerticalLines:
false,
responsive: true
};
//Chart Labels
public barChartLabels:string[]
= ['2011', '2012',
'2013', '2014',
'2015', '2016',
'2017'];
public barChartType:string
= 'bar';
public barChartLegend:boolean
= true;
//Chart data
public barChartData:any[]
= [
{data: [66,
55, 83,
82, 56,
51, 43],
label: 'Loss'},
{data: [29,
38, 40,
21, 82,
30, 89],
label: 'Profit'}
];
// Chart events
public chartClicked(e:any):void
{
console.log(e);
}
// Chart events
public chartHovered(e:any):void
{
console.log(e);
}
}
Result looks like –
I hope you are enjoying with this post! Please share with you friends. Thank you so much!