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. You can call it from Javascript:

• post_image( url, callback, debug )

  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 is a string value of some Javascript 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 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/adv-3d.php"} );
 
</script>
 
<script type="text/javascript">
 
// The chart object
function chart(name) {
	this.name = name;
 
	this.image_saved = function() {
		alert('saved '+this.name );
	};
}
 
// create a new chart object
var my_chart = new chart('chart 1');
 
function done()
{
	alert("done");
}
 
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.jpg";
 
	//
	// 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 );
 
	// 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>