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 title( date("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>
|
Adverts:
|