”;
In this chapter, we will showcase the configuration required to draw a chart using the Google Chart API in Angular.
Step 1 – Create Angular Application
Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter −
| Step | Description |
|---|---|
| 1 | Create a project with a name googleChartsApp as explained in the Angular 6 – Project Setup chapter. |
| 2 | Modify app.module.ts, app.component.ts and app.component.html as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to verify the result of the implemented logic. |
Following is the content of the modified module descriptor app.module.ts.
import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { AppComponent } from ''./app.component'';
import { GoogleChartsModule } from ''angular-google-charts'';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,GoogleChartsModule
],
providers: [], bootstrap: [AppComponent]
})
export class AppModule { }
Following is the content of the modified HTML host file app.component.html.
<google-chart #chart [title]="title" [type]="type" [data]="data" [columnNames]="columnNames" [options]="options" [width]="width" [height]="height"> </google-chart>
We”ll see the updated app.component.ts in the end after understanding configurations.
Step 2 – Use Configurations
Set Title
title = ''Browser market shares at a specific website, 2014'';
Set Chart Type
type=''PieChart'';
data
Configure the data to be displayed on the chart.
data = [ [''Firefox'', 45.0], [''IE'', 26.8], [''Chrome'', 12.8], [''Safari'', 8.5], [''Opera'', 6.2], [''Others'', 0.7] ];
column names
Configure the column names to be displayed.
columnNames = [''Browser'', ''Percentage''];
options
Configure the other options.
options = {
colors: [''#e0440e'', ''#e6693e'', ''#ec8f6e'', ''#f3b49f'', ''#f6c7b6''], is3D: true
};
Example
Consider the following example to further understand the Configuration Syntax −
app.component.ts
import { Component } from ''@angular/core'';
@Component({
selector: ''app-root'',
templateUrl: ''./app.component.html'',
styleUrls: [''./app.component.css'']
})
export class AppComponent {
title = ''Browser market shares at a specific website, 2014'';
type = ''PieChart'';
data = [
[''Firefox'', 45.0],
[''IE'', 26.8],
[''Chrome'', 12.8],
[''Safari'', 8.5],
[''Opera'', 6.2],
[''Others'', 0.7]
];
columnNames = [''Browser'', ''Percentage''];
options = {
};
width = 550;
height = 400;
}
Result
Verify the result.
Advertisements
”;