Skip to main content

Reference

 

Applies only to Web Applications
OutSystems

Charts API

Component with widgets for plotting charts in web apps.

Summary

Widgets
AreaChart Area charts illustrate the contribution of values to a total over time.
BarChart Bar charts compare multiple values using horizontal bars.
In this chart, the X-axis runs vertically and the Y-axis runs horizontally.
ColumnChart Column charts compare multiple values using vertical bars.
LineChart Line charts illustrate trends of values over time.
PieChart Pie charts illustrate proportions of values.

 

Actions
AdvancedFormat_Init Initializes an AdvancedFormat record with the values passed as arguments. The record is returned by the action.
ChartFormat_Init Initializes a ChartFormat record with the values passed as arguments. The record is returned by the action.
DataPoint_GetClicked Returns the data point that was clicked on the chart.
Execute this action in the On Click action of a chart.
DataPoint_Init Initializes a DataPoint record with the values passed as arguments. The record is returned by the action.
DataPoint_InitMissing Initializes a DataPoint to plot a gap on the chart. The record is returned by the action.
XAxisFormat_Init Initializes an XAxisFormat record with the values passed as arguments. The record is returned by the action.
YAxisFormat_Init Initializes an YAxisFormat record with the values passed as arguments. The record is returned by the action.

 

Structures
AdvancedDataPointFormat Information to format a data point using Highcharts JSON.
AdvancedDataSeriesFormat Information to format a data series using Highcharts JSON.
AdvancedFormat Information to format chart elements using Highcharts JSON.
ChartFormat Information to format the chart.
DataPoint Information to plot a data point on the chart.
XAxisFormat Information to format the X-axis on the chart.
YAxisFormat Information to format the Y-axis on the chart.
Static Entities
LegendPosition The position where the legend is displayed on charts.
StackingType The way to plot multiple data series on Area, Bar, or Column charts:
- ‘NoStacking’: plot data series side by side to compare them;
- ‘Stacked’: plot data series stacked to show their contribution to a total;
- ‘Stacked100Percent’: plot data series stacked to show their percentage in a total.
XAxisValuesType The data type of labels displayed on the X-axis to format them.
Using ‘Auto’ means the type is inferred from the label of the first data point.

Widgets

AreaChart

Area charts illustrate the contribution of values to a total over time.

Inputs
SourceDataPointList
Type: DataPoint List.
The list of all data points to be plotted on the chart.
StackingType
Type: StackingType Identifier.
The way to plot multiple data series on the chart:
- ‘NoStacking’: plot data series overlapped to compare them;
- ‘Stacked’: plot data series stacked to show their contribution to a total;
- ‘Stacked100Percent’: plot data series stacked to show their percentage in a total.
‘Stacked’ is the default option.
Height
Type: Integer.
The vertical size of the chart in pixels (300 by default).
The horizontal size of the chart is the parent’s width.
LegendPosition
Type: LegendPosition Identifier.
The position where the legend is displayed on the chart (‘Bottom’ by default).
The legend is hidden if no series name is set in any data point.
XAxisFormat
Type: XAxisFormat.
Formatting options for the X-axis.
Action XAxisFormat_Init helps to create and initialize this parameter.
YAxisFormat
Type: YAxisFormat.
Formatting options for the Y-axis.
Action YAxisFormat_Init helps to create and initialize this parameter.
ChartFormat
Type: ChartFormat.
Formatting options for the chart.
Action ChartFormat_Init helps to create and initialize this parameter.
Clickable
Type: Boolean.
Set to True to allow clicking on plotted values and execute the On Click action (False by default).
AdvancedFormat
Type: AdvancedFormat.
Highcharts JSON to format elements displayed on the chart.
Action AdvancedOptions_Init helps to create and initialize this parameter.

BarChart

Bar charts compare multiple values using horizontal bars.
In this chart, the X-axis runs vertically and the Y-axis runs horizontally.

Inputs
SourceDataPointList
Type: DataPoint List.
The list of all data points to be plotted on the chart.
StackingType
Type: StackingType Identifier.
The way to plot multiple data series on the chart:
- ‘NoStacking’: plot data series side by side to compare them;
- ‘Stacked’: plot data series stacked to show their contribution to a total;
- ‘Stacked100Percent’: plot data series stacked to show their percentage in a total.
‘NoStacking’ is the default option.
Height
Type: Integer.
The vertical size of the chart in pixels (300 by default).
The horizontal size of the chart is the parent’s width.
LegendPosition
Type: LegendPosition Identifier.
The position where the legend is displayed on the chart (‘Bottom’ by default).
The legend is hidden if no series name is set in any data point.
XAxisFormat
Type: XAxisFormat.
Formatting options for the X-axis.
Action XAxisFormat_Init helps to create and initialize this parameter.
YAxisFormat
Type: YAxisFormat.
Formatting options for the Y-axis.
Action YAxisFormat_Init helps to create and initialize this parameter.
ChartFormat
Type: ChartFormat.
Formatting options for the chart.
Action ChartFormat_Init helps to create and initialize this parameter.
Clickable
Type: Boolean.
Set to True to allow clicking on plotted values and execute the On Click action (False by default).
AdvancedFormat
Type: AdvancedFormat.
Highcharts JSON to format elements displayed on the chart.
Action AdvancedOptions_Init helps to create and initialize this parameter.

