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!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
