How to get started easily with Syncfusion Angular7 SmithChart?
The Essential JS 2 Smith Chart is a graphical tool used to solve transmission line problems. This KB article explains how to easily integrate Syncfusion Angular Smith Chart in an Angular 7 application and how to enable its commonly used features using services.
Prerequisites
Before starting, you need the following items to create Angular Smith Chart in an Angular 7 Application:
- Node.js (latest version)
- Angular
- Angular CLI
- Visual studio code for editor
Installation and application creation
- Install Angular CLI using the following command.
npm install -g @angular/cli@7.0.5
If you would like to follow and run the application in Angular6 or Angular 5 or Angular 4, You need to replace the CLI command version number with corresponding Angular version number
npm install -g @angular/cli@<CLI VERSION>
- Create an Angular 7 application using Angular CLI.
npm new angular7-app
cd angular7-app
- Serve the Angular7 application using the following command.
ng serve
Listen to the application in localhost:4200. Your application will serve in browser. Refer to the following screenshot for Angular 7 version.
Figure: Default Angular App
Integration of Angular Smith Chart
- After running the Angular 7 application successfully, configure the Angular charts in this application. Install Angular charts and EJ2 package using the following command. The –save command instructs the NPM to include the Smith Chart package inside the dependencies section of the package.json.
npm install @syncfusion/ej2-angular-charts –save
npm install @syncfusion/ej2 --save
- Import SmithchartModule from installed package in app/app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {SmithChartModule } from '@syncfusion/ej2-angular-charts;
import { AppComponent } from './app.component';
@NgModule ({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SmithchartModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Refer the CSS file for Angular Smith Chart in style.css.
Import “../node_modules/@syncfusion/ej2/material.css”
- Add the Angular Smith Chart component in app.component.html.
<ejs-smithchart> </ejs-smithchart>
- Now, add the data source for this Smith Chart in app.component.ts.
export class AppComponent {
title = 'angularsmithchart-app';
public data: Object[] = [
{ resistance: 10, reactance: 25 }, { resistance: 8, reactance: 6 },
{ resistance: 6, reactance: 4.5 }, { resistance: 4.5, reactance: 2 },
{ resistance: 3.5, reactance: 1.6 }, { resistance: 2.5, reactance: 1.3 },
{ resistance: 2, reactance: 1.2 }, { resistance: 1.5, reactance: 1 },
{ resistance: 1, reactance: 0.8 }, { resistance: 0.5, reactance: 0.4 },
{ resistance: 0.3, reactance: 0.2 }, { resistance: 0, reactance: 0.15 }
];
public data1: Object[] = [
{ resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 },
{ resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 },
{ resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 },
{ resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 },
{ resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 },
{ resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 },
{ resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 },
{ resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 }
];
}
- After adding the datasource, define the Smith Chart in app.component.html.
<ejs-smithchart id='smithchartcontainer' > <e-seriesCollection> <e-series [points]='data' name='Transmission1' [enableAnimation] = true > </e-series> <e-series [points]='data1' name='Transmission2'[enableAnimation] =true> </e-series> </e-seriesCollection> </ejs-smithchart>
- Now, serve the application using the following command.
ng serve –open
- After all the files have been compiled successfully, it will serve the site at localhost:4200.
The following screenshot illustrates Smith Chart.
Figure: Default Sample of Smith chart
Summary
To know more about the Smith Chart, check our Angular Smith Chart features from this page. If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
