This is a read-only archive. Find the latest Linux articles, documentation, and answers at the new Linux.com!

Linux.com

Feature: Internet & WWW

Create impressive charts with Open Flash Chart

By Dmitri Popov on November 30, 2007 (4:00:00 PM)

Share    Print    Comments   

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.

Dmitri Popov is a freelance writer whose articles have appeared in Russian, British, US, German, and Danish computer magazines.

Share    Print    Comments   

Comments

on Create impressive charts with Open Flash Chart

Note: Comments are owned by the poster. We are not responsible for their content.

Create impressive charts with Open Flash Chart

Posted by: Anonymous [ip: 216.138.231.194] on November 30, 2007 05:02 PM
How does that serve Linux to promote a technology that is not Linux friendly?

#

you need to write better reviews dude

Posted by: Anonymous [ip: 24.141.129.92] on November 30, 2007 05:26 PM
Come on...have you never done a chart yourself?
How often would you make one from scratch? you always pull from some other data source - data base, tab delimitted flat file or otherwise - why wouldn't you include in that as part of your review?

As it is it's a poorly written overly general overview. You really need to do better to actually make these reviews more actionable and useful to readers.

#

Re: you need to write better reviews dude

Posted by: Anonymous [ip: 81.193.93.237] on December 01, 2007 10:36 AM
I agree. Making a simple script to work with gnuplot should be simple for those who are used to work on Linux. Plus, there is also octave!

#

great intro.. thanks!

Posted by: Anonymous [ip: 67.100.105.44] on November 30, 2007 05:51 PM
This is just the kind of thing I can use to improve my client facing backup reports. Since I wasn't actively looking for such a project/product I appreciate the intro - that's why I read this site. The OFC site has alot more info and is written is a friendly and easy to understand style.. If you aren't happy with this free review, then go straight to the source..

#

Bad advice. Many people will not install Flash

Posted by: Anonymous [ip: 82.192.250.149] on November 30, 2007 06:49 PM

Flash is available for most platforms, including Linux, but many people don't install it.


I don't.


The reason is that its main use is to clutter up web pages with distracting advertisements. I use the web mainly to get information, and the very last thing I want is some crass "Look at me! Look at me!" winking, blinking, multicolored ad distracting me.

#

Re: Bad advice. Many people will not install Flash

Posted by: Anonymous [ip: 66.244.79.1] on December 01, 2007 01:48 AM
but many people don't install it.

Be careful not to think that just because you do something, that you are in the majority. I have done this too and its not always right. I think just some common sense and observation will tell you that a lot of people out there don't care about the technical parts of their computer and do not have these philosophical ideas about how a computer should be and shouldn't be. Most people do have flash because most people run windows and it gets nearly auto installed at some point.

So your point was lost in your stupidity.

#

Just say no to Flash

Posted by: Anonymous [ip: 69.231.79.232] on December 01, 2007 05:04 AM
Here here! Flash is just downright icky. Having it installed makes the web much less enjoyable. Though I'm looking forward to being able to use Gnash to download favorite Youtube videos...

#

Re: Bad advice. Many people will not install Flash

Posted by: Anonymous [ip: 68.73.54.96] on December 01, 2007 01:46 PM
So if you use the web mainly to gather information, why use a flash compatible browser in the first place? Purists may not install Flash, but many more folks do.

#

Re: Bad advice. Many people will not install Flash

Posted by: Anonymous [ip: 216.223.13.23] on January 23, 2008 02:49 PM
Doesn't make much sense. If you want to block the ads, then get a plugin for blocking ads. By your strategy, to block all ads you would need to block all gifs, jpegs, and text.

#

THANKS from Open Flash Chart

Posted by: Anonymous [ip: 217.40.115.17] on December 03, 2007 09:53 AM
Hey thanks for the review!

Yeah, yeah. I know Flash is the *evil* but if you want animated 'cool' charts then you need flash. I know lots of open source people hate flash (with good reason) but I still think it is better than a static image or SVG + JS. But that's the cool thing, you now have a choice! Before you were stuck with gnuplot and no PHP, .NET, Python or Perl helper classes.

Open flash chart has them all :-)

With the competition of Silverlight I do wonder if Adobe may one day opensource the flash player. This is about 1,000 times better than the current SVG implementations, so it'd make sense to build on working code, and not re-invent the wheel.

Any hoo, thanks for the review :-)

monk.e.boy

#

spam was here

Posted by: Anonymous [ip: 85.98.47.206] on December 03, 2007 07:55 PM
spam is gone
[Modified by: Anonymous on December 05, 2007 12:28 AM]

#

Create impressive charts with Open Flash Chart

Posted by: Anonymous [ip: 74.8.18.55] on December 04, 2007 07:10 PM
I think a few of you are a little too harsh on this project. The point of the project that I can see is that you can do charting in Flash with what the developer is providing. I've looked at a few charters for my project already and to be quite honest, I'd probably use this for three reasons: it does negative-value charts, it provides a bit of animation to it which gives good eye-candy, and it's free to use and develop around.

About the only thing I'd peg on this is accuracy but I won't know until I've played with the engine, which is what I'm about to do.

#

What's up with all these flash haters?

Posted by: Anonymous [ip: 90.196.162.241] on December 07, 2007 09:50 AM
I think everyone is missing the point of this review. Its simply showcasing a very nice flash application with which I work myself, and I have to say its the best free flash charting application I've come across. And remember, if you don't have flash you cant view any videos on sites like YouTube and break.com etc. I dont see what the big deal about flash ads is, because ads are everywhere in all formats and you can't escape them, so ridding yourself of flash ads is a poor attempt at supporting an unsuccessful cause.

#

This story has been archived. Comments can no longer be posted.



 
Tableless layout Validate XHTML 1.0 Strict Validate CSS Powered by Xaraya