OutSystems Platform 8.0 Update: See the discussion Using Charts in OutSystems Platform 8.0.
The goal of this HowTo is to give you an overview of how you can add charting capabilities to your OutSystems applications using the OutSystems Fusion Charts component.
Click here to see examples of the charts generated with the OutSystems Fusion Charts component. This sample application will not only show you the several types of charts available, but will also show you the parameters used in each of the examples.
To install the Fusion Charts component in your OutSystems installation, all you have to do is follow the simple steps below:
Click here to open the Fusion Charts component page and Download the component (you will get the FusionCharts.oml eSpace);
Open the FusionCharts.oml eSpace in Service Studio and publish it in your OutSystems platform installation;
Test your Fusion Charts installation by going to http://localhost/FusionCharts/ (you should see the sample charts screen);
Open your application in Service Studio, click Add/Remove References and Import the public FusionCharts web block;.
Use the FusionCharts Web Block in your web screen and pass the correct parameters to display the chart (see the parameters used in the sample application at http://localhost/FusionCharts/ for examples)
The fusion charts XML is normally very simple, so generating the XML depending on the data you have on the database can be done by simply doing some string manipulation. To get detailed documentation for each chart XML structure and options see the following resources:
Attached you have a sample eSpace FusionCharts_Sample.oml (click here to download it) that is a good example of the generation of the XML for a Multi Series 3D column chart. The goal is to show the Expenses of a household by Category from 2005 to 2010. To generate this chart XML, we use the data stored in two entities - YEARLY_EXPENSE and EXPENSE_TYPE.
Open the attached FusionCharts_Sample.oml in Service Studio to see how the chart XML is created in the HomePage preparation. Publish this eSpace in your OutSystems installation to see it working (sample data is automatically created). See below a screenshot of the action that generates the chart XML.
Naturally, the logic needed to generate each Chart will always depend on the type of chart you want to create and the logic needed to gather the necessary data. Nevertheless, the core principal is always the same - access and iterate your OutSystems Entities while you generate the chart XML.
In more complex situations you can also use the OutSystems XML component for XML manipulation.
To get detailed documentation for each chart XML structure and options see the following resources: