Category: angular Googlecharts

Angular Google Charts – Configuration Syntax ”; Previous Next 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. Print Page Previous Next Advertisements ”;

Angular Google Charts – Histogram Charts ”; Previous Next A histogram is a chart that groups numeric data into buckets, displaying the buckets as segmented columns. They”re used to depict the distribution of a dataset as how often values fall into ranges. Google Charts automatically chooses the number of buckets for you. All buckets are equal width and have a height proportional to the number of data points in the bucket. Histograms are similar to column charts in other aspects. In this section we”re going to discuss following types of histogram based charts. Sr.No Chart Type / Description 1 Basic Histogram Basic Histogram chart. 2 Controlling Color Customized Color of Histrogram Chart. 3 Controlling Buckets Customized Buckets of Histrogram Chart. 4 Multiple Series Histrogram Chart having multiple series. Print Page Previous Next Advertisements ”;