I have followed the following example- link to create a chart as shown. As you can see in the example, if you edit the table using filters, the charts also gets edited accordingly.
The issue that I am facing is, only the charts are getting displayed and not the table.
app.component.html
<div id="wrapper">
<div id="barChart" class="ag-theme-alpine-dark"></div>
<div id="bubbleChart" class="ag-theme-alpine-dark"></div>
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-alpine-dark"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowData]="rowData"
[enableCharts]="true"
[chartThemes]="chartThemes"
(firstDataRendered)="onFirstDataRendered($event)"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
</div>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
gridApi: any;
gridColumnApi: any;
columnDefs: any;
defaultColDef: any;
rowData: any;
chartThemes: any;
constructor() {
this.columnDefs = [
{
field: 'city',
chartDataType: 'category',
},
{
field: 'country',
chartDataType: 'category',
},
{
field: 'longitude',
chartDataType: 'series',
},
{
field: 'latitude',
chartDataType: 'series',
},
{
field: 'population',
chartDataType: 'series',
},
];
this.defaultColDef = {
flex: 1,
editable: true,
sortable: true,
filter: 'agMultiColumnFilter',
floatingFilter: true,
resizable: true,
};
function getData() {
return [
{
city: 'Tokyo',
latitude: 35.6897,
longitude: 139.6922,
country: 'Japan',
population: 37977000,
},
{
city: 'Jakarta',
latitude: -6.2146,
longitude: 106.8451,
country: 'Indonesia',
population: 34540000,
},
{
city: 'Delhi',
latitude: 28.66,
longitude: 77.23,
country: 'India',
population: 29617000,
},
{
city: 'Mumbai',
latitude: 18.9667,
longitude: 72.8333,
country: 'India',
population: 23355000,
},
{
city: 'Manila',
latitude: 14.5958,
longitude: 120.9772,
country: 'Philippines',
population: 23088000,
},
{
city: 'Shanghai',
latitude: 31.1667,
longitude: 121.4667,
country: 'China',
population: 22120000,
},
{
city: 'São Paulo',
latitude: -23.5504,
longitude: -46.6339,
country: 'Brazil',
population: 22046000,
},
{
city: 'Seoul',
latitude: 37.5833,
longitude: 127,
country: 'Korea, South',
population: 21794000,
},
{
city: 'Mexico City',
latitude: 19.4333,
longitude: -99.1333,
country: 'Mexico',
population: 20996000,
},
{
city: 'Guangzhou',
latitude: 23.1288,
longitude: 113.259,
country: 'China',
population: 20902000,
},
{
city: 'Beijing',
latitude: 39.905,
longitude: 116.3914,
country: 'China',
population: 19433000,
},
{
city: 'Cairo',
latitude: 30.0561,
longitude: 31.2394,
country: 'Egypt',
population: 19372000,
},
{
city: 'New York',
latitude: 40.6943,
longitude: -73.9249,
country: 'United States',
population: 18713220,
},
{
city: 'Kolkāta',
latitude: 22.5411,
longitude: 88.3378,
country: 'India',
population: 17560000,
},
{
city: 'Moscow',
latitude: 55.7558,
longitude: 37.6178,
country: 'Russia',
population: 17125000,
},
{
city: 'Bangkok',
latitude: 13.75,
longitude: 100.5167,
country: 'Thailand',
population: 17066000,
},
{
city: 'Buenos Aires',
latitude: -34.5997,
longitude: -58.3819,
country: 'Argentina',
population: 16157000,
},
{
city: 'Shenzhen',
latitude: 22.535,
longitude: 114.054,
country: 'China',
population: 15929000,
},
{
city: 'Dhaka',
latitude: 23.7161,
longitude: 90.3961,
country: 'Bangladesh',
population: 15443000,
},
{
city: 'Lagos',
latitude: 6.45,
longitude: 3.4,
country: 'Nigeria',
population: 15279000,
},
{
city: 'Istanbul',
latitude: 41.01,
longitude: 28.9603,
country: 'Turkey',
population: 15154000,
},
{
city: 'Ōsaka',
latitude: 34.6936,
longitude: 135.5019,
country: 'Japan',
population: 14977000,
},
{
city: 'Karachi',
latitude: 24.86,
longitude: 67.01,
country: 'Pakistan',
population: 14835000,
},
{
city: 'Bangalore',
latitude: 12.9699,
longitude: 77.598,
country: 'India',
population: 13707000,
},
{
city: 'Tehran',
latitude: 35.7,
longitude: 51.4167,
country: 'Iran',
population: 13633000,
},
{
city: 'Ho Chi Minh City',
latitude: 10.8167,
longitude: 106.6333,
country: 'Vietnam',
population: 13312000,
},
{
city: 'Los Angeles',
latitude: 34.1139,
longitude: -118.4068,
country: 'United States',
population: 12750807,
},
{
city: 'Rio de Janeiro',
latitude: -22.9083,
longitude: -43.1964,
country: 'Brazil',
population: 12272000,
},
{
city: 'Nanyang',
latitude: 32.9987,
longitude: 112.5292,
country: 'China',
population: 12010000,
},
{
city: 'Chennai',
latitude: 13.0825,
longitude: 80.275,
country: 'India',
population: 11324000,
},
{
city: 'Chengdu',
latitude: 30.6636,
longitude: 104.0667,
country: 'China',
population: 11309000,
},
{
city: 'Lahore',
latitude: 31.5497,
longitude: 74.3436,
country: 'Pakistan',
population: 11021000,
},
{
city: 'Paris',
latitude: 48.8566,
longitude: 2.3522,
country: 'France',
population: 11020000,
},
{
city: 'London',
latitude: 51.5072,
longitude: -0.1275,
country: 'United Kingdom',
population: 10979000,
},
{
city: 'Linyi',
latitude: 35.0606,
longitude: 118.3425,
country: 'China',
population: 10820000,
},
{
city: 'Tianjin',
latitude: 39.1467,
longitude: 117.2056,
country: 'China',
population: 10800000,
},
{
city: 'Shijiazhuang',
latitude: 38.0422,
longitude: 114.5086,
country: 'China',
population: 10784600,
},
{
city: 'Baoding',
latitude: 38.8671,
longitude: 115.4845,
country: 'China',
population: 10700000,
},
{
city: 'Zhoukou',
latitude: 33.625,
longitude: 114.6418,
country: 'China',
population: 9901000,
},
{
city: 'Hyderābād',
latitude: 17.3667,
longitude: 78.4667,
country: 'India',
population: 9746000,
},
{
city: 'Weifang',
latitude: 36.7167,
longitude: 119.1,
country: 'China',
population: 9373000,
},
{
city: 'Nagoya',
latitude: 35.1167,
longitude: 136.9333,
country: 'Japan',
population: 9113000,
},
{
city: 'Wuhan',
latitude: 30.5872,
longitude: 114.2881,
country: 'China',
population: 8962000,
},
{
city: 'Heze',
latitude: 35.2333,
longitude: 115.4333,
country: 'China',
population: 8750000,
},
{
city: 'Ganzhou',
latitude: 25.8292,
longitude: 114.9336,
country: 'China',
population: 8677600,
},
{
city: 'Tongshan',
latitude: 34.261,
longitude: 117.1859,
country: 'China',
population: 8669000,
},
{
city: 'Chicago',
latitude: 41.8373,
longitude: -87.6862,
country: 'United States',
population: 8604203,
},
{
city: 'Fuyang',
latitude: 32.8986,
longitude: 115.8045,
country: 'China',
population: 8360000,
},
{
city: 'Jining',
latitude: 35.4,
longitude: 116.5667,
country: 'China',
population: 8023000,
},
{
city: 'Dongguan',
latitude: 23.0475,
longitude: 113.7493,
country: 'China',
population: 7981000,
},
{
city: 'Hanoi',
latitude: 21.0245,
longitude: 105.8412,
country: 'Vietnam',
population: 7785000,
},
{
city: 'Pune',
latitude: 18.5196,
longitude: 73.8553,
country: 'India',
population: 7764000,
},
{
city: 'Chongqing',
latitude: 29.55,
longitude: 106.5069,
country: 'China',
population: 7739000,
},
{
city: 'Changchun',
latitude: 43.9,
longitude: 125.2,
country: 'China',
population: 7674439,
},
{
city: 'Zhumadian',
latitude: 32.9773,
longitude: 114.0253,
country: 'China',
population: 7640000,
},
{
city: 'Ningbo',
latitude: 29.875,
longitude: 121.5492,
country: 'China',
population: 7639000,
},
{
city: 'Onitsha',
latitude: 6.1667,
longitude: 6.7833,
country: 'Nigeria',
population: 7635000,
},
{
city: 'Hefei',
latitude: 31.8639,
longitude: 117.2808,
country: 'China',
population: 7457027,
},
{
city: 'Ahmadābād',
latitude: 23.03,
longitude: 72.58,
country: 'India',
population: 7410000,
},
{
city: 'Nantong',
latitude: 31.9829,
longitude: 120.8873,
country: 'China',
population: 7282835,
},
{
city: 'Foshan',
latitude: 23.0292,
longitude: 113.1056,
country: 'China',
population: 7194311,
},
{
city: 'Hengyang',
latitude: 26.8968,
longitude: 112.5857,
country: 'China',
population: 7148344,
},
{
city: 'Xi’an',
latitude: 34.2667,
longitude: 108.9,
country: 'China',
population: 7135000,
},
{
city: 'Shenyang',
latitude: 41.8039,
longitude: 123.4258,
country: 'China',
population: 7105000,
},
{
city: 'Tangshan',
latitude: 39.6292,
longitude: 118.1742,
country: 'China',
population: 7100000,
},
{
city: 'Shaoyang',
latitude: 27.2418,
longitude: 111.4725,
country: 'China',
population: 7071000,
},
{
city: 'Changsha',
latitude: 28.1987,
longitude: 112.9709,
country: 'China',
population: 7044118,
},
{
city: 'Cangzhou',
latitude: 38.3037,
longitude: 116.8452,
country: 'China',
population: 6800000,
},
{
city: 'Maoming',
latitude: 21.6618,
longitude: 110.9178,
country: 'China',
population: 6706000,
},
{
city: 'Huanggang',
latitude: 30.45,
longitude: 114.875,
country: 'China',
population: 6667000,
},
{
city: 'Miami',
latitude: 25.7839,
longitude: -80.2102,
country: 'United States',
population: 6445545,
},
{
city: 'Sūrat',
latitude: 21.17,
longitude: 72.83,
country: 'India',
population: 5807000,
},
{
city: 'Dallas',
latitude: 32.7936,
longitude: -96.7662,
country: 'United States',
population: 5743938,
},
];
}
this.rowData = getData();
this.chartThemes = ['ag-default-dark'];
}
onFirstDataRendered(params: any) {
createColumnChart(params.api);
createBubbleChart(params.api);
}
onGridReady(params: any) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
}
}
function createColumnChart(gridApi: any) {
gridApi.createCrossFilterChart({
chartType: 'column',
cellRange: {
columns: ['country', 'population'],
},
aggFunc: 'count',
chartThemeOverrides: {
common: {
title: {
enabled: true,
text: 'Number of Most Populous Cities by Country',
},
legend: { enabled: false },
},
cartesian: { axes: { category: { label: { rotation: 325 } } } },
},
chartContainer: document.querySelector('#barChart'),
});
}
function createBubbleChart(gridApi: any) {
gridApi.createCrossFilterChart({
chartType: 'bubble',
cellRange: {
columns: ['longitude', 'latitude', 'population'],
},
chartThemeOverrides: {
common: {
title: {
enabled: true,
text: 'Latitude vs Longitude of Most Populous Cities',
},
legend: { enabled: false },
},
},
chartContainer: document.querySelector('#bubbleChart'),
});
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AgGridModule } from 'ag-grid-angular';
import 'ag-grid-enterprise';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AgGridModule.withComponents([])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
'''
