Post
Ask Question

Integrating Charts With Angular 5 - Part One

Introduction

This article is about integrating or using Charts in Angular 5 with many options such as Column Chart, Pie Chart, Line Chart, Bar Chart, Area Chart, and Combined Charts. We are going to see how to integrate charts with Angular 5 App within a few steps.

As we know, visual representation of any data is worth thousands of lines written as a text, and also it will be time-consuming to make judgments after reading sophisticated data. Charts are Visual Representation Tools that make things easy to understand in an easy manner. 
 
Let's start with the implementation of different charts with Angular.
 
In this series, I am going to cover 7 types of different charts used with dummy data.
  1. Column Chart
  2. Bar Chart
  3. Pie Chart
  4. Line Chart
  5. Bubble Chart
  6. Doughnut Chart 
  7. Combined Chart  
For that, I am using a very lightweight extension, FusionCharts which are easy to implement and effective for the Angular environment.
 
Let's implement all charts one by one. 
 
Step 1  Installation
 
To use FusionChart, we should include it via the following command using Angular CLI.
  1. npm install angular4-fusioncharts --save  
After completion of the installation, you should import it in the module.ts file as below.
 
 
 
Also, in this app, I'm using some of the Angular Material Components like,
  • MatToolbar
  • MatButton
  • MatMenu 
  • MatCard 
To install Angular Material Components, refer to the following command,
  1. npm install --save @angular/material @angular/cdk @angular/animations  
To use material components, it is required to use and import it into the module.ts file.
 
I have pasted the complete module.ts file code below.
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3.   
  4. // To use Material Component  
  5. import { MatCardModule, MatToolbarModule, MatToolbar, MatButtonModule, MatButton, MatMenuModule } from '@angular/material';  
  6. import { AppComponent } from './app.component';  
  7.   
  8. // To use Animations  
  9. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  
  10.   
  11. // For Routing Purpose  
  12. import { routing } from './routes';  
  13.   
  14. // For FusionChart   
  15. import * as FusionCharts from 'fusioncharts';  
  16. import * as Charts from 'fusioncharts/fusioncharts.charts';  
  17. import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';  
  18. import { FusionChartsModule } from 'angular4-fusioncharts';  
  19. FusionChartsModule.fcRoot(FusionCharts, Charts, FintTheme);  
  20.   
  21.   
  22. @NgModule({  
  23.   declarations: [  
  24.     AppComponent,  
  25.    ],  
  26.   imports: [  
  27.     routing,  
  28.     BrowserModule,  
  29.     MatCardModule,  
  30.     MatToolbarModule,  
  31.     MatButtonModule,  
  32.     MatMenuModule,  
  33.     FusionChartsModule,  
  34.     BrowserAnimationsModule  
  35.   ],  
  36.   exports: [  
  37.     BrowserModule,  
  38.     MatCardModule,  
  39.     MatToolbarModule,  
  40.     MatButtonModule,  
  41.     MatMenuModule  
  42.   ],  
  43.   providers: [  
  44.   ],  
  45.   bootstrap: [AppComponent]  
  46. })  
  47. export class AppModule { }  
Step 2  [ Routing ]
 
As of now,  I am also implementing Routing in my app.
 
For that, you should create a separate file named routes.ts [For batter practice, I would suggest this way]
 
routes.ts 
  1. import { ModuleWithProviders } from '@angular/core';  
  2. import { Routes, RouterModule } from '@angular/router';  
  3. import { BarChartComponent } from './bar-chart/bar-chart.component';  
  4. import { BubbleChartComponent } from './bubble-chart/bubble-chart.component';  
  5. import { ColumnChartComponent } from './column-chart/column-chart.component';  
  6. import { DoughuntChartComponent } from './doughunt-chart/doughunt-chart.component';  
  7. import { LineChartComponent } from './line-chart/line-chart.component';  
  8. import { PieChartComponent } from './pie-chart/pie-chart.component';  
  9. import { SplineChartComponent } from './spline-chart/spline-chart.component';  
  10.   
  11. const appRoutes: Routes = [  
  12.   
  13.     // Default Page   
  14.     { path: '', redirectTo:'Bar',pathMatch:'full' },  
  15.     { path: 'Bar', component: BarChartComponent },  
  16.     { path: 'Pie', component: PieChartComponent },  
  17.     { path: 'Column', component: ColumnChartComponent },  
  18.     { path: 'Line', component: LineChartComponent },  
  19.     { path: 'Doughunt', component: DoughuntChartComponent },  
  20.     { path: 'Bubble', component: BubbleChartComponent },  
  21.     { path: 'Mixed', component: SplineChartComponent }      
  22. ];  
  23.   
  24. export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);  
So, we are done with basic configuration for FusionChart, Material Component, and Routing.
 
Step 3 
 
Now, we are going to configure our routing and the main page of our app.
 
app.component.html 
  1. <mat-toolbar color="accent">  
  2.     <span>Manav Pandya - C#Corner</span>  
  3.     <span class="demo-toolbar"></span>  
  4.     <button mat-button href="www.asp-dotnet-mvc-tutorials.blogspot.in">Go To My Blog</button>  
  5.     <button mat-button [matMenuTriggerFor]="menu">Select Charts From Below Menu</button>  
  6.     <mat-menu #menu="matMenu">  
  7.         <button [routerLink]="['/Bar']" mat-menu-item>Bar Chart</button>  
  8.         <button [routerLink]="['/Pie']" mat-menu-item>Pie Chart</button>  
  9.         <button [routerLink]="['/Column']" mat-menu-item>Column Chart</button>  
  10.         <button [routerLink]="['/Line']" mat-menu-item>Line Chart</button>  
  11.         <button [routerLink]="['/Doughunt']" mat-menu-item>DougHunt Chart</button>  
  12.         <button [routerLink]="['/Bubble']" mat-menu-item>Bubble Chart</button>  
  13.         <button [routerLink]="['/Mixed']" mat-menu-item>Mixed Chart</button>  
  14.     </mat-menu>  
  15. </mat-toolbar>  
  16. <div>  
  17.     <router-outlet></router-outlet>  
  18. </div>  
Code explanation
  • <mat-toolbar> : contains toolbar of material component
  • <mat-menu> : side menu with many options given to them 
  • [routerLink] : routerLink meant to  be link with their defined routes
  • <router-outlet> : It is placeholder by which routes load their content  
Step 4 
 
Now, we are going to start our FusionChart implementation. 
 
Bar Chart
 
I have created separate components for bar chart implementation, do as follows.
  1. ng g c bar-chart  
Open bar-chart.component.html file and paste,
  1. // Hold Content of an chart  
  2. <mat-card>  
  3.     <div class="alert alert-info">  
  4.         <strong>Bar Chart</strong>  
  5.     </div>  
  6.     <fusioncharts [id]="id" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>  
  7. </mat-card>  
And in bar-chart.component.ts file, paste the below code inside component method.
  1.   id = 'AngularChart1';  
  2.   width = 600;  
  3.   height = 400;  
  4.   type = 'bar2d';  
  5.   dataFormat = 'json';  
  6.   dataSource;  
  7.   
  8.   constructor()  
  9.   {  
  10.   
  11.   this.dataSource = {  
  12.     "chart": {  
  13.       "caption": "Unemployment Rate in a Country",  
  14.       "subcaption": "(Survey of 2015)",  
  15.       "yaxisname": "Unemployment Rate",  
  16.       "numbersuffix": "%",  
  17.       "basefontsize": "12",  
  18.       "basefontcolor": "#194920",  
  19.       "valuefontcolor": "#194920",  
  20.       "canvasBgColor": "#f3f5f6",  
  21.       "canvasBgAlpha": "100",  
  22.       "bgColor": "#f3f5f6",  
  23.       "BgAlpha": "100",  
  24.       "palettecolors": "#3A803D",  
  25.       "plottooltext": "$label Rate of Unemployment : $datavalue",  
  26.       "theme": "zune"  
  27.   },  
  28.   "data": [  
  29.       {  
  30.           "label": "Country A",  
  31.           "value": "5.4"  
  32.       },  
  33.       {  
  34.           "label": "Country B",  
  35.           "value": "1.7"  
  36.       },  
  37.       {  
  38.           "label": "Country C",  
  39.           "value": "3.8"  
  40.       },  
  41.       {  
  42.           "label": "Country D",  
  43.           "value": "2.8"  
  44.       },  
  45.       {  
  46.           "label": "Country E",  
  47.           "value": "5.0"  
  48.       },  
  49.       {  
  50.           "label": "Country F",  
  51.           "value": "2.4"  
  52.       },  
  53.       {  
  54.           "label": "Country G",  
  55.           "value": "8.0"  
  56.       },  
  57.       {  
  58.           "label": "Country H",  
  59.           "value": "1.5"  
  60.       }  
  61.   ]  
  62.   }  
  63. }  
As you can see, there are some setting properties that we should consider while using Chart implementation.
 
Some of the important options are like,
 
- Height , Width , Type = bar2d // Defines that it is bar chart
 
And, this.dataSource is used to render the dummy data for Bar Chart that you can find in the HTML portion of that.
 
 
 
That's it. We have created all necessary files; now, it's time to run our app by using ng serve.
 
 
 
Pie Chart 
 
To implement a Pie Chart, create a new component.
  1. ng g c pie-chart  
Now, open the pie-chart.component.html file and paste the following code.
  1. <mat-card>  
  2.     <div class="alert alert-info">  
  3.         <strong>Pie Chart</strong>  
  4.     </div>  
  5.     <fusioncharts [id]="id" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>  
  6. </mat-card>  
Same as Bar chart, we are going to use dummy data in pie-chart.component.ts to populate the Pie Chart.
  1. id = 'AngularChart2';  
  2.   width = 600;  
  3.   height = 400;  
  4.   type = 'pie3d';  
  5.   dataFormat = 'json';  
  6.   dataSource;  
  7.   
  8.   constructor() {   
  9.     this.dataSource = {  
  10.       "chart": {  
  11.         "caption": "Electronics Selling",  
  12.         "subCaption": "Top 5 stores in last month by revenue",  
  13.         "numberprefix": "Rs.(Crore) ",  
  14.         "theme": "fint"  
  15.       },  
  16.       "data": [{  
  17.         "label": "Redmi",  
  18.         "value": "95"  
  19.       },  
  20.       {  
  21.         "label": "IPhone",  
  22.         "value": "90"  
  23.       },  
  24.       {  
  25.         "label": "Motorola",  
  26.         "value": "76"  
  27.       },  
  28.       {  
  29.         "label": "Samsung",  
  30.         "value": "67"  
  31.       },  
  32.       {  
  33.         "label": "vivo",  
  34.         "value": "55"  
  35.       }  
  36.       ]  
  37.     }  
  38.   }  
Notice that here, we have used type = 'pie3d' and dataformat = 'json' , you can see the output below.
 
 
Column Chart
 
Column chart is the most commonly used type of charts that shows bars with appropriate data. Just create a new component.
  1. ng g c column-chart  
column-chart.component.html
  1. <mat-card>  
  2.     <div class="alert alert-info">  
  3.         <strong>Column Chart</strong>  
  4.     </div>  
  5.     <fusioncharts [id]="id" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>  
  6. </mat-card>  
column-chart.component.ts
  1. id = 'AngularChart3';  
  2.  width = 600;  
  3.  height = 400;  
  4.  type = 'column2d';  
  5.  dataFormat = 'json';  
  6.  dataSource;  
  7.   
  8.  constructor() {  
  9.    this.dataSource = {  
  10.      "chart": {  
  11.        "caption": "Electronics Selling",  
  12.        "subCaption": "Top 5 stores in last month by revenue",  
  13.        "numberprefix": "Rs.(Crore) ",  
  14.        "theme": "fint"  
  15.      },  
  16.      "data": [{  
  17.        "label": "Redmi",  
  18.        "value": "95"  
  19.      },  
  20.      {  
  21.        "label": "IPhone",  
  22.        "value": "90"  
  23.      },  
  24.      {  
  25.        "label": "Motorola",  
  26.        "value": "76"  
  27.      },  
  28.      {  
  29.        "label": "Samsung",  
  30.        "value": "67"  
  31.      },  
  32.      {  
  33.        "label": "vivo",  
  34.        "value": "55"  
  35.      }  
  36.      ]  
  37.    }  
  38.   }  
- Here, in column chart, I have used options like,
  • type = 'column2d' // For 2 Dimentional presentation
  • dataformat = 'json' 

Line Chart
 
Line chart represents the growth of data through a line with its label values. Again, create a new component.
  1. ng g c line-chart  
line-chart.component.html
  1. <mat-card>  
  2.     <div class="alert alert-info">  
  3.         <strong>Line Chart</strong>  
  4.     </div>  
  5.     <fusioncharts [id]="id" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>  
  6. </mat-card>  
line-chart.component.ts
  1. id = 'AngularChart4';  
  2.   width = 600;  
  3.   height = 400;  
  4.   type = 'line';  
  5.   dataFormat = 'json';  
  6.   dataSource;  
  7.   
  8.   constructor() {   
  9.     this.dataSource = {  
  10.       "chart": {  
  11.         "caption": "Electronics Selling",  
  12.         "subCaption": "Top 5 stores in last month by revenue",  
  13.         "numberprefix": "Rs.(Crore) ",  
  14.         "theme": "fint"  
  15.       },  
  16.       "data": [{  
  17.         "label": "Redmi",  
  18.         "value": "95"  
  19.       },  
  20.       {  
  21.         "label": "IPhone",  
  22.         "value": "90"  
  23.       },  
  24.       {  
  25.         "label": "Motorola",  
  26.         "value": "76"  
  27.       },  
  28.       {  
  29.         "label": "Samsung",  
  30.         "value": "67"  
  31.       },  
  32.       {  
  33.         "label": "vivo",  
  34.         "value": "55"  
  35.       }  
  36.       ]  
  37.     }  
  38.   }  
In Line Chart, I have used type = 'line' , to specify that this is line chart and it will adjust the data as per the populated data .
 
 
Conclusion 
 
In this post, we have seen 4 types of Fusion Charts with their different options -
  • Bar Chart
  • Pie Chart
  • Column Chart
  • Line Chart  
I have tried everything possible. If I missed anything, please let me know via comments or message.
 
Hope you have learned something. Stay tuned for Part 2!


Similar Articles