- Angular Google Charts Tutorial
- Home
- Overview
- Environment Setup
- Configuration Syntax
- Area Charts
- Bar Charts
- Bubble Charts
- Candlestick
- Column Charts
- Combination
- Histogram
- Line Charts
- Maps
- Organization
- Pie Charts
- Sankey Charts
- Scatter Chart
- Stepped Area
- Table Chart
- TreeMap Chart
- Angular Google Charts Resources
- Quick Guide
- Resources
- Discussion
Histogram Chart with multiple series
Following is an example of a Histogram Chart with multiple series.
We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a histogram chart with multiple series.
Example
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Students height, in cm'; type = 'Histogram'; data = [ ["1", 80, 40],["2", 55, 30],["3", 68, 34],["4", 80, 40],["5", 54, 27], ["6", 70, 35],["7", 85, 42],["8", 78, 40],["9", 70, 35],["10", 58, 28], ["11", 90, 45],["12", 65, 33],["13", 88, 50],["14", 82, 41],["15", 65, 30], ["16", 86, 43],["17", 45, 30],["18", 62, 30],["19", 84, 42],["20", 75, 40], ["21", 82, 41],["22", 75, 40],["23", 58, 30],["24", 70, 35],["25", 85, 40] ]; columnNames = ["Student Roll No", "height", "weight"]; options = { legend:'none' }; width = 550; height = 400; }
Result
Verify the result.
angular_googlecharts_histogram_charts.htm
Advertisements
To Continue Learning Please Login
Login with Google