ColumnChart

Column charts compare multiple values using vertical bars.

Inputs
SourceDataPointList
Type: DataPoint List.
The list of all data points to be plotted on the chart.
StackingType
Type: StackingType Identifier.
The way to plot multiple data series on the chart:
- ‘NoStacking’: plot data series side by side to compare them;
- ‘Stacked’: plot data series stacked to show their contribution to a total;
- ‘Stacked100Percent’: plot data series stacked to show their percentage in a total.
‘NoStacking’ is the default option.
Height
Type: Integer.
The vertical size of the chart in pixels (300 by default).
The horizontal size of the chart is the parent’s width.
LegendPosition
Type: LegendPosition Identifier.
The position where the legend is displayed on the chart (‘Bottom’ by default).
The legend is hidden if no series name is set in any data point.
XAxisFormat
Type: XAxisFormat.
Formatting options for the X-axis.
Action XAxisFormat_Init helps to create and initialize this parameter.
YAxisFormat
Type: YAxisFormat.
Formatting options for the Y-axis.
Action YAxisFormat_Init helps to create and initialize this parameter.
ChartFormat
Type: ChartFormat.
Formatting options for the chart.
Action ChartFormat_Init helps to create and initialize this parameter.
Clickable
Type: Boolean.
Set to True to allow clicking on plotted values and execute the On Click action (False by default).
AdvancedFormat
Type: AdvancedFormat.
Highcharts JSON to format elements displayed on the chart.
Action AdvancedOptions_Init helps to create and initialize this parameter.

LineChart

Line charts illustrate trends of values over time.

Inputs
SourceDataPointList
Type: DataPoint List.
The list of all data points to be plotted on the chart.
Height
Type: Integer.
The vertical size of the chart in pixels (300 by default).
The horizontal size of the chart is the parent’s width.
LegendPosition
Type: LegendPosition Identifier.
The position where the legend is displayed on the chart (‘Bottom’ by default).
The legend is hidden if no series name is set in any data point.
XAxisFormat
Type: XAxisFormat.
Formatting options for the X-axis.
Action XAxisFormat_Init helps to create and initialize this parameter.
YAxisFormat
Type: YAxisFormat.
Formatting options for the Y-axis.
Action YAxisFormat_Init helps to create and initialize this parameter.
ChartFormat
Type: ChartFormat.
Formatting options for the chart.
Action ChartFormat_Init helps to create and initialize this parameter.
Clickable
Type: Boolean.
Set to True to allow clicking on plotted values and execute the On Click action (False by default).
AdvancedFormat
Type: AdvancedFormat.
Highcharts JSON to format elements displayed on the chart.
Action AdvancedOptions_Init helps to create and initialize this parameter.

PieChart

Pie charts illustrate proportions of values.

Inputs
SourceDataPointList
Type: DataPoint List.
The list of all data points to be plotted on the chart.
Height
Type: Integer.
The vertical size of the chart in pixels (300 by default).
The horizontal size of the chart is the parent’s width.
LegendPosition
Type: LegendPosition Identifier.
The position where the legend is displayed on the chart (‘Bottom’ by default).
ChartFormat
Type: ChartFormat.
Formatting options for the chart.
Action ChartFormat_Init helps to create and initialize this parameter.
Clickable
Type: Boolean.
Set to True to allow clicking on plotted values and execute the On Click action (False by default).
AdvancedFormat
Type: AdvancedFormat.
Highcharts JSON to format elements displayed on the chart.
Action AdvancedOptions_Init helps to create and initialize this parameter.

Actions

AdvancedFormat_Init

Initializes an AdvancedFormat record with the values passed as arguments. The record is returned by the action.

Inputs

