AdapTable Version:

Framework:

Configuring Charts

Summary

AG Grid Charts can be defined and saved with AdapTable State
Locations can be provided where AG Grid Charts can be displayed

Defining Charts

AdapTable allows developers to define Charts and save them in Adaptable State.

Hint

This can be done at design-time and the AG Grid Charting Model can be part of the definition
But more typically it will be done via the methods in Charting API

Each Chart Definition contains just 2 properties:

Name of the Chart - how it appears in the AdapTable UI
Chart Model - the underlying AG Grid Chart definition

Providing Chart Locations

AdapTable also allows developers to provide details Chart Locations.

This is done through the chartContainers property of Charting Options.

Each location contains a Name and a reference to the Div elememnt where Charts can be displayed.

Deep Dive

Understanding Chart Containers

The ChartContainer object is defined as follows:

Property	Description	Default
chartsDisplay	Whether 1 or more Charts can be displayed in same location	'single'
element	Location - can be HTMLElement or CSS Selector
name	Name of Container's Location - used in Dropdowns

As can be seen it allows for 2 things to be configured:

the Div where the Chart is displayed - provided either by name or as an element
whether more than one Chart can be displayed in the Container - by setting the chartsDisplay property

The default Chart Container is the one provided by AG Grid and named 'AG Grid Window' by AdapTable

Hint

Use the agGridContainerName property in Charting Options to provide a different name for this container

Chart Locations

Fork Fork

This example demonstrates how to define Charts and Chart Locations
2 Charts are provided in Charts Initial Adaptable State:
- Top Frameworks - a Pie Chart
- Issues and PRs - a 100% stacked Bar Chart
2 Chart locations are provided in the chartContainers property of Charting Options:
- Top Window - appears above the Grid
- Bottom Window - appears below the Grid
Additionally the agGridContainerName property has been set to 'Over Grid' - which overrides default property of 'AG Grid Window'

Expand to see the 2 Chart Locations provided

chartingOptions: {
  saveChartBehaviour: 'manual',
  chartContainers: [
    {
      name: 'Top Window',
      element: topChartContainer,
    },
    {
      name: 'Bottom Window',
      element: '#demoOutputBelow',
    },
  ],
},

Try It Out

Open Top Frameworks in the Top Window chart location
Open Issues and PR's in the Bottom Window chart location

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Chart Locations',
  chartingOptions: {
    chartContainers: [
      {
        name: 'Above Grid',
        element: '#demoOutputAbove',
      },
      {
        name: 'Below Grid',
        element: '#demoOutputBelow',
      },
    ],
    agGridContainerName: 'Over Grid',
  },
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Charting', Toolbars: ['Charting']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Charting'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},

    Charting: {
      ChartDefinitions: [
        {
          Name: 'Top Frameworks',
          Model: {
            modelType: 'range',
            chartId: 'frameworks-pie',
            chartType: 'pie',
            chartThemeName: 'ag-vivid-dark',
            chartOptions: {
              pie: {
                background: {
                  visible: true,
                },
                padding: {
                  top: 20,
                  right: 20,
                  bottom: 20,
                  left: 20,
                },
                title: {
                  enabled: false,
                },
                subtitle: {
                  enabled: false,
                },
                legend: {
                  enabled: true,
                  position: 'right',
                },
                tooltip: {
                  enabled: true,
                },
                series: {
                  tooltip: {
                    enabled: true,
                  },
                  showInLegend: true,
                  cursor: 'default',
                  title: {
                    enabled: false,
                  },
                  calloutLabel: {
                    enabled: true,
                  },
                  sectorLabel: {
                    enabled: true,
                  },
                  calloutLine: {
                    length: 10,
                    strokeWidth: 2,
                  },
                },
              },
            },
            cellRange: {
              rowStartIndex: 0,
              rowEndIndex: 4,
              columns: ['name', 'github_stars'],
            },
            suppressChartRanges: false,
            unlinkChart: false,
          },
        },

        {
          Name: 'Issues & PRs',
          Model: {
            modelType: 'range',
            chartId: 'issues-bar',
            chartType: 'normalizedBar',
            chartThemeName: 'ag-vivid-dark',
            chartOptions: {
              bar: {
                background: {
                  visible: true,
                },
                padding: {top: 20, right: 20, bottom: 20, left: 20},
                title: {
                  enabled: false,
                },
                subtitle: {
                  enabled: false,
                },
                legend: {
                  enabled: true,
                  position: 'right',
                  spacing: 20,
                },
                tooltip: {
                  enabled: true,
                },
              },
            },
            cellRange: {
              rowStartIndex: 0,
              rowEndIndex: 9,
              columns: [
                'name',
                'open_issues_count',
                'closed_issues_count',
                'closed_pr_count',
                'open_pr_count',
              ],
            },
            suppressChartRanges: false,
            unlinkChart: false,
          },
        },
      ],
    },

    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'github_stars',
            'name',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'github_watchers',
            'language',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          ColumnSorts: [{ColumnId: 'github_stars', SortOrder: 'Desc'}],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Multiple Charts in a Location

