Fusion Charts

The Morfik Fusion Charts package contains a single widget (FusionCharts) that is a wrapper for animated Flash controls for charts, graphs, gauges and maps. There are over 60 styles of animated controls in the package to choose from. The Morfik package comes with some free and some evaluation versions of the controls which can be purchased from InfoSoft Global.


A Quick Walkthrough

To use the Morfik Fusion Charts package simply add the package to the project by utilizing the “Used Packages” command on the project ribbon (see Figure 1 Used Packages Command), or simply drag the package file onto the application main client area (see Installation Note below). Once added a single widget will appear on the home ribbon when the form designer is active (see Figure 2 Widgets List). These widgets can be placed on application forms and provide immediate functionality with minimal coding.

Figure 1: Used Packages Command

Let’s develop a demo application to view the steps involved in utilizing the FusionCharts package.

Figure 2: Widget List

A Quick Walkthrough – Pie Chart Sample

To get started, open a new Morifk 3 application and add the Fusion Charts package. Then create a table (Table1) with the following entries (or import Table1 from the available sample application):

Next create a new Visual query (Query1) and add the table Table1 to the query. Drag the two fields Titles and z into the query designer grid and save the query.

Next, add a FusionCharts widget to a form and you will have a page similar to Figure 3 – Default Fusion Chart.

Titles (Text) Values (Number) Values2 (Number) z (Number)
January 43 63 116
February 65 65 99
March 65 65 33
April 76 67 72
May 56 65 55
June 54 54 58
July 54 3 80
August 54 76 105
September 65 87 80
October 56 54 90
November 43 76 70
December 65 76 50
Figure 3: Default Fusion Chart

To set the properties for the chart, click on the chart control and then click on the arrow at the top right of the chart control (see Figure 4 Setting Chart Properties) and select Settings.

Figure 4: Setting Chart Properties

Leave the Version as Standard and set the Chart Kind to Pie3D. Check the Animation, Show Labels and Show Y-Axis Values and leave all the other checkboxes unset. Add Sample Chart as the Caption.

Switch to the Data Source tab and in the Data Source drop down list, select Query1. For the Labels Field, select Titles and in the Values Field select z. Save and run the application - you should see a chart similar to the one in Figure 5 Sample Pie Chart.

Figure 5: Sample Pie Chart

Note: the Data Source property of the form does not set the data source property of the widget

Let’s make some changes to the chart by adding a new Visual query (Query2). Add the same table as before, but this time drag the fields Titles, Values and Values2 to the grid and save the query.

Go back to the settings for the chart component and change the Chart Type to MSBar3D. Now switch to the Data Source tab and you will see that the fields have changed. In the Data Source drop down, select Query2, and for the Labels field select Titles.

For the Values, click on Add and enter Values for the Series name and select Values as the Values field and then click OK. Click Add again and use Values2 for the Series name and Values2 as the Values field and click OK. Click OK to close the Settings page and then run the application. The chart now should look like Figure 6 Sample Bar Chart.

Figure 6: Sample Bar Chart

Installation Note

When installing the FusionCharts package in a default Firebird setup, be sure the sysdba password is set to the original masterkey value or the package will not successfully install.

Fusion Charts in more depth

The chart controls rely on an XML stream to set the properties and values on the chart. This XML string is generated automatically for you based upon the values of the Settings panel and the data in the selected dataset. Different Chart Types have different XML requirements as can be seen most frequently on the Data Source page of the Settings.

Most of the properties in the Settings panel are self-explanatory but a few are discussed here:

Animation (General Tab) – Whenever a chart is displayed, if animation is turned on, the chart will be “built” into its final form using any of a number of effects. If animation is off, the final chart only will be displayed.

Number Prefix and Number Suffix (Number Formatting tab) – If you choose to display values, you can add a prefix to each value and a suffix to each value. For example you may put in the prefix and per kg as the suffix and that would create a value that would look like € 2.50 per kg.

Series Name (Data Source tab) – When adding Values fields on this tab, you may name the series whatever you want (including using symbols in the names) and if Include in Legend is checked, the Series Name will be displayed next to its color for the chart.

Fusion Charts properties

Most of the property editor panel entries are the common ones for every control but there are a couple that are noteworthy. First is the Link Field which will be filled in for you when you edit the Data Source properties on the Settings panel. The other is the SQLFilter field which can be used like the SQLFilter property for a form at Design Time. To change the sql filter at run time, you can use the LoadData method. For example, in the demo application above, place a button on the form and for the OnClick event add the following code:

FX Code

Procedure "Form 2".Button1Click(Event: TDOMEvent);

When you run the application, you can see how the chart changes when you click on the button.

Fusion Charts events

There are a number of events associated with each FusionChart control that can be useful for changing the display of the chart. The most useful is probably the OnGetData event that contains the XML string as a variable parameter that will be sent to the Fusion Chart control. For example, you could change the display of the title as in the sample below:

FX Code

Procedure "Form 2".mfk_FusionCharts1GetData(Var XML: String);
    XML := ReplaceString(XML, 'Julu', 'July');

You could also hide the chart on any of the error events:

FX Code

Procedure "Form 2".mfk_FusionCharts1DataLoadError(ID: String);
    mfk_FusionCharts1.Visible := False;
    lblError.Caption := 'Error loading data';
    lblError.Visible := True;

Fusion Charts subscription

If you choose to purchase a subscription for the Evaluation version of the Fusion Charts controls (see http://www.fusioncharts.com/Licensing.asp for further information) then you will need to replace the evaluation controls with the purchased controls each time you add the FusionChart package to an application. There will be a mfk_ subdirectory under the _ProjectNameResources directory and beneath that directory is a FusionCharts directory. Replace all the Flash files (*.swf) in that directory with the purchased controls.

Fusion Charts documentation

There is complete documentation of Fusion Charts available at http://www.fusioncharts.com/docs/ and http://www.fusioncharts.com/free/docs/. Of special note is the section of the documentation titled Chart XML API which includes information on which charts can utilize a single data series and which can handle multiple series; using stacked charts and combination charts, etc. The actual XML used is also documented which helps in understanding what can be done in the OnGetData event.

Please experiment

The best way to understand the capabilities of the Fusion Chart package is to experiment with the different chart types (for example, some charts work well at a smaller size and some don’t). Please also review the available sample application.

See Also

Back to top