Angular 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.
| Returns a list of models with information about the charts that are currently rendered from the grid.
|
These models can then be supplied to the following grid api method to restore the charts:
| Restores a chart using the ChartModel that was previously obtained from getChartModels() .
|
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.