This section shows how the Grid API can be used to save and restore charts.
Saving / Restoring Charts
The example below demonstrates how you can save and then later restore a chart. You can make changes to the chart type, theme, data and formatting options and note how the restored chart looks the same as the chart that was saved.
Create a range chart from the grid, which will be shown in a container below the grid.
Change the chart type, theme, data and/or formatting in order to see the changes restored later.
Click "Save chart" to persist a model of the visible chart into a local variable. An alert will be shown to confirm that this has happened.
Click "Clear chart" to destroy the existing chart.
Click "Restore chart" to restore the previously saved chart.
A chart model that represent all the state information about the rendered charts can be obtained using getChartModels(). These models are returned in a format that can be easily used with the other API methods to later restore the chart.
cellRange: CellRangeParams;
interface CellRangeParams {
// Start row index
rowStartIndex: number | null;
// Pinned state of start row. Either 'top', 'bottom' or null
rowStartPinned?: RowPinnedType;
// End row index
rowEndIndex: number | null;
// Pinned state of end row. Either 'top', 'bottom' or null
rowEndPinned?: RowPinnedType;
// Starting column for range
columnStart?: string | Column;
// End column for range
columnEnd?: string | Column;
// Specify Columns to include instead of using `columnStart` and `columnEnd`
columns?: (string | Column)[];
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
aggFunc: string | IAggFunc;
interface IAggFunc<TData = any, TValue = any> {
(params: IAggFuncParams<TData, TValue>) : any
}
interface IAggFuncParams<TData = any, TValue = any> {
// Values to aggregate
values: TValue[];
// Column the aggregation function is working on
column: Column;
// ColDef of the aggregation column
colDef: ColDef<TData>;
// The parent RowNode, where the aggregation result will be shown
rowNode: IRowNode<TData>;
// data (if any) of the parent RowNode
data: TData;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
}
These models can then be supplied to the following grid api method to restore the charts:
restoreChart
Function
Restores a chart using the ChartModel that was previously obtained from getChartModels().
restoreChart = (
chartModel: ChartModel,
chartContainer?: HTMLElement
) => ChartRef | undefined;
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
Note that an optional chartContainer can be specified when restoring a chart.