Advanced : Many charts on one page

swfobject.embedSWF

  • "get-data"

    The Javascript function to call to get data from, this function must return a JSON string.

    This overrides the default chart setting to call the JavaScript open_flash_chart_data() function. (See JS tutorial and JS 2 charts for details.)

    Usage e.g. {"get-data":"get_data_2"}

    Note: you only pass the function name (NOT "function_name()" do not add the brackets: "()")

  • "id"

    The parameter value to pass to the "get-data" and ofc_ready( id ) functions.

    Usage e.g. {"id":"chart_1"}

Example usage, both set:

This goes into the <head> of the page:
swfobject.embedSWF(
  "open-flash-chart.swf", "div_chart_1",
  "300", "300", "9.0.0", "expressInstall.swf",
  {"get-data":"ofc_get_data", "id":"chart_77"} );
 
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]
This would call ofc_get_data( id ) and id would be set to 'chart_77'.

With two charts on a page, by default both will call open_flash_chart_data() and things will get confused. So we override this behaviour and tell each chart where to get their data from.

Here is the PHP that creates 2 charts. Notice how we save the JSON string for later in this page.

Create the flash object
<?php

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

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

$bar = new bar();
$bar->set_values( array(9,8,7,6,5,4,3,2,1) );
$bar->set_colour'#94D700' );

$chart_1 = new open_flash_chart();
$chart_1->set_title$title );
$chart_1->add_element$bar );
//
//
$data_1 $chart_1->toPrettyString();
//
//

//
// CHART 2
//
// generate some random data
srand((double)microtime()*1000000);

$tmp = array();
for( 
$i=0$i<9$i++ )
  
$tmp[] = rand(1,10);

$bar_2 = new bar();
$bar_2->set_values$tmp );

$chart_2 = new open_flash_chart();
$chart_2->set_title( new title"Chart 2 :-)" ) );
$chart_2->add_element$bar_2 );
//
//
$data_2 $chart_2->toPrettyString();
//

Here is the JS code, notice how we paste the JSON charts (from the above code) into the JS:

This goes into the <head> of the page:
 
<script type="text/javascript" src="js/json/json2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
 
/*
 
don't forget to include the JSON JS library :-) ^^
 
*/
 
swfobject.embedSWF(
  "open-flash-chart.swf", "div_chart_1",
  "300", "300", "9.0.0", "expressInstall.swf",
  {"get-data":"get_data_1"} );
 
swfobject.embedSWF(
  "open-flash-chart.swf", "div_chart_2",
  "450", "300", "9.0.0", "expressInstall.swf",
  {"get-data":"get_data_2"} );
 
 
function ofc_ready()
{
	// alert('ofc_ready');
}
 
 
function get_data_1()
{
	// alert( 'reading data 1' );
	return JSON.stringify(data_1);
}
 
function get_data_2()
{
	// alert( 'reading data 2' );
	// alert(JSON.stringify(data_2));
	return JSON.stringify(data_2);
}
 
var data_1 = $data_1;
 
//
// to help debug:
//
// alert(JSON.stringify(data_1));
 
var data_2 = $data_2;
 
</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]

Right click--view source, on this page to see the JavaScript that is created. Please note that the $data_1 and $data_2 is replaced by PHP with the chart JSON.

We have two divs in this page (directly after the H1 title) defined like this:

 
<div id="div_chart_1"></div>
<div id="div_chart_2"></div>
 

Support This Project
Adverts:


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