How-To

OutSystems Advanced Charts

How to create a single series, multiple series, and combination chart in OutSystems

OutSystems 11 used HighCharts components to create charts for Web and Mobile Applications. It takes a simple step to complete standard charts, such as Area, Bar, Column, Donut, Line, and Pie charts.

Before we try to create a chart, we need to know how to prepare the data to be fed into the chart component. OutSystems Chart uses a DataPoint structure to display a chart.

You can check, under the Data tab and Structure section, you can find the DataPoint structure definition.

DataPoint Structure

Here is the explanation for each of the fields in the DataPoint structure:

• Label: x-axis label name
• Value: value for the y-axis
• DataSeriesName: group name for multiple data
• Tooltip: a message which appears when the cursor is positioned over a data point. By default, it will contain a label and value.
• Color: color definition (hex format) for each of the x-axis.

If you want to customize the color for the DataSeries, you need to configure using Data Series Format.

Single Series Data Chart

For example, you have a 1-month data for weather conditions.

Example Data for Single Series Data Chart

You want to build charts to show the daily temperature.

For a simple use case, you don’t need to create a variable list of DataPoints.

1. Create a blank screen
2. Add “Fetch Data from Database”
3. Drag the “ColumnChart” component to the screen
4. Configure “SourceDataPointList” at the chart component to your data fetch
5. Map to the DataPoint structure

Chart Configuration

After 1-Click Publish, you can see the result:

Result for Single Series Data Chart

This is the example:

Legend positions configuration

Legend Configuration

Customize Data Series Color

Data Series Format at Advanced Format Properties

DataSeriesName => "Temperature"
DataSeriesJSON => "{color: '#ED8545'}"

Multiple Series Data Chart

For example, you have a 1-month data for weather conditions, for 2 cities.

Sample Data for Multiple Series Data Chart

Before starting, you need to prepare a variable, a List of DataPoint with a structure illustrated below:

Illustration List of DataPoint for Multiple Series Data Chart

1. Add “Fetch Data from Other Sources” with the output variable, a List of Datapoint

Fetch Data from Other Sources with List of DataPoint as Output Variable

2. Inside data fetch logic:

• Query “Jakarta” data and append it to the output variable with DataSeriesName “Jakarta”
• Query “Surabaya data and append it to the same output variable with DataSeriesName “Surabaya”

Data Fetch Logic to prepare data series

3. Configure “SourceDataPointList” at the chart component to your data fetch

4. Configure DataSeriesFormats for Data Series color

Data Series Format

After 1-Click Publish, you can see the result

Result for Multiple Series Data Chart

Multiple Series Data Chart with Different Types

As mentioned early, OutSystems uses the HighCharts component. If you need advanced customization, you can check HighCharts Demo and Documentation, to get more detailed information.

HighCharts Demo

Let's say you want to create a chart with dual axes by combining 2 types of chart (column and line), to compare Jakarta's Temperature and Humidity.

In order to achieve this scenario, you need to fetch the data and combine it into a variable list of DataPoint.

1. Add “Fetch Data from Other Sources” with the output variable, a List of DataPoint.

2. Inside the data fetch logic, add an iteration node (ForEach), and add Humidity and Temperature data.

Data Fetch Logic to prepare data series

3. Now, all the data is prepared and you can continue to configure the chart component.

4. Configure SourceDataPointList, DataSeriesFormats, and HighChartsJSON

Configuration for Advanced Data Series Format and HighCharts JSON

DataSeriesFormats for Temperature

// Temperature
"
    type: 'spline',
    color: '#c74b0e',
    tooltip: {
        valueSuffix: '°C'
    }
"

DataSeriesFormats for Humidity

// Temperature
"
    type: 'spline',
    color: '#c74b0e',
    tooltip: {
        valueSuffix: '°C'
    }
"

HighchartsJSON

"
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Jakarta: Temperature versus Humidity'
    },
    yAxis: [
        { // Primary yAxis
            labels: {
                format: '{value}°C'
            },
            title: {
                text: 'Temperature'
            }
        }, { // Secondary yAxis
            title: {
                text: 'Humidity'
            },
            labels: {
                format: '{value} %'
            },
            opposite: true
        }
    ]
"

After 1-Click Publish, you can see the result

Result for Multiple Series Data and Combination Chart

Finally

You can explore further using HighCharts documentation to create a more advanced chart and others possibilities.

Example Advanced Chart using OutSystems

As an alternate option, you can import another JavaScript chart to be used in OutSystems and extend the capabilities of Low Code without limitation.

Reference

https://success.outsystems.com/Documentation/11/Reference/OutSystems_APIs/Charts_API/Advanced_Charts_customization_with_JSON

How to Integrate Advanced HighCharts with OutSystems 11