Skip to main content

Reference

 

OutSystems

Create a Sample Chart

Creating a chart widget in no different than creating other widgets in OutSystems. For example, to create a Column Chart:

  1. Drag Column Chart widget to a screen.
  2. In the SourceDataPointList property of the widget select the DataPoint list used for chart drawing.
  3. Check the rest of the properties and publish the module.

To show basic properties of charts, here are instructions on how to generate some sample data and change the visual properties.

Generating sample data

Generate some sample data and pass it to the chart widget. After that change color, series label and tool tips.

  1. Create a screen and add these local parameters: DataPointList (data type is List), DataPoint (DataPoint), Count (Integer), MaxSteps (Integer).
  2. If in Web, create Preparation. If in Mobile, open OnReady action.
  3. Add an Assign tool (label it "Initialize") and assign MaxSteps = 10 and Count = 1.
  4. Add another Assign tool (label it "Values to DataPoint") and assign DataPoint.Value = 1 and DataPoint.Label = IntegerToText(Count).
  5. If in Web, add Run Server Action. If in Mobile add Run Client Action. Select ListAppend as the action. Connect “Values to DataPoint” and assign the values:

  6. Add another Assign tool, label it "Increment Count" and increment Count by one (Count = Count + 1).

  7. Connect to the If tool and check if Count is equal to MaxSteps. If True, end the loop. If False, connect to “Values to DataPoint”. The flow should look like this:

Creating a chart

Drag and drop a Column Chart widget to your screen and in SourceDataPointList property select the DataPointList you generated. Run the app. The platform will create this chart:

Modifying color, label, series name

To add the series name, labels and change color, add the properties in the DataPoint variable:

This will render the chart like this:

Using multiple series

For creating a chart with multiple series you need to generate a List with DataPoint elements with different DataSeriesName values. The platform will use DataSeriesName for creating different elements of the chart.

In this example we generated a list with series named "Data Series One" and "Data Series Two".

Here is an illustration of the data that was used to generate the chart:

  • Was this article helpful?