Create impressive charts with Open Flash Chart

Creating a high-quality chart for the Web can be a challenging task, but open source software like Open Flash Chart (OFC) makes it a cinch. As you might guess from its name, the core engine of OFC is written in Adobe Flash. Although this means that users need a Flash browser plugin to view charts created with OFC, this approach has a significant advantage: it allows you to produce professional-quality graphs with minimum effort, because the core engine does all the heavy lifting, and all you need to do is to specify configuration options for your chart and feed data into it.

Before you give the software a try, make sure your Web server has PHP installed on it. Fetch the latest release of OFC, create a directory in the root of your Web server (e.g. openflashchart), and copy the open-flash-chart.swf file and the php-ofc-library folder from the downloaded package into the created directory. OFC is now installed.

You can now add a chart object to an existing .php Web page. Insert the following PHP code snippet in the page where you want the chart to appear:

<?php

include_once 'php-ofc-library/open_flash_chart_object.php';

open_flash_chart_object( 600, 300, 'http://'. $_SERVER['SERVER_NAME'] .'/openflashchart/chart-data.php', false );

?>

Don’t forget to specify the correct paths to the open_flash_chart_object.php and chart-data.php files. And if you want to change the chart’s dimensions, simply change the width and height values.

The chart pulls other settings and the chart data from the file specified in the open_flash_chart_object part (in this case, it’s chart-data.php, stored in the openflashchart directory). So the next step is to create that file and populate it with data and configuration options. For starters, let’s create a simple line chart. Create a text file and enter the following code in it:

&title=Downloads,{font-size: 21px;}&

&y_ticks=5,10,6&

&line=5,#9932CC&

&values=12,41,29,35,4,30,18,13,31,5,26,26&

&x_labels=Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec&

&y_min=0&

&y_max=60&

As you can see, the structure of the data file is not complicated. The title option specifies the chart’s title and its appearance. Besides the font size, you can specify font and background colors, margins, padding, and so on. For example:

&title=Downloads,{font-size: 19px;color: #9932CC; margin:10px; padding: 5px 15px 5px 15px;}&

The y-ticks parameter is used to control the number of ticks on the Y axis (in this case, 6) and its size (in this example, 5 and 10). The y_min and y_max options define the minimum and maximum values on the Y axis. The thickness and color of the chart line are controlled by the line option, while the values parameter specifies the chart line’s values. You can include negative values; just remember to adjust the y_min parameter accordingly. Finally, the x_labels option contains a list of labels on the X axis. If you want to add a legend to the Y axis, you can do so by defining the y_legend parameter, which includes the legend’s text, font size, and color:

&y_legend=Thousands,11,#9932CC&

Save the file as chart-data.php in the openflashchart directory. Open the Web page containing the embedded chart object in the browser, and you should see the created chart in all its beauty.

OFC offers a wealth of other parameters and options you can use to create charts exactly the way you like them. For example, you can plot several lines by simply adding additional line parameters and a set of values:

&line=3,#9932CC,Ubuntu, 9&

&line_2=3,#458B00,Mandriva, 9&

&y_legend=Thousands,11,#9932CC&

&values=12,41,29,35,4,30,18,13,31,5,26,26&

&values_2=25,57,12,18,4,23,21,47,51,37,21,47&

Note that besides the line thickness and color, the line parameter now includes two additional values: label and label font size. Don’t like simple lines? No problem: the line_dot and line_hollow parameters allow you to generate lines with solid or hollow points (the last value defines the dot size):

&line_dot=3,#9932CC,Ubuntu,9,7&

&line_hollow_2=3,#458B00,Mandriva,9,7&

Using the x_axis_colour, x_grid_colour, y_axis_colour, y_grid_colour, bg_colour, and other parameters, you can tweak virtually any aspect of a chart. You can even a graphic as a chart’s background by specifying the bg_colour parameter. (Note the British spelling of color.)

Besides line charts, OFC can produce a variety of other chart types; simply replace the line parameter in the chart-data.php file with filled_bar, for example:

&filled_bar=50,#9933CC,#8010A0,Downloads,10&

The first value here specifies the chart bars’ transparency, followed by the bars’ default and highlight colors, legend, and font size. To add a fade effect to the chart bars, use the bar_fade parameter:

&bar_fade=55,#9933CC,Downloads,10&

OFC can also produce charts where the bars have a glassy appearance. To see what a glass bar chart looks like, try the following parameter instead of filled_bar:

&bar_glass=55,#D54C78,#C31812,Downloads,10&

Generating a pie chart using OFC is equally easy. Although the structure of the pie chart’s data file is a bit different from the previous ones, it is still straightforward:

&title=Word Processors,{font-size:18px; color: #d01f3c}&

&pie=60,#000000,#000000&

&values=12,9,8,5,10&

&pie_labels=Microsoft Word,OOo Writer,AbiWord,KWord,Scribus&

&colours=#D01f3C,#7D26CD,#458B00,#356AA0,#C79810&

The pie parameter specifies the chart’s transparency followed by the line and label colors. Colours (again, the British spelling) specifies the color of each pie segment.

Final word

That’s just a fraction of OFC’s capabilities, but even these simple examples can give you an idea of what you can do with this excellent software. Check for more examples on OFC’s Web site, which also provides a description of how to generate data files in PHP. Moreover, OFC includes helper classes for Java, Perl, Ruby on Rails, and Python, so you can use OFC in your own applications.