Graph plotting on the web

Written by Ian on 26/08/08


I needed a PHP page that would select some data from a whole bunch of files, and then plot it online.
• Although there are many possible ways of doing this, all of them are really clunky and difficult.

So then I
• looked around and found a really excellent tool: Open Flash Chart (OFC).
• This is open source (free) software.
• You just download a few libraries, drop them into the root directory of your webserver - any webserver as far as I can see - then edit some of the examples to produce really amazing graphics.

Check out this one here.

It uses a prebuilt flash executable that simple plays back the graph image. You get to write the graph by making a data file in a JSON format (a standard format). Even better to know is that the author of this OFC gives you the tools to make a JSON file.


I won't spend time here by writing examples, because you can find extensive and useful tutorials on the OFC webpages.
• What I will do though is give you some hints and tips:

1. Go for OFC2.
• It's still in late alpha, but is probably more consistent than OFC and will be developed for longer.

2. If you plot a scatter plot (because you don't have sequential points along the x-axis) then you will find that there is a problem with the x lables. To get around this, create the graph as normal, and then use specific commands to set the x-axis attributes:

For example,
this is from one of the code snippets on the OFC website.
• You have already, somewhere, created an x-axis called $x, and now you create a x-labels object:
>$x_labels=new x_axis_labels();


Then you apply attributes as required:
>$x_labels->set_vertical();
>$x_labels->set_size(16);
>$x_labels->set_labels(array('a','b','c','d','e'));

Then you apply these x-labels with their attributes into the already existing x-axis:

$x->set_labels($x_labels);


Finally you create the chart as normal (i.e. as in all the examples).

3. You can't (as far as I can see) change the colour and the size of the labels on the y-axis (unless you add a y-axis to the right hand side of the graph), so just keep the x-axis ones as black 10 point text!

OK, enjoy.
• Now you can have great-looking graphs on your website, thanks to the developes of OFC.