Hey guys, in this post we are going to see how to show or generate a different type of charts like a pie chart, donut chart, bar chart, line chart, column chart, gauge… etc by using Google library in angular. Let’s do it step by step.
For this demo, we are going to refer to our same previous example.
At very first, download this file angular2-google-chart.directive.ts, and put/paste it in your project somewhere. (you can find angular2-google-chart.directive.ts in our project, which you can download below).
After that, add following code in the index.html file of your project
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
// !important: You want to give this variable(var googleLoaded = false;). This is used to run multiple chart in your jade.
var googleLoaded = false;
// !important: Define which chart packages to preload.Because this package uses ChartWrappers you can use any chart type that Google supports, but if it // isn't loaded it will load it on demand.
var googleChartsPackagesToLoad = ['geochart'];
</script>
With the help of this, we get loader js and get chart package loaded.
Now declare the downloaded file angular2-google-chart.directive.ts into app.module.ts or if you have multiple modules in your application then add it to your particular module So you can access it.
In the following code, we have imported angular2-google-chart.directive.ts and declared it in a declaration.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FirstPageComponent } from './first-page/first-page.component';
import { SecondPageComponent } from './second-page/second-page.component';
import { FormsModule } from '@angular/forms';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';
import { GoogleChart } from '../app/angular2-google-chart.directive';
@NgModule({
declarations: [
AppComponent,
FirstPageComponent,
SecondPageComponent,
HomeComponent,
GoogleChart
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Now add HTML element to display our graph
Here we have added five div element into HTML file to display the different type of charts.
Google chart already provided us a few parameters like chartData, chartOption, and chartType… etc.
By using chartData parameter we can pass our data to chart and also can customize few options like height, width, a title with help of chartOption and most important to specify what type of chart we want to show, by using chartType.
Home-page.component.html
<div class="container card">
<div class="row">
<!-- <div class="col-lg-12"> -->
<div class="col-lg-6">
<h2> Pie Chart</h2>
<div id="pie_chart" [chartData]="pie_ChartData" [chartOptions]="pie_ChartOptions" chartType="PieChart"
GoogleChart></div>
</div>
<div class="col-lg-6">
<h2> Donut Chart</h2>
<div id="pie_chart" [chartData]="donut_ChartData" [chartOptions]="donut_ChartOptions" chartType="PieChart"
GoogleChart></div>
</div>
<div class="col-lg-6">
<h2> Column Chart</h2>
<div id="pie_chart" [chartData]="column_ChartData" [chartOptions]="column_ChartOptions" chartType="ColumnChart"
GoogleChart></div>
</div>
<div class="col-lg-6">
<h2> Gauge </h2>
<div id="pie_chart" [chartData]="gauge_Data" [chartOptions]="gauge_Options" chartType="Gauge" GoogleChart></div>
</div>
<div class="col-lg-6">
<h2> Line Chart </h2>
<div id="pie_chart" [chartData]="line_ChartData" [chartOptions]="line_ChartOptions" chartType="LineChart"
GoogleChart></div>
</div>
<!-- </div> -->
</div>
</div>
In the above HTML file, we have specified parameter to HTML elements that we have to provide from ts file.
Here in the controller, we have configured different data sources and options for a different type of charts, which you can understand very easily by looking in code.
home.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
public pie_ChartData = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]];
public pie_ChartOptions = {
'legend': 'bottom',
'is3D': true,
'width': 400,
'height': 400,
};
public donut_ChartData = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]];
public donut_ChartOptions = {
'legend': 'bottom',
'width': 400,
'height': 400,
'pieHole': 0.5,
};
public column_ChartData = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]];
public column_ChartOptions = {
'legend': 'bottom',
'width': 400,
'height': 400
};
public gauge_Data = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]];
public gauge_Options = {
'legend': 'bottom',
'width': 400,
'height': 400,
'redFrom': 90, redTo: 100,
'yellowFrom': 75, yellowTo: 90,
'minorTicks': 5
};
public line_ChartData = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]];
public line_ChartOptions = {
'legend': 'bottom',
'width': 400,
'height': 400,
'curveType': 'function',
};
constructor() { }
ngOnInit() { }
}
OutPut:
And that’s it,
we have successfully integrated google chart into our angular project.
Hope you like it.
[Here is the link to download the project: get me the project]
[ If you are preparing for an interview please click here - angular interview questions and answers ]
Comments
Post a Comment