Warning this is an old version.

Chart Elements - Save as Image - POST (upload) image

Save Chart as Image

This is for experts only. It is quite simple but requires some server tweeking.

Open Flash Chart has an external interface that you can call to make it save an image (.png). You can call it from Javascript:

post_image(url:String, callback:String, debug:Boolean)

• url is a string, you can add variables to send to the upload script, e.g. http://example.com/php-ofc-library/ofc_upload_image.php?name=my_chart.jpg
• callback a string. A Javascript function name that is called when the upload has finished. This is only called when debug is false. In the example in this page I have experimented with two call back functions, take a look in save_image both work. If the chart id is set, the JS function must have 1 parameter, when called the chart id is passed into the function.
• If debug is true the browser will open a new window showing the results (and any echo/print statements). If it is false, no redirect happens.

The PHP that accepts the file upload (the .jpg file) and saves it is php-ofc-library/ofc_upload_image.php.

Take a good look at the upload script. It is not finished and you will have to play with it. If you do not have a debugger, echo is your friend. Make sure you are saving the image to the correct directory.

Note I have not enabled this on teethgrinder.co.uk because, however much I love you guys, I don't want a million chart .jpgs on my server :-)

If you are using this to print reports I suggest that you use the callback to determin when the upload has finished. Then use AJAX to poll the server to see when the image is ready. When it is ready, download it and use javascript to hide the flash chart and show the image.

Please get in contact with me if you can make this script better :-)

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
 
swfobject.embedSWF(
  "open-flash-chart.swf", "my_chart",
  "550", "250", "9.0.0", "expressInstall.swf",
  {"data-file":"gallery/3d-bar-chart.php", "id":"eden"} );
 
</script>
 
<script type="text/javascript">
 
// The chart object
function chart(name) {
	this.name = name;
 
	this.image_saved = function(id) {
		alert('saved:'+this.name+', id:'+id );
	};
}
 
// create a new chart object
var my_chart = new chart('chart 1');
 
function done(id)
{
	alert("Finished upload. Id:"+id);
}
 
function post_image(debug)
{
	//
	// My computer at home is called 'eden'
	// so I want to POST the image to the
	// ofc_upload_image.php script. I am also
	// passing the name of the image file in
	// as a GET variable.
	//
	url = "http://eden/open-flash-chart-2/php-ofc-library/ofc_upload_image.php?name=tmp.png";
 
	//
	// call the save function in the flash chart,
	// ofc == open flash chart
	//
	var ofc = findSWF("my_chart");
 
	// call the done() function when the image has been POSTed
	x = ofc.post_image( url, 'done', debug );
}
 
function post_image_2(debug)
{
 
	url = "http://eden/open-flash-chart-2/php-ofc-library/ofc_upload_image.php?name=tmp.png";
	var ofc = findSWF("my_chart");
	// call our objects image_saved() method when finished
	x = ofc.post_image( url, 'my_chart.image_saved', debug );
}
 
function ofc_ready()
{
	alert('ofc_ready');
}
 
function findSWF(movieName) {
	if (navigator.appName.indexOf("Microsoft")!= -1) {
		return window[movieName];
	} else {
		return document[movieName];
	}
}
 
</script>