Results:
Loading...
Framework:Javascript Data GridReact Data GridAngular Data GridVue Data Grid

JavaScript Data Grid: Save / Restore Charts

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.

API Reference

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.

getChartModels
Returns a list of models with information about the charts that are currently rendered from the grid. 
getChartModels = () => ChartModel[] | undefined;

Properties available on the ChartModel interface.

version
string
string
modelType
ChartModelType
ChartModelType
modelType: ChartModelType;

type ChartModelType = 'range' | 'pivot'
chartId
string
string
chartType
ChartType
ChartType
chartType: ChartType;

type ChartType = 
      'column' 
    | 'groupedColumn' 
    | 'stackedColumn' 
    | 'normalizedColumn' 
    | 'bar' 
    | 'groupedBar' 
    | 'stackedBar' 
    | 'normalizedBar' 
    | 'line' 
    | 'scatter' 
    | 'bubble' 
    | 'pie' 
    | 'doughnut' 
    | 'area' 
    | 'stackedArea' 
    | 'normalizedArea' 
    | 'histogram' 
    | 'columnLineCombo' 
    | 'areaColumnCombo' 
    | 'customCombo'
cellRange
CellRangeParams
CellRangeParams
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
chartThemeName
string
string
chartOptions
AgChartThemeOverrides
chartOptions: AgChartThemeOverrides;

interface AgChartThemeOverrides {
}
chartPalette
AgChartThemePalette
chartPalette: AgChartThemePalette;

interface AgChartThemePalette {
}
suppressChartRanges
boolean
boolean
aggFunc
string | IAggFunc
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;
}
unlinkChart
boolean
boolean
seriesChartTypes
SeriesChartType[]
SeriesChartType[]
seriesChartTypes: SeriesChartType[];

interface SeriesChartType {
  colId: string;
  chartType: ChartType;
  secondaryAxis?: boolean;
}

type ChartType = 
      'column' 
    | 'groupedColumn' 
    | 'stackedColumn' 
    | 'normalizedColumn' 
    | 'bar' 
    | 'groupedBar' 
    | 'stackedBar' 
    | 'normalizedBar' 
    | 'line' 
    | 'scatter' 
    | 'bubble' 
    | 'pie' 
    | 'doughnut' 
    | 'area' 
    | 'stackedArea' 
    | 'normalizedArea' 
    | 'histogram' 
    | 'columnLineCombo' 
    | 'areaColumnCombo' 
    | 'customCombo'

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.

Next Up

Continue to the next section to learn about: Downloading Chart Image.