Using Charts

Summary

Run-time users can save and re-open AG Grid charts they have created
If Charting locations have been provided, they can choose where to display these charts

Run-time users of AdapTable can manage the charts which they create using AG Grid.

Saving Charts

AdapTable users can name and save charts into Adaptable State.

Note

This requires the saveChartBehaviour property in Charting Options to be set to manual

A Notification will appear prompting the user to provide a name for the Chart, whereupon the Chart is saved.

Opening Charts

Any AG Grid charts which have been named and saved will appear in a dropdown in:

the Charting Toolbar in the Dashboard
the Charting Tool Panel
the Charting Status Bar Panel

Selecting a chart in any of these and clicking 'Open' will display the Chart.

Hint

If specified Chart locations have been provided in Charting Options, users can select where to display the Chart
See Configuring Charts for more details on how to provide Chart locations

Opening Saved Charts

By default, AdapTable does not store details of which Charts are currently opened in which Containers.

However this is straightforward to do by leveraging the Application section of Adaptable State.

Hint

This can then be used to automatically re-open any Charts when the Application restarts

Displaying Saved Charts

Fork Fork

This example uses Application State to store details of which Charts were displayed
Charts have been placed in 2 Layouts

Try It Out

Switch between the 2 Layouts to see the Charts display in different Containers

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Charts in App state',
  chartingOptions: {
    saveChartBehaviour: 'manual',
    chartContainers: [
      {
        name: 'Top Container',
        chartsDisplay: 'multiple',
        element: '#demoOutputAbove',
      },
      {
        name: 'Bottom Container',
        element: '#demoOutputBelow',
      },
    ],
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Charting',
          Toolbars: ['Layout', 'Charting'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Charting'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Uuid: '22897acb-3ad1-4011-9fd0-0bf9f43d474e',
          Name: 'Standard Layout',
          TableColumns: [
            'github_stars',
            'github_watchers',
            'name',
            'language',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          AutoSizeColumns: true,
        },
        {
          Uuid: '04dff093-5388-4e9a-a320-6fd178e86260',
          Name: 'Demo Layout 2',
          TableColumns: [
            'github_stars',
            'github_watchers',
            'name',
            'language',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    // APP STATE - LAYOUT - OPEN CHARTS
    Application: {
      ApplicationDataEntries: [
        {
          Key: 'chartInLayout',
          Value: {
            '22897acb-3ad1-4011-9fd0-0bf9f43d474e': [
              {
                chartUuid: '8d2aff65-f44f-4363-b90b-51bd684399b4',
                containerName: 'Top Container',
              },
              {
                chartUuid: 'e6f19fdc-fdc2-4554-b7ae-47443bdbbad7',
                containerName: 'Top Container',
              },
            ],
            '04dff093-5388-4e9a-a320-6fd178e86260': [
              {
                chartUuid: 'e6f19fdc-fdc2-4554-b7ae-47443bdbbad7',
                containerName: 'Bottom Container',
              },
            ],
          },
        },
      ],
    },
    // CHARTING STATE
    Charting: {
      ChartDefinitions: [
        {
          Uuid: '8d2aff65-f44f-4363-b90b-51bd684399b4',
          Name: 'bar',
          Model: {
            modelType: 'range',
            chartId: 'frameworks-bar',
            chartType: 'groupedBar',
            chartThemeName: 'ag-vivid-dark',
            chartOptions: {},
            cellRange: {
              rowStartIndex: 4,
              rowEndIndex: 11,
              columns: ['name', 'github_watchers'],
            },
            suppressChartRanges: false,
            unlinkChart: false,
          },
        },
        {
          Uuid: 'e6f19fdc-fdc2-4554-b7ae-47443bdbbad7',
          Name: 'pie',
          Model: {
            modelType: 'range',
            chartId: 'frameworks-pie',
            chartType: 'pie',
            chartThemeName: 'ag-vivid-dark',
            chartOptions: {},
            cellRange: {
              rowStartIndex: 3,
              rowEndIndex: 9,
              columns: ['name', 'github_watchers'],
            },
            suppressChartRanges: false,
            unlinkChart: false,
          },
        },
      ],
    },
  },
};

Closing Charts

Any open chart can be closed from the same lcoations which which can open it.

Editing Charts

Charts can be edited by clicking the Edit button for that Chart in the Charts Settings Panel.

This will open the Wizard for that Chart allowing it be edited as requied.

Deleting Charts

Charts can be deleted by clicking the Delete button for that Chart in the Charts Settings Panel.

ReadOnly Charts

Individual Charts can be set to be ReadOnly if required.

Note

This will override the Module Entitlements for Charting

Read-Only Charts can be displayed and closed but they cannot be deleted.

There are 2 ways to set a Chart to Read-Only:

Setting IsReadOnly to true if providing the full Chart definition in Charting Initial State (a very rare use case)
Calling the setChartReadOnly function in Charting API
Hint
- You will likely need to add a Custom button somewhere to do this

Read-Only Charts

Fork Fork

This example contains 2 Charts:
- Bar Chart - which has a Full Entitlement and can be displayed, edited and deleted
- Pie Chart - which has a ReadOnly Entitlement and can be displayed but not edited or deleted

Try It Out

Switch between the 2 Charts and note how the Edit and Delete buttons in the Toolbar are alternately enabled / disabled

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Read only Charts',
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Charting',
          Toolbars: ['Charting'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Charting'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Uuid: '22897acb-3ad1-4011-9fd0-0bf9f43d474e',
          Name: 'Standard Layout',
          TableColumns: [
            'github_stars',
            'github_watchers',
            'name',
            'language',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          AutoSizeColumns: true,
        },
      ],
    },

    Charting: {
      ChartDefinitions: [
        {
          Uuid: '8d2aff65-f44f-4363-b90b-51bd684399b4',
          Name: 'Bar Chart',
          Model: {
            modelType: 'range',
            chartId: 'framework-bar',
            chartType: 'groupedBar',
            chartThemeName: 'ag-vivid-dark',
            chartOptions: {},
            cellRange: {
              rowStartIndex: 4,
              rowEndIndex: 11,
              columns: ['name', 'github_watchers'],
            },
            suppressChartRanges: false,
            unlinkChart: false,
          },
        },
        {
          Uuid: 'e6f19fdc-fdc2-4554-b7ae-47443bdbbad7',
          Name: 'Pie Chart',
          IsReadOnly: true,
          Model: {
            modelType: 'range',
            chartId: 'framework-pie',
            chartType: 'pie',
            chartThemeName: 'ag-vivid-dark',
            chartOptions: {},
            cellRange: {
              rowStartIndex: 3,
              rowEndIndex: 9,
              columns: ['name', 'github_watchers'],
            },
            suppressChartRanges: false,
            unlinkChart: false,
          },
        },
      ],
    },
  },
};

PreviousCharting NextConfiguring Charts

Framework: