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 :-)

Maybe I should have looked for better hosting services, and read reliable web hosting reviews.

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 :-)

This goes into the <head> of the page:
<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>
This writes the chart into a div with id="my_chart", right click and view source to see it in action, [the tutorials have more details]

gallery/3d-bar-chart.php
<?php

include '../php-ofc-library/open-flash-chart.php';


srand((double)microtime()*1000000);
$data = array();

// add random height bars:
for( $i=0$i<9$i++ )
  
$data[] = rand(2,9);
  
// make the last bar a different colour:
$bar = new bar_value(5);
$bar->set_colour'#900000' );
$bar->set_tooltip'Hello<br>#val#' );
$data[] = $bar;

$title = new titledate("D M d Y") );

$bar = new bar_3d();
$bar->set_values$data );
$bar->colour '#D54C78';

$x_axis = new x_axis();
$x_axis->set_3d);
$x_axis->colour '#909090';
$x_axis->set_labels( array(1,2,3,4,5,6,7,8,9,10) );

$chart = new open_flash_chart();
$chart->set_title$title );
$chart->add_element$bar );
$chart->set_x_axis$x_axis );

echo 
$chart->toPrettyString();

To see the data produced : gallery/3d-bar-chart.php, then 'view source'.
Support This Project
Adverts:


Open Flash Chart logo by numb.me.uk. | Syntax highlights are by GeSHi