This section provides an overview of the chart types available in Integrated Charts.
Column / Bar Copy Link
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartRef,
ChartToolPanelsDef,
ChartType,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
let chartRef: ChartRef;
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="wrapper">
<div class="button-container">
<button v-on:click="updateChart('groupedColumn')">Grouped Column</button>
<button v-on:click="updateChart('stackedColumn')">Stacked Column</button>
<button v-on:click="updateChart('normalizedColumn')">Normalized Column</button>
<button v-on:click="updateChart('groupedBar')">Grouped Bar</button>
<button v-on:click="updateChart('stackedBar')">Stacked Bar</button>
<button v-on:click="updateChart('normalizedBar')">Normalized Bar</button>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:popupParent="popupParent"
:cellSelection="true"
:enableCharts="true"
:chartToolPanelsDef="chartToolPanelsDef"
:rowData="rowData"
@first-data-rendered="onFirstDataRendered"></ag-grid-vue>
<div id="myChart"></div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{
field: "period",
chartDataType: "category",
headerName: "Financial Period",
width: 150,
},
{
field: "recurring",
chartDataType: "series",
headerName: "Recurring revenue",
},
{
field: "individual",
chartDataType: "series",
headerName: "Individual sales",
},
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const popupParent = ref<HTMLElement | null>(document.body);
const chartToolPanelsDef = ref<ChartToolPanelsDef>({
defaultToolPanel: "settings",
});
const rowData = ref<any[]>(null);
function onFirstDataRendered(params: FirstDataRenderedEvent) {
chartRef = params.api.createRangeChart({
chartContainer: document.querySelector("#myChart") as any,
cellRange: {
columns: ["period", "recurring", "individual"],
},
chartType: "groupedColumn",
})!;
}
function updateChart(chartType: ChartType) {
gridApi.value.updateChart({
type: "rangeChartUpdate",
chartId: `${chartRef.chartId}`,
chartType: chartType,
});
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
};
return {
gridApi,
columnDefs,
defaultColDef,
popupParent,
chartToolPanelsDef,
rowData,
onGridReady,
onFirstDataRendered,
updateChart,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-container {
flex-wrap: wrap;
}
#myGrid {
flex: 1;
}
#myChart {
flex: 2;
min-height: 530px;
}
export async function getData(delay: number = 100): Promise<any[]> {
return new Promise((resolve) => setTimeout(() => resolve(generateData()), delay));
}
function generateData(): any[] {
return [
{ period: 'Q1 2021', recurring: 485829, individual: 237438 },
{ period: 'Q2 2021', recurring: 512743, individual: 245672 },
{ period: 'Q3 2021', recurring: 521938, individual: 259371 },
{ period: 'Q4 2021', recurring: 535421, individual: 271839 },
{ period: 'Q1 2022', recurring: 558329, individual: 284738 },
{ period: 'Q2 2022', recurring: 572843, individual: 298472 },
{ period: 'Q3 2022', recurring: 589372, individual: 312849 },
{ period: 'Q4 2022', recurring: 601234, individual: 327195 },
{ period: 'Q1 2023', recurring: 615928, individual: 342839 },
{ period: 'Q2 2023', recurring: 628472, individual: 358293 },
{ period: 'Q3 2023', recurring: 642839, individual: 374829 },
{ period: 'Q4 2023', recurring: 657382, individual: 391829 },
];
}
More Details:
Pie / Donut Copy Link
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartRef,
ChartToolPanelsDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
let chartRef: ChartRef;
const chartConfig: Record<
"pie" | "donut",
{
chartColumns: string[];
}
> = {
pie: {
chartColumns: ["period", "individual"],
},
donut: {
chartColumns: ["period", "recurring", "individual"],
},
};
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="wrapper">
<div class="button-container">
<button v-on:click="updateChart('pie')">Pie</button>
<button v-on:click="updateChart('donut')">Donut</button>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:popupParent="popupParent"
:cellSelection="true"
:enableCharts="true"
:chartToolPanelsDef="chartToolPanelsDef"
:rowData="rowData"
@first-data-rendered="onFirstDataRendered"></ag-grid-vue>
<div id="myChart"></div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{
field: "period",
chartDataType: "category",
headerName: "Financial Period",
width: 150,
},
{
field: "recurring",
chartDataType: "series",
headerName: "Recurring revenue",
},
{
field: "individual",
chartDataType: "series",
headerName: "Individual sales",
},
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const popupParent = ref<HTMLElement | null>(document.body);
const chartToolPanelsDef = ref<ChartToolPanelsDef>({
defaultToolPanel: "settings",
});
const rowData = ref<any[]>(null);
function onFirstDataRendered(params: FirstDataRenderedEvent) {
const chartType = "pie";
chartRef = params.api.createRangeChart({
chartContainer: document.querySelector("#myChart") as any,
chartType,
cellRange: {
rowStartIndex: 0,
rowEndIndex: 3,
columns: chartConfig[chartType].chartColumns,
},
})!;
}
function updateChart(chartType: "pie" | "donut") {
gridApi.value.updateChart({
type: "rangeChartUpdate",
chartId: `${chartRef.chartId}`,
chartType,
cellRange: {
rowStartIndex: 0,
rowEndIndex: 3,
columns: chartConfig[chartType].chartColumns,
},
});
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
};
return {
gridApi,
columnDefs,
defaultColDef,
popupParent,
chartToolPanelsDef,
rowData,
onGridReady,
onFirstDataRendered,
updateChart,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-container {
flex-wrap: wrap;
}
#myGrid {
flex: 1;
}
#myChart {
flex: 2;
min-height: 530px;
}
export async function getData(delay: number = 100): Promise<any[]> {
return new Promise((resolve) => setTimeout(() => resolve(generateData()), delay));
}
function generateData(): any[] {
return [
{ period: 'Q1 2021', recurring: 485829, individual: 237438 },
{ period: 'Q2 2021', recurring: 512743, individual: 245672 },
{ period: 'Q3 2021', recurring: 521938, individual: 259371 },
{ period: 'Q4 2021', recurring: 535421, individual: 271839 },
{ period: 'Q1 2022', recurring: 558329, individual: 284738 },
{ period: 'Q2 2022', recurring: 572843, individual: 298472 },
{ period: 'Q3 2022', recurring: 589372, individual: 312849 },
{ period: 'Q4 2022', recurring: 601234, individual: 327195 },
{ period: 'Q1 2023', recurring: 615928, individual: 342839 },
{ period: 'Q2 2023', recurring: 628472, individual: 358293 },
{ period: 'Q3 2023', recurring: 642839, individual: 374829 },
{ period: 'Q4 2023', recurring: 657382, individual: 391829 },
];
}
More Details:
Line / Area Copy Link
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartRef,
ChartToolPanelsDef,
ChartType,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
let chartRef: ChartRef;
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="wrapper">
<div class="button-container">
<button v-on:click="updateChart('line')">Line</button>
<button v-on:click="updateChart('stackedLine')">Stacked Line</button>
<button v-on:click="updateChart('normalizedLine')">Normalized Line</button>
<button v-on:click="updateChart('area')">Grouped Area</button>
<button v-on:click="updateChart('stackedArea')">Stacked Area</button>
<button v-on:click="updateChart('normalizedArea')">Normalized Area</button>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:popupParent="popupParent"
:cellSelection="true"
:enableCharts="true"
:chartToolPanelsDef="chartToolPanelsDef"
:rowData="rowData"
@first-data-rendered="onFirstDataRendered"></ag-grid-vue>
<div id="myChart"></div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{
field: "period",
chartDataType: "category",
headerName: "Financial Period",
width: 150,
},
{
field: "recurring",
chartDataType: "series",
headerName: "Recurring revenue",
},
{
field: "individual",
chartDataType: "series",
headerName: "Individual sales",
},
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const popupParent = ref<HTMLElement | null>(document.body);
const chartToolPanelsDef = ref<ChartToolPanelsDef>({
defaultToolPanel: "settings",
});
const rowData = ref<any[]>(null);
function onFirstDataRendered(params: FirstDataRenderedEvent) {
chartRef = params.api.createRangeChart({
chartContainer: document.querySelector("#myChart") as any,
cellRange: {
columns: ["period", "recurring", "individual"],
},
chartType: "line",
})!;
}
function updateChart(chartType: ChartType) {
gridApi.value.updateChart({
type: "rangeChartUpdate",
chartId: `${chartRef.chartId}`,
chartType: chartType,
});
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
};
return {
gridApi,
columnDefs,
defaultColDef,
popupParent,
chartToolPanelsDef,
rowData,
onGridReady,
onFirstDataRendered,
updateChart,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-container {
flex-wrap: wrap;
}
#myGrid {
flex: 1;
}
#myChart {
flex: 2;
min-height: 530px;
}
export async function getData(delay: number = 100): Promise<any[]> {
return new Promise((resolve) => setTimeout(() => resolve(generateData()), delay));
}
function generateData(): any[] {
return [
{ period: 'Q1 2021', recurring: 485829, individual: 237438 },
{ period: 'Q2 2021', recurring: 512743, individual: 245672 },
{ period: 'Q3 2021', recurring: 521938, individual: 259371 },
{ period: 'Q4 2021', recurring: 152312, individual: 271839 },
{ period: 'Q1 2022', recurring: 558329, individual: 284738 },
{ period: 'Q2 2022', recurring: 572843, individual: 298472 },
{ period: 'Q3 2022', recurring: 589372, individual: 501233 },
{ period: 'Q4 2022', recurring: 601234, individual: 327195 },
{ period: 'Q1 2023', recurring: 615928, individual: 342839 },
{ period: 'Q2 2023', recurring: 628472, individual: 358293 },
{ period: 'Q3 2023', recurring: 642839, individual: 374829 },
{ period: 'Q4 2023', recurring: 657382, individual: 391829 },
];
}
More Details:
Scatter / Bubble Copy Link
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartRef,
ChartToolPanelsDef,
ChartType,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
let chartRef: ChartRef;
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="wrapper">
<div class="button-container">
<button v-on:click="updateChart('scatter')">Scatter</button>
<button v-on:click="updateChart('bubble')">Bubble</button>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:popupParent="popupParent"
:cellSelection="true"
:enableCharts="true"
:chartToolPanelsDef="chartToolPanelsDef"
:rowData="rowData"
@first-data-rendered="onFirstDataRendered"></ag-grid-vue>
<div id="myChart"></div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "division", width: 150, chartDataType: "category" },
{ field: "resource", width: 150, chartDataType: "category" },
{ field: "revenue", chartDataType: "series" },
{ field: "expenses", chartDataType: "series" },
{ field: "headcount", chartDataType: "series" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const popupParent = ref<HTMLElement | null>(document.body);
const chartToolPanelsDef = ref<ChartToolPanelsDef>({
defaultToolPanel: "settings",
});
const rowData = ref<any[]>(null);
function onFirstDataRendered(params: FirstDataRenderedEvent) {
chartRef = params.api.createRangeChart({
chartContainer: document.querySelector("#myChart") as any,
cellRange: {
columns: ["resource", "revenue", "expenses", "headcount"],
},
chartType: "scatter",
})!;
}
function updateChart(chartType: ChartType) {
gridApi.value.updateChart({
type: "rangeChartUpdate",
chartId: `${chartRef.chartId}`,
chartType: chartType,
});
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
};
return {
gridApi,
columnDefs,
defaultColDef,
popupParent,
chartToolPanelsDef,
rowData,
onGridReady,
onFirstDataRendered,
updateChart,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-container {
flex-wrap: wrap;
}
#myGrid {
flex: 1;
}
#myChart {
flex: 2;
min-height: 530px;
}
export async function getData(delay: number = 100): Promise<any[]> {
return new Promise((resolve) => setTimeout(() => resolve(generateData()), delay));
}
function generateData(): any[] {
return [
{ division: 'Sales', resource: 'Online sales', revenue: 1587123, expenses: 151497, headcount: 168 },
{ division: 'Sales', resource: 'Retail stores', revenue: 1304696, expenses: 389271, headcount: 783 },
{ division: 'Sales', resource: 'Wholesale distribution', revenue: 971658, expenses: 263971, headcount: 629 },
{ division: 'Marketing', resource: 'Online marketing', revenue: 65829, expenses: 185736, headcount: 59 },
{ division: 'Marketing', resource: 'Public relations', revenue: 152696, expenses: 182745, headcount: 37 },
{
division: 'Research',
resource: 'Research and development',
revenue: 108547,
expenses: 294572,
headcount: 83,
},
{ division: 'Operations', resource: 'Customer service', revenue: 0, expenses: 258392, headcount: 72 },
{ division: 'Operations', resource: 'Logistics', revenue: 134830, expenses: 412378, headcount: 48 },
{ division: 'Operations', resource: 'Human resources', revenue: 0, expenses: 179364, headcount: 16 },
{ division: 'Operations', resource: 'Legal', revenue: 49794, expenses: 152638, headcount: 12 },
{ division: 'Operations', resource: 'Quality assurance', revenue: 0, expenses: 213572, headcount: 27 },
{ division: 'Operations', resource: 'Sales operations', revenue: 116543, expenses: 359812, headcount: 52 },
{
division: 'Operations',
resource: 'Supply chain management',
revenue: 91638,
expenses: 146298,
headcount: 29,
},
{
division: 'Operations',
resource: 'Training and development',
revenue: 25146,
expenses: 19872,
headcount: 17,
},
{
division: 'Information technology',
resource: 'IT services',
revenue: 29259,
expenses: 472135,
headcount: 87,
},
{ division: 'Finance', resource: 'Accounting', revenue: 0, expenses: 209573, headcount: 14 },
{ division: 'Finance', resource: 'Loans', revenue: 117451, expenses: 327198, headcount: 23 },
{ division: 'Finance', resource: 'Investments', revenue: 217451, expenses: 37198, headcount: 6 },
{ division: 'Operations', resource: 'Facilities management', revenue: 859451, expenses: 263819, headcount: 58 },
];
}
More Details:
Polar Copy Link
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartRef,
ChartToolPanelsDef,
ChartType,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
let chartRef: ChartRef;
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="wrapper">
<div class="button-container">
<button v-on:click="updateChart('radarLine')">Radar Line</button>
<button v-on:click="updateChart('radarArea')">Radar Area</button>
<button v-on:click="updateChart('nightingale')">Nightingale</button>
<button v-on:click="updateChart('radialColumn')">Radial Column</button>
<button v-on:click="updateChart('radialBar')">Radial Bar</button>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:popupParent="popupParent"
:cellSelection="true"
:enableCharts="true"
:chartToolPanelsDef="chartToolPanelsDef"
:rowData="rowData"
@first-data-rendered="onFirstDataRendered"></ag-grid-vue>
<div id="myChart"></div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "division", chartDataType: "category", width: 150 },
{
field: "recurring",
chartDataType: "series",
headerName: "Recurring revenue",
},
{
field: "individual",
chartDataType: "series",
headerName: "Individual sales",
},
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const popupParent = ref<HTMLElement | null>(document.body);
const chartToolPanelsDef = ref<ChartToolPanelsDef>({
defaultToolPanel: "settings",
});
const rowData = ref<any[]>(null);
function onFirstDataRendered(params: FirstDataRenderedEvent) {
chartRef = params.api.createRangeChart({
chartContainer: document.querySelector("#myChart") as any,
cellRange: {
columns: ["division", "recurring", "individual"],
},
chartType: "radarLine",
})!;
}
function updateChart(chartType: ChartType) {
gridApi.value.updateChart({
type: "rangeChartUpdate",
chartId: `${chartRef.chartId}`,
chartType: chartType,
});
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
};
return {
gridApi,
columnDefs,
defaultColDef,
popupParent,
chartToolPanelsDef,
rowData,
onGridReady,
onFirstDataRendered,
updateChart,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-container {
flex-wrap: wrap;
}
#myGrid {
flex: 1;
}
#myChart {
flex: 2;
min-height: 530px;
}
export async function getData(delay: number = 100): Promise<any[]> {
return new Promise((resolve) => setTimeout(() => resolve(generateData()), delay));
}
function generateData(): any[] {
return [
{ division: 'Sales', recurring: 485829, individual: 263971 },
{ division: 'Finance', recurring: 291245, individual: 46821 },
{ division: 'Consultancy', recurring: 315284, individual: 216473 },
{ division: 'Operations', recurring: 154319, individual: 29867 },
{ division: 'Media', recurring: 215284, individual: 61473 },
];
}
More Details:
Statistical Copy Link
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartRef,
ChartToolPanelsDef,
ChartType,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
let chartRef: ChartRef;
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="wrapper">
<div class="button-container">
<button v-on:click="updateChart('boxPlot')">Box Plot</button>
<button v-on:click="updateChart('histogram')">Histogram</button>
<button v-on:click="updateChart('rangeBar')">Range Bar</button>
<button v-on:click="updateChart('rangeArea')">Range Area</button>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:popupParent="popupParent"
:cellSelection="true"
:enableCharts="true"
:chartToolPanelsDef="chartToolPanelsDef"
:rowData="rowData"
@first-data-rendered="onFirstDataRendered"></ag-grid-vue>
<div id="myChart"></div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{
field: "period",
chartDataType: "category",
headerName: "Financial Period",
width: 150,
},
{ field: "client", chartDataType: "category", headerName: "Client name" },
{
field: "recurring",
chartDataType: "series",
headerName: "Recurring revenue",
},
{
field: "individual",
chartDataType: "series",
headerName: "Individual sales",
},
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const popupParent = ref<HTMLElement | null>(document.body);
const chartToolPanelsDef = ref<ChartToolPanelsDef>({
defaultToolPanel: "settings",
});
const rowData = ref<any[]>(null);
function onFirstDataRendered(params: FirstDataRenderedEvent) {
chartRef = params.api.createRangeChart({
chartContainer: document.querySelector("#myChart") as any,
cellRange: {
columns: ["period", "client", "recurring", "individual"],
},
chartType: "boxPlot",
})!;
}
function updateChart(chartType: ChartType) {
gridApi.value.updateChart({
type: "rangeChartUpdate",
chartId: `${chartRef.chartId}`,
chartType: chartType,
});
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
};
return {
gridApi,
columnDefs,
defaultColDef,
popupParent,
chartToolPanelsDef,
rowData,
onGridReady,
onFirstDataRendered,
updateChart,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-container {
flex-wrap: wrap;
}
#myGrid {
flex: 1;
}
#myChart {
flex: 2;
min-height: 530px;
}
export async function getData(delay: number = 100): Promise<any[]> {
return new Promise((resolve) => setTimeout(() => resolve(generateData()), delay));
}
function generateData(): any[] {
return [
{ period: 'Q1 2023', client: 'TechNova Enterprises', recurring: 15000, individual: 5000 },
{ period: 'Q1 2023', client: 'InnoDyne Solutions', recurring: 2000, individual: 70000 },
{ period: 'Q1 2023', client: 'Unified Systems Ltd', recurring: 10000, individual: 40000 },
{ period: 'Q1 2023', client: 'Vertex Dynamics Inc', recurring: 1800, individual: 6000 },
{ period: 'Q1 2023', client: 'MacroWare Technologies', recurring: 25000, individual: 90000 },
{ period: 'Q1 2023', client: 'Nexa Innovations Corp', recurring: 30000, individual: 120000 },
{ period: 'Q1 2023', client: 'Synthetics Solutions Ltd', recurring: 22000, individual: 8000 },
{ period: 'Q1 2023', client: 'Optimal Systems Inc', recurring: 28000, individual: 100000 },
{ period: 'Q1 2023', client: 'TechEdge Ventures', recurring: 3500, individual: 130000 },
{ period: 'Q1 2023', client: 'Visionary Labs LLC', recurring: 40000, individual: 160000 },
{ period: 'Q2 2023', client: 'TechNova Enterprises', recurring: 15500, individual: 52000 },
{ period: 'Q2 2023', client: 'InnoDyne Solutions', recurring: 20500, individual: 7200 },
{ period: 'Q2 2023', client: 'Unified Systems Ltd', recurring: 1050, individual: 42000 },
{ period: 'Q2 2023', client: 'Vertex Dynamics Inc', recurring: 18500, individual: 62000 },
{ period: 'Q2 2023', client: 'MacroWare Technologies', recurring: 25500, individual: 9200 },
{ period: 'Q2 2023', client: 'Nexa Innovations Corp', recurring: 30500, individual: 122000 },
{ period: 'Q2 2023', client: 'Synthetics Solutions Ltd', recurring: 22500, individual: 8200 },
{ period: 'Q2 2023', client: 'Optimal Systems Inc', recurring: 28500, individual: 102000 },
{ period: 'Q2 2023', client: 'TechEdge Ventures', recurring: 3550, individual: 132000 },
{ period: 'Q2 2023', client: 'Visionary Labs LLC', recurring: 40500, individual: 162000 },
{ period: 'Q3 2023', client: 'TechNova Enterprises', recurring: 16000, individual: 54000 },
{ period: 'Q3 2023', client: 'InnoDyne Solutions', recurring: 21000, individual: 74000 },
{ period: 'Q3 2023', client: 'Unified Systems Ltd', recurring: 11000, individual: 4400 },
{ period: 'Q3 2023', client: 'Vertex Dynamics Inc', recurring: 19000, individual: 64000 },
{ period: 'Q3 2023', client: 'MacroWare Technologies', recurring: 2600, individual: 94000 },
{ period: 'Q3 2023', client: 'Nexa Innovations Corp', recurring: 31000, individual: 12400 },
{ period: 'Q3 2023', client: 'Synthetics Solutions Ltd', recurring: 23000, individual: 84000 },
{ period: 'Q3 2023', client: 'Optimal Systems Inc', recurring: 29000, individual: 104000 },
{ period: 'Q3 2023', client: 'TechEdge Ventures', recurring: 3600, individual: 134000 },
{ period: 'Q3 2023', client: 'Visionary Labs LLC', recurring: 41000, individual: 16400 },
{ period: 'Q4 2023', client: 'TechNova Enterprises', recurring: 16500, individual: 56000 },
{ period: 'Q4 2023', client: 'InnoDyne Solutions', recurring: 2150, individual: 76000 },
{ period: 'Q4 2023', client: 'Unified Systems Ltd', recurring: 11500, individual: 46000 },
{ period: 'Q4 2023', client: 'Vertex Dynamics Inc', recurring: 19500, individual: 6600 },
{ period: 'Q4 2023', client: 'MacroWare Technologies', recurring: 26500, individual: 9600 },
{ period: 'Q4 2023', client: 'Nexa Innovations Corp', recurring: 31500, individual: 126000 },
{ period: 'Q4 2023', client: 'Synthetics Solutions Ltd', recurring: 23500, individual: 86000 },
{ period: 'Q4 2023', client: 'Optimal Systems Inc', recurring: 29500, individual: 106000 },
{ period: 'Q4 2023', client: 'TechEdge Ventures', recurring: 3650, individual: 136000 },
{ period: 'Q4 2023', client: 'Visionary Labs LLC', recurring: 41500, individual: 166000 },
];
}
More Details:
Hierarchical Copy Link
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartRef,
ChartToolPanelsDef,
ChartType,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
let chartRef: ChartRef;
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="wrapper">
<div class="button-container">
<button v-on:click="updateChart('treemap')">Treemap</button>
<button v-on:click="updateChart('sunburst')">Sunburst</button>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:popupParent="popupParent"
:cellSelection="true"
:enableCharts="true"
:chartToolPanelsDef="chartToolPanelsDef"
:rowData="rowData"
@first-data-rendered="onFirstDataRendered"></ag-grid-vue>
<div id="myChart"></div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "division", width: 150, chartDataType: "category" },
{ field: "resource", width: 150, chartDataType: "category" },
{ field: "revenue", chartDataType: "series" },
{ field: "expenses", chartDataType: "series" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const popupParent = ref<HTMLElement | null>(document.body);
const chartToolPanelsDef = ref<ChartToolPanelsDef>({
defaultToolPanel: "settings",
});
const rowData = ref<any[]>(null);
function onFirstDataRendered(params: FirstDataRenderedEvent) {
chartRef = params.api.createRangeChart({
chartContainer: document.querySelector("#myChart") as any,
cellRange: {
columns: ["division", "resource", "revenue", "expenses"],
},
chartType: "treemap",
})!;
}
function updateChart(chartType: ChartType) {
gridApi.value.updateChart({
type: "rangeChartUpdate",
chartId: `${chartRef.chartId}`,
chartType: chartType,
});
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
};
return {
gridApi,
columnDefs,
defaultColDef,
popupParent,
chartToolPanelsDef,
rowData,
onGridReady,
onFirstDataRendered,
updateChart,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-container {
flex-wrap: wrap;
}
#myGrid {
flex: 1;
}
#myChart {
flex: 2;
min-height: 530px;
}
export async function getData(delay: number = 100): Promise<any[]> {
return new Promise((resolve) => setTimeout(() => resolve(generateData()), delay));
}
function generateData(): any[] {
return [
{ division: 'Sales', resource: 'Online sales', revenue: 1587123, expenses: 151497, headcount: 168 },
{ division: 'Sales', resource: 'Retail stores', revenue: 1304696, expenses: 389271, headcount: 783 },
{ division: 'Sales', resource: 'Wholesale distribution', revenue: 971658, expenses: 263971, headcount: 629 },
{ division: 'Marketing', resource: 'Online marketing', revenue: 65829, expenses: 185736, headcount: 59 },
{ division: 'Marketing', resource: 'Public relations', revenue: 152696, expenses: 182745, headcount: 37 },
{
division: 'Research',
resource: 'Research and development',
revenue: 108547,
expenses: 294572,
headcount: 83,
},
{ division: 'Operations', resource: 'Customer service', revenue: 0, expenses: 258392, headcount: 72 },
{ division: 'Operations', resource: 'Logistics', revenue: 134830, expenses: 412378, headcount: 48 },
{ division: 'Operations', resource: 'Human resources', revenue: 0, expenses: 179364, headcount: 16 },
{ division: 'Operations', resource: 'Legal', revenue: 49794, expenses: 152638, headcount: 12 },
{ division: 'Operations', resource: 'Quality assurance', revenue: 0, expenses: 213572, headcount: 27 },
{ division: 'Operations', resource: 'Sales operations', revenue: 116543, expenses: 359812, headcount: 52 },
{
division: 'Operations',
resource: 'Supply chain management',
revenue: 91638,
expenses: 146298,
headcount: 29,
},
{
division: 'Operations',
resource: 'Training and development',
revenue: 25146,
expenses: 19872,
headcount: 17,
},
{
division: 'Information technology',
resource: 'IT services',
revenue: 29259,
expenses: 472135,
headcount: 87,
},
{ division: 'Finance', resource: 'Accounting', revenue: 0, expenses: 209573, headcount: 14 },
{ division: 'Finance', resource: 'Loans', revenue: 117451, expenses: 327198, headcount: 23 },
{ division: 'Finance', resource: 'Investments', revenue: 217451, expenses: 37198, headcount: 6 },
{ division: 'Operations', resource: 'Facilities management', revenue: 859451, expenses: 263819, headcount: 58 },
];
}
More Details:
Specialized Copy Link
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartRef,
ChartToolPanelsDef,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
let chartRef: ChartRef;
const heatmapColIds: string[] = [
"year",
"jan",
"feb",
"mar",
"apr",
"may",
"jun",
"jul",
"aug",
"sep",
"oct",
"nov",
"dec",
];
const heatmapColDefs: ColDef[] = [
{ field: "year", width: 150, chartDataType: "category" },
{ field: "jan" },
{ field: "feb" },
{ field: "mar" },
{ field: "apr" },
{ field: "may" },
{ field: "jun" },
{ field: "jul" },
{ field: "aug" },
{ field: "sep" },
{ field: "oct" },
{ field: "nov" },
{ field: "dec" },
];
const waterfallColIds: string[] = ["financials", "amount"];
const waterfallColDefs: ColDef[] = [
{ field: "financials", width: 150, chartDataType: "category" },
{ field: "amount", chartDataType: "series" },
];
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="wrapper">
<div class="button-container">
<button v-on:click="updateChart('heatmap')">Heatmap</button>
<button v-on:click="updateChart('waterfall')">Waterfall</button>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:popupParent="popupParent"
:cellSelection="true"
:enableCharts="true"
:chartToolPanelsDef="chartToolPanelsDef"
:rowData="rowData"
@first-data-rendered="onFirstDataRendered"></ag-grid-vue>
<div id="myChart"></div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>(heatmapColDefs);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const popupParent = ref<HTMLElement | null>(document.body);
const chartToolPanelsDef = ref<ChartToolPanelsDef>({
defaultToolPanel: "settings",
});
const rowData = ref<any[]>(null);
function onFirstDataRendered(params: FirstDataRenderedEvent) {
chartRef = params.api.createRangeChart({
chartContainer: document.querySelector("#myChart") as any,
chartType: "heatmap",
cellRange: {
columns: heatmapColIds,
},
})!;
}
function updateChart(chartType: "heatmap" | "waterfall") {
getData(chartType).then((rowData) => {
gridApi.value.updateGridOptions({
columnDefs:
chartType === "heatmap" ? heatmapColDefs : waterfallColDefs,
rowData,
});
setTimeout(() => {
gridApi.value.updateChart({
type: "rangeChartUpdate",
chartId: chartRef.chartId,
chartType,
cellRange: {
columns:
chartType === "heatmap" ? heatmapColIds : waterfallColIds,
},
});
});
});
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
getData("heatmap").then((rowData) =>
params.api.setGridOption("rowData", rowData),
);
};
return {
gridApi,
columnDefs,
defaultColDef,
popupParent,
chartToolPanelsDef,
rowData,
onGridReady,
onFirstDataRendered,
updateChart,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-container {
flex-wrap: wrap;
}
#myGrid {
flex: 1;
}
#myChart {
flex: 2;
min-height: 530px;
}
export async function getData(chartType: 'heatmap' | 'waterfall', delay: number = 100): Promise<any[]> {
return new Promise((resolve) => setTimeout(() => resolve(generateData(chartType)), delay));
}
function generateData(chartType: 'heatmap' | 'waterfall'): any[] {
switch (chartType) {
case 'heatmap':
return generateHeatmapData();
case 'waterfall':
return generateWaterfallData();
}
}
function generateHeatmapData(): any[] {
// Source: http://www.sheffieldweather.co.uk/Averages/MONTHLYAIRAVERAGE.htm
return [
{
year: '2010',
jan: 1.2,
feb: 1.9,
mar: 5.9,
apr: 9.1,
may: 10.9,
jun: 15.2,
jul: 16.2,
aug: 14.9,
sep: 13.4,
oct: 9.5,
nov: 4.9,
dec: 0.4,
},
{
year: '2011',
jan: 3.9,
feb: 6,
mar: 6.6,
apr: 12,
may: 12,
jun: 14.2,
jul: 15.8,
aug: 15.8,
sep: 14.9,
oct: 12.2,
nov: 8.9,
dec: 5.4,
},
{
year: '2012',
jan: 5.1,
feb: 4.5,
mar: 8.6,
apr: 6.7,
may: 11.6,
jun: 13.4,
jul: 15.5,
aug: 16.2,
sep: 12.7,
oct: 8.8,
nov: 6.1,
dec: 4.2,
},
{
year: '2013',
jan: 3.4,
feb: 2.7,
mar: 1.7,
apr: 7.4,
may: 10.6,
jun: 14.1,
jul: 18.4,
aug: 16.8,
sep: 13.3,
oct: 11.7,
nov: 6.2,
dec: 6.3,
},
{
year: '2014',
jan: 5,
feb: 5.6,
mar: 7.4,
apr: 10.1,
may: 12.2,
jun: 15.3,
jul: 17.9,
aug: 14.9,
sep: 14.4,
oct: 11.4,
nov: 7.8,
dec: 5.2,
},
{
year: '2015',
jan: 4.1,
feb: 3.8,
mar: 5.9,
apr: 9.1,
may: 10.6,
jun: 13.9,
jul: 15.7,
aug: 15.8,
sep: 12.2,
oct: 10.2,
nov: 8.7,
dec: 8.6,
},
{
year: '2016',
jan: 4.8,
feb: 4.2,
mar: 5.5,
apr: 7,
may: 11.8,
jun: 14.6,
jul: 16.6,
aug: 16.6,
sep: 15.4,
oct: 10.2,
nov: 5.4,
dec: 6.3,
},
{
year: '2017',
jan: 3.9,
feb: 5.2,
mar: 8,
apr: 8.6,
may: 12.8,
jun: 15.7,
jul: 16.4,
aug: 15.2,
sep: 13,
oct: 11.9,
nov: 6.5,
dec: 4.7,
},
{
year: '2018',
jan: 4.4,
feb: 2.3,
mar: 3.7,
apr: 8.8,
may: 13.8,
jun: 16.4,
jul: 19.5,
aug: 17,
sep: 13.4,
oct: 10.3,
nov: 7.4,
dec: 6.4,
},
{
year: '2019',
jan: 4.4,
feb: 6.9,
mar: 7.5,
apr: 8.9,
may: 11.5,
jun: 14.1,
jul: 17.8,
aug: 17.1,
sep: 13.7,
oct: 9.2,
nov: 5.4,
dec: 5.4,
},
{
year: '2020',
jan: 6.4,
feb: 5.6,
mar: 6.3,
apr: 10.3,
may: 12.8,
jun: 15,
jul: 15.6,
aug: 17.2,
sep: 13.7,
oct: 9.8,
nov: 8.1,
dec: 4.6,
},
{
year: '2021',
jan: 2.8,
feb: 4.3,
mar: 7.2,
apr: 6.5,
may: 10,
jun: 16.1,
jul: 18.4,
aug: 16.1,
sep: 16.2,
oct: 11.6,
nov: 7.7,
dec: 5.4,
},
{
year: '2022',
jan: 5.2,
feb: 6.1,
mar: 7.4,
apr: 9.2,
may: 13.3,
jun: 15.5,
jul: 18.5,
aug: 18.4,
sep: 14.5,
oct: 12.1,
nov: 8.4,
dec: 3.6,
},
];
}
function generateWaterfallData(): any[] {
return [
{ financials: 'Income\nTax', amount: 185 },
{ financials: 'VAT', amount: 145 },
{ financials: 'NI', amount: 134 },
{ financials: 'Corp\nTax', amount: 55 },
{ financials: 'Council\nTax', amount: 34 },
{ financials: 'Social\nProtection', amount: -252 },
{ financials: 'Health', amount: -155 },
{ financials: 'Education', amount: -112 },
{ financials: 'Defence', amount: -65 },
{ financials: 'Debt\nInterest', amount: -63 },
{ financials: 'Housing', amount: -31 },
];
}
More Details:
Funnel Copy Link
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartRef,
ChartToolPanelsDef,
ChartType,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
let chartRef: ChartRef;
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="wrapper">
<div class="button-container">
<button v-on:click="updateChart('funnel')">Funnel</button>
<button v-on:click="updateChart('coneFunnel')">Cone Funnel</button>
<button v-on:click="updateChart('pyramid')">Pyramid</button>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:popupParent="popupParent"
:cellSelection="true"
:enableCharts="true"
:chartToolPanelsDef="chartToolPanelsDef"
:rowData="rowData"
@first-data-rendered="onFirstDataRendered"></ag-grid-vue>
<div id="myChart"></div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{
field: "group",
chartDataType: "category",
headerName: "Group",
width: 150,
},
{ field: "count", chartDataType: "series", headerName: "Count" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const popupParent = ref<HTMLElement | null>(document.body);
const chartToolPanelsDef = ref<ChartToolPanelsDef>({
defaultToolPanel: "settings",
});
const rowData = ref<any[]>(null);
function onFirstDataRendered(params: FirstDataRenderedEvent) {
chartRef = params.api.createRangeChart({
chartContainer: document.querySelector("#myChart") as any,
cellRange: {
columns: ["group", "count"],
},
chartType: "funnel",
})!;
}
function updateChart(chartType: ChartType) {
gridApi.value.updateChart({
type: "rangeChartUpdate",
chartId: `${chartRef.chartId}`,
chartType: chartType,
});
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
};
return {
gridApi,
columnDefs,
defaultColDef,
popupParent,
chartToolPanelsDef,
rowData,
onGridReady,
onFirstDataRendered,
updateChart,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-container {
flex-wrap: wrap;
}
#myGrid {
flex: 1;
}
#myChart {
flex: 2;
min-height: 530px;
}
export async function getData(delay: number = 100): Promise<any[]> {
return new Promise((resolve) => setTimeout(() => resolve(generateData()), delay));
}
function generateData(): any[] {
return [
{ group: 'Page Visit', count: 490 },
{ group: 'Enquiry', count: 340 },
{ group: 'Quote', count: 300 },
{ group: 'Sale', count: 290 },
];
}
More Details:
Combination Copy Link
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
CellSelectionOptions,
ChartRef,
ChartToolPanelsDef,
ChartType,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
FirstDataRenderedEvent,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
IntegratedChartsModule,
RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
IntegratedChartsModule.with(AgChartsEnterpriseModule),
ColumnMenuModule,
ContextMenuModule,
RowGroupingModule,
]);
let chartRef: ChartRef;
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="wrapper">
<div class="button-container">
<button v-on:click="updateChart('columnLineCombo')">Column Line Combo</button>
<button v-on:click="updateChart('areaColumnCombo')">Area Column Combo</button>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:popupParent="popupParent"
:cellSelection="true"
:enableCharts="true"
:chartToolPanelsDef="chartToolPanelsDef"
:rowData="rowData"
@first-data-rendered="onFirstDataRendered"></ag-grid-vue>
<div id="myChart"></div>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi | null>(null);
const columnDefs = ref<ColDef[]>([
{
field: "period",
chartDataType: "category",
headerName: "Financial Period",
width: 150,
},
{
field: "recurring",
chartDataType: "series",
headerName: "Recurring revenue",
},
{
field: "individual",
chartDataType: "series",
headerName: "Individual sales",
},
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const popupParent = ref<HTMLElement | null>(document.body);
const chartToolPanelsDef = ref<ChartToolPanelsDef>({
defaultToolPanel: "settings",
});
const rowData = ref<any[]>(null);
function onFirstDataRendered(params: FirstDataRenderedEvent) {
chartRef = params.api.createRangeChart({
chartContainer: document.querySelector("#myChart") as any,
cellRange: {
columns: ["period", "recurring", "individual"],
},
chartType: "columnLineCombo",
})!;
}
function updateChart(chartType: ChartType) {
gridApi.value.updateChart({
type: "rangeChartUpdate",
chartId: `${chartRef.chartId}`,
chartType: chartType,
});
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
getData().then((rowData) => params.api.setGridOption("rowData", rowData));
};
return {
gridApi,
columnDefs,
defaultColDef,
popupParent,
chartToolPanelsDef,
rowData,
onGridReady,
onFirstDataRendered,
updateChart,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.button-container {
flex-wrap: wrap;
}
#myGrid {
flex: 1;
}
#myChart {
flex: 2;
min-height: 530px;
}
export async function getData(delay: number = 100): Promise<any[]> {
return new Promise((resolve) => setTimeout(() => resolve(generateData()), delay));
}
function generateData(): any[] {
return [
{ period: 'Q1 2021', recurring: 485829, individual: 237438 },
{ period: 'Q2 2021', recurring: 512743, individual: 245672 },
{ period: 'Q3 2021', recurring: 521938, individual: 259371 },
{ period: 'Q4 2021', recurring: 535421, individual: 271839 },
{ period: 'Q1 2022', recurring: 558329, individual: 284738 },
{ period: 'Q2 2022', recurring: 572843, individual: 298472 },
{ period: 'Q3 2022', recurring: 589372, individual: 312849 },
{ period: 'Q4 2022', recurring: 601234, individual: 327195 },
{ period: 'Q1 2023', recurring: 615928, individual: 342839 },
{ period: 'Q2 2023', recurring: 628472, individual: 358293 },
{ period: 'Q3 2023', recurring: 642839, individual: 374829 },
{ period: 'Q4 2023', recurring: 657382, individual: 391829 },
];
}
More Details: