Charts Plugin

Charting in AdapTable is provided courtesy of the Infragistics Charting Library.

Charts can be provided either at design-time through Predefined Config or built at run-time.

There are a huge number of options available when creating charts and all charts are automatically persisted as part of Adaptable State.

important

Charts are 'live' so they will update in real time as the underlying data changes.

Using the Charts Plugin

To use the AdapTable plugins you need to do the following:

  1. Install the package you need in npm:

    npm install @adaptabletools/adaptable-plugin-charts
    You must install the same version of the Plugin as you use for the 'core' AdapTable package. AdapTable will send a warning message to the console if these are different
  2. Import the Plugin in your code when instantiating AdapTable:

    import charts from "@adaptabletools/adaptable-plugin-charts";
  3. Add the Plugin to the plugins property in AdaptableOptions:

    const adaptableOptions: AdaptableOptions = {
    primaryKey: "OrderId",
    adaptableId: "Plugin Demo",
    // call the plugins functions and pass them to plugins array
    plugins: [charts()],
    .....
    }

Chart Types

The currently available Charts are:

Category Charts

Category Charts are charts that let you see data in a typical X and Y axis form.

In the Category Chart wizard you need to select:

  • One or more Y Axis (Vertical) Columns (numeric only)

  • An X Axis (Horizontal) Column

note

You can create a Query to reduce the number of values retrieved in the X Axis (see Queries for more details on creating queries).

tip

There are a huge amount of different options and properties you can set for Category Charts including Chart Type (e.g. column, line etc), Annotations, Callouts, Transitions and much else.

Pie Charts

This Module allows you to see the contents of a Column in Pie or Doughnut Chart form.

In the Pie Chart wizard you need to select:

  • Primary Column

  • Secondary Column (optional)

You can choose whether to see the chart as Pie Chart or Doughnut. You are also able to specify 'Others' to group together the smallest set of values.

tip

As well as being able to create a saveable Pie Chart, you are also able to see a whole column as a Pie Chart (via the Column Header menu) or a range of selected cells (via the Context menu).

caution

If there are too many values to view individually (e.g. if its a numeric column) then AdapTable will group the values into ranges for you.

Sparklines

Sparklines are ideal for seeing data as a range.

tip

Like with Pie Charts, as well as being able to create a saveable Sparkline, you are also able to see a whole column as a Sparkline (via the Column Header menu) or a range of selected cells (via the Context menu).

You can choose whether to see the Sparkline as Line, Column or Area.

Financial Charts

TODO...

Chart Menu Items

There are 2 sets of extra menu items available if using the Chart Plugin

note

These are available in both the Column Menu and the Context Menu

View As Pie Chart

This allows users to select a column - or highlight a group of cells in a column - and see them as a Pie Chart.

View As Sparkline

The (View As) Sparkline Module enables users to highlight a column or group of cells in a column and see them as a Sparkline.

Sparkline Column

A Sparkline Column is a column which contains an array of numbers as its value.

As a result, each cell in the column can be represented as an inline Sparkline chart.

tip

Sparkline Columns are particularly useful if you have pricing or historical data.

warning

By their nature Sparkline columns require more intensive rendering than normal columns so use sparingly or take into account the extra time it will take to render the Sparkline.

important

The Column Type of a Sparline Column should be abColDefNumberArray

Sparkline Column Properties

Each Sparkline Column contains the following properties:

PropertyDescription
ColumnIdId of the Column
LineColorColour of Sparkline line (if Type is 'Line')
MaximumValueMaximum value for Sparkline chart of column
MinimumValueMinimum value for Sparkline chart of column
ShowToolTipShows tooltip displaying underlying Sparkline values
SparklineTypeType of Sparkline Chart: 'Line', 'Column' or 'Area'
// Create 2 Sparkline Columns
// 1. 'Prices' - which uses default settings
// 2. 'Values' - which sets a min and max value, makes the Sparkline type 'Line'
// and also displays the tooltip
export default {
SparklineColumn: {
SparklineColumns: [
{
ColumnId: 'Prices',
},
{
ColumnId: 'Values',
MinimumValue: 20,
MaximumValue: 1000,
SparklineType: 'Line'
ShowToolTip: true
},
],
},
} as PredefinedConfig;

Sparkline Column API

MethodDescription
getAllSparklineColumn()Returns all Sparkline columns in Adaptable State
getSparklineByColumn(columnId)Returns a Sparkline column by id
getSparklineColumnState()Retrieves SparklineColumn section from Adaptable State
isSparklineColumn(columnId)True if the Column with given columnId is Sparkline Column

Sparkline Column Config

PropertyDescription
SparklineColumnsList of columns to be displayed as Sparkline

User Interface Elements

ModuleWizardToolbarTool PanelColumn MenuContext Menu
ChartsYesYesYesNoNo
Sparkline ColumnNoNoNoYesYes

Chart Plugin Options

There are a few Options available for managing Charts in Adaptable:

PropertyDescriptionDefault
displayOnStartUpWhether a chart is displayed at start-up; only applies if CurrentChartName property in Chart State is setfalse
pieChartMaxItemsMaximum number of items to show in a pie chart.50
showModalDisplays charts in a modal popup; if false, charts appear in the div specified im chartContainer property of Container Optionsfalse

A few of these are of interest...

Display On StartUp

Specifies whether a chart is displayed at start up.

caution

This property only applies if the CurrentChartName property in Chart State is not empty

Show Modal

Set whether to show charts in a modal popup.

If set to true, then we ignore the chartContainer property in Container Options when working out where to display the chart.

note

If the property is false, charts will appear in the div element that is specified in chartContainer property

Pie Chart Max Items

Sets the maximum number of items to show in a pie chart.

warning

This only applies to non numeric columns, because for numeric columns we create bands automatically.

tip

Avoid making the number too big, as then the pie chart will be difficult to read

Example

chartPluginOptions = {
displayOnStartUp: true,
showModal: false,
pieChartMaxItems: 30,
};

Chart Predefined Config

The Predefined Configuration for the Chart Module

Property
ChartDefinitions
CurrentChartName
RefreshRate

Chart API

Provides run-time access to the Chart Plugin.

MethodDescription
getAllChartDefinitions()Returns all the Chart Definitions in the State
getChartState()Retrieves the Chart section of Adaptable State
getPluginOptions()
showChartPopup()Opens the Chart popup screen

FAQ

How many Charts Type are there?

Currently 2 (Category and Doughnut) but more to come in due course.

The Charts package is very large - can I avoid using and downloading it?

Yes, Charting as of Version 6 (January 2020) is provided as an Adaptable Plugin; so if you don't want to use Charting then simply don't request the Charting Plugin.

Can I create a Sparkline Column at runtime?

No, they can only be created at design time as they only work on columns which contain an array of number values.

For the same reason you cannot delete a Sparkline column at runtime (but you can edit one).

More Information

Visit the Charts Demos to see AdapTable running with the Charts plugin.