This section shows how Range Charts can be created via the Grid API.
Creating Range Charts
Range Charts can be created through gridApi.createRangeChart()
as shown below:
gridApi.createRangeChart({
chartType: 'groupedColumn',
cellRange: {
rowStartIndex: 0,
rowEndIndex: 4,
columns: ['country', 'gold', 'silver'],
},
// other options...
});
The snippet above creates a Range Chart with the groupedColumn
chart type using data from the first 4 and the country
, gold
, silver
columns. For a full list of options see Range Chart API.
The following example demonstrates how Range Charts can be created programmatically via gridApi.createRangeChart()
. Note the following:
- Clicking 'Top 5 Medal Winners' will chart the first five rows of Gold and Silver medals by Country.
- Clicking 'Bronze Medals by Country' will chart Bronze by Country using all rows (the provided cell range does not specify rows).
- Note the 'Bronze Medals by Country' chart is unlinked from the grid as
unlinkChart=true
. Notice that sorting in the grid does not affect the chart and there is no chart range in the grid.
Range Chart Dashboard
The following example passes a Chart Container to the API to place the chart in a location other than the grid's popup window. Note the following:
- The charts are placed in
div
elements outside the grid. - The two pie charts are showing aggregations rather than charting individual rows.
- The bar chart is sensitive to changes in the rows. For example if you sort, the chart updates to always chart the first five rows.
- All data is editable in the grid. Changes to the grid data is reflected in the charts.
- The pie charts have legends on the right side. This is configured in the
chartThemeOverrides
.
Hiding Chart Ranges
In some cases it may be desirable to hide the chart ranges in the grid, see Combination Charts.
To hide the chart ranges simply enable suppressChartRanges=true
on the ChartRangeParams
.
For more details refer to Range Chart API.
Combination Charts
It is possible to create the following combination chart types via gridApi.createRangeChart()
:
- Column & Line (
chartType: 'columnLineCombo'
) - Area & Column (
chartType: 'areaColumnCombo'
) - Custom Combination (
chartType: 'customCombo'
)
When the customCombo
chart type is specified a new CreateRangeChartParams.seriesChartTypes
must also be supplied. Also note that when seriesChartTypes
is present a customCombo
chart type is assumed, regardless of which chartType
is supplied.
The seriesChartTypes
property accepts an array of SeriesChartType
objects as shown below:
gridApi.createRangeChart({
chartType: 'customCombo',
cellRange: {
columns: ['month', 'rain', 'pressure', 'temp'],
},
seriesChartTypes: [
{ colId: 'rain', chartType: 'groupedColumn', secondaryAxis: false },
{ colId: 'pressure', chartType: 'line', secondaryAxis: true },
{ colId: 'temp', chartType: 'line', secondaryAxis: true }
],
aggFunc: 'sum',
});
The following series chart types are supported with combination charts:
- Line (
chartType: 'line'
) - Area (
chartType: 'Area'
) - Stacked Area (
chartType: 'stackedArea'
) - Grouped Column (
chartType: 'groupedColumn'
) - Stacked Column (
chartType: 'stackedColumn'
)
Note that only line
and area
series chart types can be plotted against a secondary axis.
The following example demonstrates the above configuration, note the following:
- The 'Rain' series uses a
groupedColumn
chart type and is plotted against the primary Y axis (secondaryAxis=false
) - 'Pressure' and 'Temp' use a
line
chart type and are plotted against separate secondary Y axes (secondaryAxis=true
) - Values are aggregated by the 'Month' category by setting
aggFunc: 'sum'
- Chart Ranges are hidden using
suppressChartRanges=true
Range Chart API
Range Charts can be created programmatically using:
The API returns a ChartRef
object when a chartContainer
is provided. This is the same structure that is provided to the createChartContainer(chartRef)
callback. The ChartRef
provides the application with the destroyChart()
method that is required when the application wants to dispose the chart.
Next Up
Continue to the next section to learn about the Pivot Chart API.