How To create Charts in OutSystems applications with the Fusion Charts component

How To create Charts in OutSystems applications with the Fusion Charts component

  

OutSystems Platform 8.0 Update: See the discussion Using Charts in OutSystems Platform 8.0.
 


Charting and Reporting are extremely common needs in OutSystems applications. There are several options available, and one of them is the OutSystems Fusion Charts component based on the Fusion Charts Free product (see http://www.fusioncharts.com/free/).

 

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.

1. How to Install the Fusion Charts component

To install the Fusion Charts component in your OutSystems installation, all you have to do is follow the simple steps below:

  1. Click here to open the Fusion Charts component page and Download the component (you will get the FusionCharts.oml eSpace);

  2. Open the FusionCharts.oml eSpace in Service Studio and publish it in your OutSystems platform installation;

  3. Test your Fusion Charts installation by going to http://localhost/FusionCharts/ (you should see the sample charts screen);

2. How to use the Fusion Charts component in an OutSystems Application

  1. Open your application in Service Studio, click Add/Remove References and Import the public FusionCharts web block;.

  2. 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)

3. How to generate the chart XML data based on the information in the database

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.

4. Where to find Fusion Charts detailed documentation

To get detailed documentation for each chart XML structure and options see the following resources:

Daniel Lourenço
OutSystems
Hi,
 
From version 6.0 the component ChartingServicesCore (wich relies on FusionCharts v3.2) is included in the System_Components.osp and you can use it instead.
You can see several examples of its usage in apps like Campaigns, Sales, Cases, etc...
 
Cheers,
Tiago Simões
@Tiago

Is Fusion Charts included in the platform server installer aswell? (the stand alone installer not the community edition).

Hi Robert,

Yes, you can find ChartingServicesCore inside System_Components.osp, which is located in the Agile Platform installation directory.

Cheers,
Tiago Simões
@Tiago

Thanks
Im using this ChartingServicesCore but nothing appear on page.Is there any example.Im trying to use MsCombi3d.swf
I found out yesterday that the Charting Services Component is using a paid version instead of the free version.  On the example page, remove "FCF_" from the chart type and then click redraw chart to see the updates.  I did notice that the charts included in FusionWidgets and PowerCharts are NOT included as the paid versions (i.e. Candlestick, Gantt Chart).
I have tried "MSCombi3d.swf" in the FusionCharts Espace which is a predecessor for the ChartingServicesCore.  It includes a sample screen for testing.  I'm not getting it to work here either (we have access to this file).