Creating a chart widget is no different than creating other widgets in OutSystems. For example, to create a Column Chart:
- Drag Column Chart widget to a screen.
- In the SourceDataPointList property of the widget select the DataPoint list used for chart drawing.
- 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.
- Create a screen and add these local parameters:
DataPointList(data type is DataPoint List),
- If in Web, create Preparation. If in Mobile, open OnReady action.
- Add an Assign tool (label it "Initialize") and assign
MaxSteps = 10and
Count = 1.
- Add another Assign tool (label it "Values to DataPoint") and assign
DataPoint.Value = Countand
DataPoint.Label = IntegerToText(Count).
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:
Add another Assign tool, label it "Increment Count" and increment
Countby one (
Count = Count + 1).
- Connect to the If tool and check if
Countis 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
This will render the chart like this:
Using multiple series
For creating a chart with multiple series you need to generate a
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: