Angular Grid with charts

Platform:Angular

In this section you can find out how Generic UI grid work with charts. The grid used in this example portraits couple of the popular stocks and their fictional quarterly earnings. The source data from the grid is easily exported to the Chart.js, which then constructs stocks chart.

You can use 'Chart type' select, to switch chart type between bar or line. To display only one stock just select it in the grid.

Check the source code section, to see how was it done.

Chart type:
bar
bar
line

Angular Source Code

Platform:Angular

In this source code you can see how Generic UI grid works with Chart.js. Our grid is extremely versatile and can easily be used with any external library. The grid source is exported to chart using this function stockQuarterlyEarnings(). To get the data from the selected grid item, we used itemsSelected output. This output checks if any of the grid entries is selected. The stockSelected() function sends selected item value to the chart and renders it in the chart area.

app.component.html
app.component.ts
stock.ts
stocks.ts
<gui-grid [columns]="columns"
		  [source]="source"
		  [summaries]="summaries"
		  [rowColoring]="rowColoring"
		  (itemsSelected)="stockSelected($event)">
</gui-grid>

<div class="chart-type">
	<b>Chart type: </b>
	<gui-select [options]="['bar','line']"
				[selected]="'bar'"
				(optionChanged)="changeType($event)">
	</gui-select>
</div>

<div>
	<canvas id="stocks-chart">{{ chart }}</canvas>
</div>
import { Component, OnInit } from '@angular/core';

import { GuiColumn, GuiRowColoring } from '@generic-ui/ngx-grid';

import { Chart } from 'chart.js';

import { stocks } from './charts.source';
import { Stock } from './stock';


@Component({
	selector: 'gweb-example-charts-grid',
	templateUrl: `./example-charts-grid.component.html`,
	styleUrls: ['./example-charts-grid.component.scss']
})
export class ExampleChartsGridComponent implements OnInit {

	chart: Chart;

	columns: Array<GuiColumn> = [{
		header: 'Stock',
		field: 'id'
	}, {
		header: 'Q1',
		field: (stocks) => stocks.earnings.q1,
		type: GuiDataType.NUMBER,
		summaries: {
			enabled: true,
			summariesTypes: [
				'average',
				'min',
				'max',
				'median'
			]
		}
	}, {
		header: 'Q2',
		field: (stocks) => stocks.earnings.q2,
		type: GuiDataType.NUMBER,
		summaries: {
			enabled: true,
			summariesTypes: [
				'average',
				'min',
				'max',
				'median'
			]
		}
	}, {
		header: 'Q3',
		field: (stocks) => stocks.earnings.q3,
		type: GuiDataType.NUMBER,
		summaries: {
			enabled: true,
			summariesTypes: [
				'average',
				'min',
				'max',
				'median'
			]
		}
	}, {
		header: 'Q4',
		field: (stocks) => stocks.earnings.q4,
		type: GuiDataType.NUMBER,
		summaries: {
			enabled: true,
			summariesTypes: [
				'average',
				'min',
				'max',
				'median'
			]
		}
	}];

	source = stocks;

	rowColoring: GuiRowColoring = GuiRowColoring.NONE;

	summaries: GuiSummaries = {
		enabled: true
	};

	ngOnInit() {
		this.chart = this.createChart();
	}

	createChart(): Chart {

		return new Chart('stocks-chart', {
			type: 'bar',
			data: {
				labels: ['Q1', 'Q2', 'Q3', 'Q4'],
				datasets: this.getData()
			},
			options: {
				title: {
					display: true,
					text: 'Companies quarterly earnings (fictional)'
				},
				layout: {
					padding: {
						top: 50
					}
				},
				responsive: true
			}
		});

	}

	getData(): Array<any> {
		return [{
			label: 'Apple',
			data: this.stockQuarterlyEarnings('Apple'),
			fill: false,
			borderColor: '#3e95cd',
			backgroundColor: '#3e95cd',
			borderWidth: 1
		}, {
			label: 'Amazon',
			data: this.stockQuarterlyEarnings('Amazon'),
			fill: false,
			borderColor: '#8e5ea2',
			backgroundColor: '#8e5ea2',
			borderWidth: 1
		}, {
			label: 'CD Projekt Red',
			data: this.stockQuarterlyEarnings('CD Projekt Red'),
			fill: false,
			borderColor: '#3cba9f',
			backgroundColor: '#3cba9f',
			borderWidth: 1
		}, {
			label: 'Microsoft',
			data: this.stockQuarterlyEarnings('Microsoft'),
			fill: false,
			borderColor: '#e8c3b9',
			backgroundColor: '#e8c3b9',
			borderWidth: 1
		}, {
			label: 'GoPro',
			data: this.stockQuarterlyEarnings('GoPro'),
			fill: false,
			borderColor: '#c45850',
			backgroundColor: '#c45850',
			borderWidth: 1
		}, {
			label: 'Tesla',
			data: this.stockQuarterlyEarnings('Tesla'),
			fill: false,
			borderColor: '#7d31e0',
			backgroundColor: '#7d31e0',
			borderWidth: 1
		}, {
			label: 'AMD',
			data: this.stockQuarterlyEarnings('AMD'),
			fill: false,
			borderColor: '#e03131',
			backgroundColor: '#e03131',
			borderWidth: 1
		}];
	}

	stockQuarterlyEarnings(stockId: string): Array<number> {
		let earnings = [];

		this.source.forEach((stock) => {
			if (stock.id === stockId) {
				earnings = stock.getEarnings();
			}
		});

		return earnings;
	}

	getInitialData(): void {
		this.chart.data.datasets = this.getData();
		this.chart.update();
	}

	stockSelected(stock: Stock): void {
		let selectedStock = stock[0];

		this.getInitialData();

		if (selectedStock === undefined) {
			return;
		} else {
			this.chart.data.datasets = this.chart.data.datasets.filter(dataset => dataset.label === selectedStock.id);
			this.chart.update();
		}
	};

	changeType(type: string): void {
		this.chart.config.type = type;
		this.chart.update();
	}
}
export const stocks: Array<Stock> = [
	new Stock('Apple', { q1: 1231, q2: -1541, q3: 1512, q4: 1275 }),
	new Stock('Amazon', { q1: 3905, q2: 4423, q3: 4109, q4: 2341 }),
	new Stock('CD Projekt Red', { q1: 1175, q2: -1125, q3: 2432, q4: 3113 }),
	new Stock('Microsoft', { q1: 2000, q2: 2752, q3: 3213, q4: 4231 }),
	new Stock('GoPro', { q1: 1402, q2: 513, q3: -2301, q4: 2412 }),
	new Stock('Tesla', { q1: 4321, q2: 3214, q3: 2901, q4: -2183 }),
	new Stock('AMD', { q1: 2551, q2: 2371, q3: 3567, q4: 1726 })
];
export class Stock {

	constructor(readonly id: string,
				readonly earnings: {
					readonly q1: number;
					readonly q2: number;
					readonly q3: number;
					readonly q4: number;
				}) {
	}

	getEarnings(): Array<number> {
		return [
			this.earnings.q1,
			this.earnings.q2,
			this.earnings.q3,
			this.earnings.q4
		];
	}
}

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.