By default AdapTable will display one chart in each provided Location.

This means that loading a new chart will displace any currently displayed Chart.

This behaviour can be changed by setting chartsDisplay in Charting Options to 'multiple'.

When this property is set, charts are appended to the Div.

Caution

To place multiple charts in a container, it needs a fixed height - e.g. max-height or display: flex
Without this the charts will agrow inside the Div infinitely

Multiple Charts in Location

Fork Fork

This example demonstrates how to show multiple charts in the same location:
- The chartsDisplay property in Charting Options has been set to 'multiple'
- An Above Grid Chart Container has been provided, together with 2 Chart Definitions
- The Chart Container has display: flex to allow multiple Charts to be shown
- In the Adaptable Ready Event we use Charting API methods to display the 2 Charts in the Container

Expand to see how the Charts were displayed

Charting Options is defined as this:

chartingOptions: {
  saveChartBehaviour: 'manual',
  chartContainers: [
    {
      name: 'Above Grid',
      element: topChartContainer,
      chartsDisplay: 'multiple',
    },
  ],
},

The AdaptableReady event contains this code:

const adaptableApi: AdaptableApi = readyInfo.adaptableApi;
const topChartContainer = document.getElementById('demoOutputAbove') as HTMLDivElement;
const chartDefs: ChartDefinition[] = adaptableApi.chartingApi.getChartDefinitions();
adaptableApi.chartingApi.showChartDefinition(chartDefs[0], topChartContainer);
adaptableApi.chartingApi.showChartDefinition(chartDefs[1], topChartContainer);

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Multiple Charts',
  chartingOptions: {
    chartContainers: [
      {
        name: 'Above Grid',
        element: '#demoOutputAbove',
        chartsDisplay: 'multiple',
      },
    ],
  },
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Charting', Toolbars: ['Charting']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Charting'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Charting: {
      ChartDefinitions: [
        {
          Name: 'Top Frameworks',
          Model: {
            modelType: 'range',
            chartId: 'frameworks-pie',
            chartType: 'pie',
            chartThemeName: 'ag-vivid-dark',
            chartOptions: {
              pie: {
                background: {
                  visible: true,
                },
                padding: {
                  top: 20,
                  right: 20,
                  bottom: 20,
                  left: 20,
                },
                title: {
                  enabled: false,
                },
                subtitle: {
                  enabled: false,
                },
                legend: {
                  enabled: true,
                  position: 'right',
                },
                tooltip: {
                  enabled: true,
                },
                series: {
                  tooltip: {
                    enabled: true,
                  },
                  showInLegend: true,
                  title: {
                    enabled: false,
                  },
                  calloutLabel: {
                    enabled: true,
                  },
                  sectorLabel: {
                    enabled: true,
                  },
                  calloutLine: {
                    length: 10,
                    strokeWidth: 2,
                  },
                },
              },
            },
            cellRange: {
              rowStartIndex: 0,
              rowEndIndex: 4,
              columns: ['name', 'github_stars'],
            },
            suppressChartRanges: false,
            unlinkChart: false,
          },
        },
        {
          Name: 'Issues & PRs',
          Model: {
            modelType: 'range',
            chartId: 'issues-bar',
            chartType: 'normalizedBar',
            chartThemeName: 'ag-vivid-dark',
            chartOptions: {
              bar: {
                background: {
                  visible: true,
                },
                padding: {top: 20, right: 20, bottom: 20, left: 20},
                title: {
                  enabled: false,
                },
                subtitle: {
                  enabled: false,
                },
                legend: {
                  enabled: true,
                  position: 'right',
                },
                tooltip: {
                  enabled: true,
                },
                series: {
                  tooltip: {
                    enabled: true,
                  },
                  showInLegend: true,
                },
                navigator: {
                  enabled: false,
                },
              },
            },
            cellRange: {
              rowStartIndex: 0,
              rowEndIndex: 9,
              columns: [
                'name',
                'open_issues_count',
                'closed_issues_count',
                'closed_pr_count',
                'open_pr_count',
              ],
            },
            suppressChartRanges: false,
            unlinkChart: false,
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'github_stars',
            'name',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'github_watchers',
            'language',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          ColumnSorts: [{ColumnId: 'github_stars', SortOrder: 'Desc'}],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Displaying Multiple Charts

(Recorded with AdapTable v14.0)

agGridContainerName

Default: AG Grid Window

String

Name of AG Grid Chart Container

Multiple containers can be provided for charts at design-time.

When this happens the container provided by AG Grid (which appears in the middle of the screen) is added to the list.

By default this container is entitled "AG Grid Window", but this property allows this container to be renamed.

// Rename the AG Grid container to "Grid"
const adaptableOptions: AdaptableOptions = {
  chartingOptions: {
   agGridContainerName: "Grid" 
  }
}

chartContainers

ChartContainer[]

Locations to display saved Charts

ChartContainer[]

Defines locations where AG Grid charts which have been saved into Adaptable State can be displayed.

These locations, if provided, appear in a dropdown in the Charting Toolbar and Tool Panel.

Caution

This doesn't override the createChartContainer property in AG Grid's GridOptions

The ChartContainer object is defined as follows:

Property	Description	Default
chartsDisplay	Whether 1 or more Charts can be displayed in same location	'single'
element	Location - can be HTMLElement or CSS Selector
name	Name of Container's Location - used in Dropdowns

Assuming you created your page like this:

<div id="top-chart-container"></div>
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
  <div id="adaptable" style={{ margin: 0 }} />
  <div id="grid"  style={{ flex: 1 }}></div>
</div>
<div id="chart-container-bottom"

You could define Chart Containers as follows:

// Get the HTML Element for chart-container
 const topChartContainer = document.getElementById('top-chart-container') as HTMLDivElement;

// Supply 2 Containers:
// 1. Placed above Grid and defined as an HTML Element, allowing multiple Charts
// 2. Placed below the Grid and referenced by name
const adaptableOptions: AdaptableOptions = {
  chartingOptions: {
   chartContainers: [
        {
          name: 'Above Grid',
          element: topChartContainer,
          chartsDisplay: 'multiple'
        },
        {
          name: 'Below Grid',
          element: '#chart-container-bottom',
        },
      ],
  },
}

saveChartBehaviour

Default: none

'auto' | 'manual' | 'none'

Behaviour for saving Charts into AdapTable State

By default AdapTable will not save any AG Grid charts the user creates into AdapTable State.

This property offers 3 options:

auto: all created charts are saved automatically in Adaptable state
manual: a popup is shown to the user to save the chart
none: charts are not saved

// Tell AdapTable to display a popup each time a new Chart is created
const adaptableOptions: AdaptableOptions = {
  chartingOptions: {
    saveChartBehaviour: 'manual',
  },
}

PreviousUsing Charts NextExternal Chart Libraries

Framework: