Hello All, This is the Scatter Area Chart Example In Ionic 5. In the last Ionic 5 tutorial, We had discussed How to check device is rooted or not in Ionic?
In this Ionic 5 example, We will try to show students marks in the form of a Scatter area chart. So, you will get an idea of How to implement a Scatter area chart in the Ionic 5 application.
Table of Contents
Steps for Scatter Area Chart Example In Ionic 5
- Step1: Create Ionic Project
- Step2: Import Ng2GoogleChartsModule
- Step3: Update Template
- Step4: Update TS Code
- Step5: Run Ionic Project
Step1: Create Ionic project
Create a new Ionic project in the windows machine using the below command.
ionic start myApp blank
Now, move to our root project directory using the following command
cd <APPNAME>
Open the newly created Ionic project in Visual Studio Code. Use the following command to open the project.
code .
Step2: Import Ng2GoogleChartsModule
Now, We need to install the required module dependency using the following command
npm i --save ng2-google-charts
Import the Ng2GoogleChartsModule in home.module.ts as shown below
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HomePageRoutingModule,
Ng2GoogleChartsModule
],
declarations: [HomePage],
providers: []
})
export class HomePageModule { }
Step3: Update Template
Now, We have to update home.page.html as shown below
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Scatter Area Chart Example in Ionic
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<google-chart [data]="scatterChart">
</google-chart>
</ion-content>
Step4: Update TS Code
We will write the code in our TypeScript file. Update the home.page.ts file as shown below.
import { Component } from '@angular/core';
import { GoogleChartInterface, GoogleChartType } from 'ng2-google-charts';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {
}
scatterChart: GoogleChartInterface = {
chartType: GoogleChartType.ScatterChart,
dataTable: [
['Student', 'Marks'],
['A', 80],
['B', 90],
['C', 88]
],
options: { 'title': 'Student Marks' },
};
}
In the above example, We are trying to show the Scatter Area chart of student marks.
Step5: Run Ionic Project
To run the Ionic project using the below command.
ng serve
or use the below command
npm run start
See the output in http://localhost:4200/