DataPointFormats
Type: optionalAdvancedDataPointFormat List.
Advanced JSON formatting for the data points.
DataSeriesFormats
Type: optionalAdvancedDataSeriesFormat List.
Advanced JSON formatting for the data series.
XAxisJSON
Type: optional, Text.
Advanced JSON formatting for the X-axis.
Refer to Highcharts API (http://api.highcharts.com/highcharts#xAxis) for all available options.

As an example, format the dates on the X-axis to "MMM YYYY" using the following Highcharts JSON:
"labels:{ formatter: function() { return Highcharts.dateFormat('%b %Y', this.value); } }"
YAxisJSON
Type: optional, Text.
Advanced JSON formatting for the Y-axis.
Refer to Highcharts API (http://api.highcharts.com/highcharts#yAxis) for all available options.

As an example, prevent using decimals in the axis values using the following Highcharts JSON:
"allowDecimals: false"
HighchartsJSON
Type: optional, Text.
Advanced JSON formatting for any element of the chart.
Refer to Highcharts API (http://api.highcharts.com/highcharts) for all available options.

Outputs

AdvancedFormat
Type: AdvancedFormat.
The initialized AdvancedFormat record.

ChartFormat_Init

Initializes a ChartFormat record with the values passed as arguments. The record is returned by the action.

Inputs

ShowDataPointValues
Type: optional, Boolean.
Set to True to display the value of the data points.
UseAnimation
Type: optional, Boolean.
Set to True to plot the chart with animation.

Outputs

ChartFormat
Type: ChartFormat.
The initialized ChartFormat record.

DataPoint_GetClicked

Returns the data point that was clicked on the chart.
Execute this action in the On Click action of a chart.

Outputs

DataPoint
Type: DataPoint.
The clicked Data Point.

DataPoint_Init

Initializes a DataPoint record with the values passed as arguments. The record is returned by the action.

Inputs

Label
Type: mandatory, Text.
The label on the X-axis for the data point.
To display dates in the X-axis use the Platform Server date format (by default YYYY-MM-DD).
Value
Type: mandatory, Decimal.
The value to be plotted.
DataSeriesName
Type: optional, Text.
Name of the series where the data point belongs.
Tooltip
Type: optional, Text.
Custom tooltip for the data point when hovering the mouse.
Color
Type: optional, Text.
Custom color for the data point.

Outputs

DataPoint
Type: DataPoint.
The initialized DataPoint record.

DataPoint_InitMissing

Initializes a DataPoint to plot a gap on the chart. The record is returned by the action.

Inputs

Label
Type: mandatory, Text.
The label on the X-axis for the data point.
To display dates in the X-axis use the Platform Server date format (by default YYYY-MM-DD).
DataSeriesName
Type: optional, Text.
Name of the series where the data point belongs.

Outputs

DataPoint
Type: DataPoint.
The initialized DataPoint record.

XAxisFormat_Init

Initializes an XAxisFormat record with the values passed as arguments. The record is returned by the action.

Inputs

Title
Type: optional, Text.
The text displayed next to the X-axis.
LabelsRotation
Type: optional, Integer.
The rotation in degrees of all labels displayed on the X-axis.
MinValue
Type: optional, Text.
The minimum value that is displayed on the X-axis.
MaxValue
Type: optional, Text.
The maximum value that is displayed on the X-axis.
ValuesType
Type: optional, XAxisValuesType Identifier.
The data type of labels displayed on the X-axis to format them.
Using ‘Auto’ means the type is inferred from the label of the first data point.

Outputs

XAxisFormat
Type: XAxisFormat.
The initialized XAxisFormat record.

YAxisFormat_Init

Initializes an YAxisFormat record with the values passed as arguments. The record is returned by the action.

Inputs

Title
Type: optional, Text.
The text displayed next to the Y-axis.
MinValue
Type: optional, Decimal.
The minimum value that is displayed on the Y-axis.
MaxValue
Type: optional, Decimal.
The maximum value that is displayed on the Y-axis.
ValuesPrefix
Type: optional, Text.
The text prefixing the values displayed on the Y-axis.
ValuesSuffix
Type: optional, Text.
The text suffixing the values displayed on the Y-axis.
GridLineStep
Type: optional, Decimal.
The step by which grid lines are displayed on the Y-axis.

Outputs

YAxisFormat
Type: YAxisFormat.
The initialized YAxisFormat record.

Structures

AdvancedDataPointFormat

Information to format a data point using Highcharts JSON.

Attributes
DataPoint
Type: DataPoint.
Data point to format.
DataPointJSON
Type: Text (50).
Highcharts JSON to format the data point.
Refer to Highcharts API (http://api.highcharts.com/highcharts#series.data) for all available options.

As an example, show a custom data label in this point, using the following Highcharts JSON:
"dataLabels: { enabled: true, formatter: function () { return 'top value' } }"

AdvancedDataSeriesFormat

Information to format a data series using Highcharts JSON.

Attributes
DataSeriesName
Type: Text (50).
Name of the data series to format.
DataSeriesJSON
Type: Text (50).
Highcharts JSON to format the data series.
All data points belonging to the data series are affected by this formatting.
Refer to Highcharts API (http://api.highcharts.com/highcharts#series and http://api.highcharts.com/highcharts...Options.series) for all available options.

As an example, plot a series with a thicker line in a Line chart using the following Highcharts JSON:
"lineWidth: 5"

AdvancedFormat

Information to format chart elements using Highcharts JSON.

Attributes
DataPointFormats
Type: AdvancedDataPointFormat List.
Highcharts JSON to format data points.
DataSeriesFormats
Type: AdvancedDataSeriesFormat List.
Highcharts JSON to format data series.
XAxisJSON
Type: Text (50).
Highcharts JSON to format the X-axis.
Refer to Highcharts API (http://api.highcharts.com/highcharts#xAxis) for all available options.

As an example, format the dates on the X-axis to "MMM YYYY" using the following Highcharts JSON:
"labels:{ formatter: function() { return Highcharts.dateFormat('%b %Y', this.value); } }"
YAxisJSON
Type: Text (50).
Highcharts JSON to format the Y-axis.
Refer to Highcharts API (http://api.highcharts.com/highcharts#yAxis) for all available options.

As an example, prevent using decimals in the axis values using the following Highcharts JSON:
"allowDecimals: false"
HighchartsJSON
Type: Text (50).
Highcharts JSON to format any element of the chart.
Refer to Highcharts API (http://api.highcharts.com/highcharts) for all available options.

ChartFormat

Information to format the chart.

Attributes
ShowDataPointValues
Type: Boolean.
Set to True to display the value of the data points.
UseAnimation
Type: Boolean.
Set to True to plot the chart with animation.

DataPoint

Information to plot a data point on the chart.

Attributes
Label
Type: Text (50).
The label on the X-axis for the data point.
To display dates in the X-axis use the Platform Server date format (by default YYYY-MM-DD).
Value
Type: Decimal (37, 0).
The value to be plotted.
DataSeriesName
Type: Text (50).
Name of the series where the data point belongs.
Tooltip
Type: Text (50).
Custom tooltip for the data point when hovering the mouse.
Color
Type: Text (50).
Custom color for the data point.

As an example, set the color of a data point to red using either of the following values: "Red", "#FF0000", "rgb(255,0,0)" or "rgba(255,0,0,1)"

XAxisFormat

Information to format the X-axis on the chart.

Attributes
Title
Type: Text (50).
The text displayed next to the X-axis.
LabelsRotation
Type: Integer.
The counterclockwise rotation in degrees of all labels displayed on the X-axis.
MinValue
Type: Text (50).
The minimum value that is displayed on the X-axis.
MaxValue
Type: Text (50).
The maximum value that is displayed on the X-axis.
ValuesType
Type: XAxisValuesType Identifier.
The data type of labels displayed on the X-axis to format them.
Using ‘Auto’ means the type is inferred from the label of the first data point.

YAxisFormat

Information to format the Y-axis on the chart.

Attributes
Title
Type: Text (50).
The text displayed next to the Y-axis.
MinValue
Type: Decimal (37, 0).
The minimum value that is displayed on the Y-axis.
MaxValue
Type: Decimal (37, 0).
The maximum value that is displayed on the Y-axis.
ValuesPrefix
Type: Text (50).
The text prefixing the values displayed on the Y-axis.
ValuesSuffix
Type: Text (50).
The text suffixing the values displayed on the Y-axis.
GridLineStep
Type: Decimal (37, 0).
The step by which grid lines are displayed on the Y-axis.

Static Entities

LegendPosition

The position where the legend is displayed on charts.

Attributes
Id
Type: Integer.
Order
Type: Integer.
Is_Active
Type: Boolean.
Records:
  • Bottom
  • Top
  • Hidden
  • Inside
  • Right
  • Left

StackingType

The way to plot multiple data series on Area, Bar, or Column charts:
- ‘NoStacking’: plot data series side by side to compare them;
- ‘Stacked’: plot data series stacked to show their contribution to a total;
- ‘Stacked100Percent’: plot data series stacked to show their percentage in a total.

Attributes
Id
Type: Integer.
Order
Type: Integer.
Is_Active
Type: Boolean.
Records:
  • NoStacking
  • Stacked100Percent
  • Stacked

XAxisValuesType

The data type of labels displayed on the X-axis to format them.
Using ‘Auto’ means the type is inferred from the label of the first data point.

Attributes
Id
Type: Integer.
Label
Type: Text (50).
Order
Type: Integer.
Records:
  • Text
  • Auto
  • Was this article helpful?