My tribute to OFC

OFC?

Open Flash Chart by John Glazebrook and his folks ;)

AJAX and OFC

Till now the interface was quite limited. See here what i extended it to. Give it a try by adding a data-parameter like index.php?data=32 like this to load all the different data-files included in the ofc-svn.

Please take a look at the documentation to test the system live and see what is possible.

News

31. May. 2008 - 13:00
finally, finally refactored some things made api better and fixed bugs. well there are still some small bugs, but because of many requests i put a JPEG-download discription online.

30. Nov. 2007 - 04:04
put new version online. this version works with prototype v 1.6 and ins fully object orientated.

How does it work?

OFC has been extended to support some functions including two of concret interest: setLVVar and getLVVar.
These two functions make it possible to manipulate the data loaded by Flash from the datafile. After all changes have been applied, the chart gets redrawn (clearing the _root at first).
Following code is therefore possible:

// non-existing chart, but existing div or whatever with
// chart as id, and JSON-object as options
var o = new OFC.Chart('chart', {
	sourceURL: 'data-files/data-1.txt',
	width: 800,
	height: 600,
	onRedraw: function() {
		// is called when the chart finishes drawing (also the
		// first time and on reload)
		alert('My background is: '+this.object.get('bg_colour'));
	}
});

or:

// existing OFC-Chart
var o = OFC.getOFC('chart');
o.setLVVar('bg_colour', '#FF0000');
o.redraw(); // now onRedraw is called again!

Watch out! this makes your charts very red :) Take a look at the documentation and the reference i made to see which syntax the lv-vars follow (no gurantee on completeness!)

JPEG-Download?

Because of the big amount of requests i want to point out how the flash2jpeg component in my extension works. I'll give my best to explain how i worked this out.

Nevertheless one recommondation: use firefox in connection with firebug. With it you can hold track of every single js-request and browse communication or change html or what is very interesting: run js-code on the fly from a console.

So: The chart is saved using a special AS3-written SWF and a server-side mirror-script. This technique is based on Thibault Imberts JPEGEncoder class. You can get his code here: www.bytearray.org. If he wouldn't have opened his code i would have never had the possibility to do this extension and so - i think - it would be cool if you do the same ;)

What helped me extremely is the german site www.video-flash.de. In fact i followed their instructions.

How did i do this? The as3-swf loads the OFC-swf (basically it can load anything - see down at my words about the swf-interface) so no rebuilt of the original swf is needed. this works as follows:

the swf registers an external interface method called "doIt"
the user clicks download and invokes a js-method ( located in ofc.js ) called "download" (the two last methods in the OFC.Chart-class are necessary)
this js-method invokes the doIt-Method with 2 parameters:
- a parameter-string which is added to the file mirroring the file back to the user
- the name of another JS-method which is called when the upload is completed to download the file again
  in my case do not need parameters, and the callback is OFC.downloadingComplete
then the swf creates an bytearray (AS3) and encodes it to a JPEG and sends it as rawpostdata to a php-script (the forementioned parameter-string is appended as GET-parameters)
this script reads php://input and saves it to a temporary file
this script returns flashvars as result - in fact an id with which JS can calculate the URL of the temporary file to download it
after this communication a second JS-method is called witch invokes the download of the temporary file (window.location...) - in my case i do this via a php-file so that the temporary file gets deleted.

well - this hickhack of transferes might seem complicated and overloaded. i try to explain why this is required: flash is sandboxed and not allowed to directly access your local hdd. for that reason it is not possible to save the JPEG anywhere on the computer or let the user load it from the SWF directly. the only way how this can happen is that the users browser downloads it from the server which can be automatically invoked using javascript as i did it.

a few words about the SWF-interface. when you embed it in html you have to provide 4 parameters, atm these paramers have no default and so they are not optional:

SWF-parameters
(of ofcext.as)
name	description
stage_width	the width you want to capture (in pixel)
stage_height	the height you want to capture (px)
save_url	the url of the php-file that is used to save the JPEG-rawdata.
swf_url	the url of the SWF or JPEG or whatever you want to be saveable

External-Interface-Methods and their location
(including changes in open-flash-chart.swf)
name	parameters	description	open-flash-chart.swf	ofcext.swf
clear	-	clears all lv-vars	X
redraw	-	redraws the chart (normally called after changing the lv-vars)	X
setLVVar	var-name, var-value	changes a lv-variable	X
getLVVar	var-name	returs the value of the requested lv-var	X
getAllLVVars	-	returns all lv-vars in an array	X
setMightyLine	percent	sets a vertical line the user can drag. when the line is dragged, the js-function fireMightyLine is called with the according percentage as parameter	X
doIt	url-addons, (string) callback	saves the current view as jpeg and calls the callback-js-function		X

so you don't have to regenerate the swf - ofcext.swf just loads the original swf - i hold it this way so its more modular.

you can download all my sources it includes the finalized swf, js, php as an implementation-example as its done here. this will be different on your systems, but to give you an idea... to see how i implemented it in html take a look at the source here - feel very free to get out what you can!

i hope i was able to bring some light into this topic.. i am very keen on seeing if you could use my scripts and i am interested in your view of this topic. if you have any ideas how i could improve this quite difficult things please send them to me.

Can i get it?

Yes of course! tar.bz2 zip
I changed a lot of things inside ofc so i can't provide a patch atm. sorry... but the full source is included! Now make sure your page includes all the JS-Stuff OFC and this extension needs (SWFObject, prototype (v 1.6) and the js-ofc-library) and there you go.
In the example online i created an additional JS-object to manage the form and use scriptaculous for the dragbox, but these JS-Files are not needed to do the stuff!

Documentation? Refrence?

The API-Description for the JS-library is still not finished. Please take look at the documentation and inside the JS-File
I also made a simple reference for all the parameters the SWF accepts (i know so far).

Contact

Please feel free to contact me at grillen at abendstille dot at.