If you are still using static charts to display data in your web-pages, then it’s time to get little more current. Today’s web is all about interactivity, performance and “rich” applications which provide the user with efficient ways to view, navigate and mine potentially vast amounts of data.

Charts have always played a large role in helping to visualize data sets, trends and data relationships, but static charts such as those rendered into an image format such as jpg, tif, gif, or png on a server leave a lot to be desired.

Enter Open Flash Chart, or “OFC2” as it is more affectionately known. OFC2 is what I will call a decoupled data presentation framework. Why do I say that it is decoupled? In short, the chart definitions are created using different libraries than the libraries/application that is used to display chart and an intermediate and independent format is used to represent the data for the chart.

OFC2 consists of 2 main components. The first component is the chart application itself, which is implemented in Adobe Flash. When a user browses to a web page that contains an OFC2 chart, the web browser requests the OFC2 Flash Application from the web server. The flash application executes within the clients browser which means that the chart is rendered at the client, rather than on the server.

The second component is a rich set of libraries and language bindings that application programmers can use to generate chart data to be displayed by the OFC2 flash application. At present, OFC2 contains bindings for the following languages: PHP, Ruby, .NET, Perl, Java, Python, Cold-fusion, and others… The chart generation libraries typically reside and execute on the server side and not on the client, although there are ways to generate data on the fly using JavaScript on the client, however, at this time I am not sure that OFC2 can make use of dynamically changing data…

OFC2 is an LGPL licensed, open source project meaning that the author has gratiously opened their code to the community and made the application available free of charge. Because the OFC2 is LGPL licensed, the author still maintains copyright and other rights, but still allows others to use and modify the codebase.

The citumpe.com helper library provided here is licensed under a BSD style license. The software provided here is copyrighted and may only be used in accordance with the license provided at the top of the helper library files.

Using the citumpe.com helper library

The citumpe.com helper library for OFC2 is comprised of a single PHP script file that contains various functions. The library may be downloaded at the end of this article. This library was developed for the Gamera version of Open Flash Chart 2.

Here is a simple, but complete example of how to use the citumpe.com helper library:

In this first code snippet, we include the OFC2 javascript libraries. The ofc directory should be in the same directory as this php script.

      <title>Citumpe.com OFC2 helper library: OFC2 made easy...</title>
        <script src="./ofc/js/json/json2.js" type="text/javascript"></script>
        <script src="./ofc/js/swfobject.js" type="text/javascript"></script>

In this second snippet, we start the php section which will be executed on the server prior to sending the chart to the web browser. First, the title variable is initialized, then the data arrays are initialized with their values. Note that the data array is separate from the label and tooltip arrays. This could have also been done using PHP class constructs or a multi-dimensional array, but for now, using separate arrays is easier to do… Each array contains the same number of elements.

include_once "chartFunctions.php";

$baseTitle = "Citumpe.com OFC2 helper library: OFC2 made easy...\n";

//create the data, label and tooltip arrays...
$dataArray = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
$dataLabelArray = array("one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten");
$tooltipArray = array("tt-one", "tt-two", "tt-three", "tt-four", "tt-five", "tt-six", "tt-seven", "tt-eight", "tt-nine", "tt-ten");

//set the size of the chart
$xChartSize = 400;
$yChartSize = 400;

Now that the static data sets have been created, the actual chart configuration can be generated. I use the word configuration specifically because neither this code, the helper library, nor the OFC2 libraries will render a chart, rather this code creates a chart configuration which will be read by the OFC2 Flash application to render the chart.

This code snippet will generate the first chart configuration data and send it to the client web browser. This chart will be rendered with horizontal series labels for each bar.

//generate and output the first chart...
$referenceName = "simpleBarChart_horLabels";
$title = $baseTitle."horizontal labels";
$verticalXAxisLabels = false;
print getSimpleBarChart($referenceName, $title, $dataArray, $dataLabelArray, $tooltipArray, $xChartSize, $yChartSize, $verticalXAxisLabels);


This code snippet will generate the first chart configuration data and send it to the client web browser. This chart will be rendered with horizontal series labels for each bar.

//generate and output the second chart...
$referenceName = "simpleBarChart_verLabels";
$title = $baseTitle."vertical labels";
$verticalXAxisLabels = true;
print getSimpleBarChart($referenceName, $title, $dataArray, $dataLabelArray, $tooltipArray, $xChartSize, $yChartSize, $verticalXAxisLabels);


The last code snippet will generate a simple pie chart out of the previously defined data…

//generate and output the pie chart...
$referenceName = "simplePieChart";
$title = $baseTitle;
print getSimplePieChart($referenceName, $title, $dataArray, $dataLabelArray, $xChartSize, $yChartSize);



Open flash Chart 2 is a fantastic charting application that is very easy to utilize and provides the user with a rich interface to chart-type data. If you are not already using OFC2, give it a try, it will be worth the effort.


citumpe_com_helperforofc2.zip: Download the source code for the example and the helper library.

Leave a Reply

Your email address will not be published. Required fields are marked *