Warning this is an old version.

Take me to the latest version

Tutorial 6

2 Charts Using Javascript

Here is an example of how to embed two JSON objects into the web page. We build two charts, then save both like we did in the previous tutorial.

Create the flash object
<?php

//
// This is the MODEL section:
//

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

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


// 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 );


//
// This is the VIEW section:
//

?>

<html>
<head>

<script type="text/javascript" src="js/json/json2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");
</script>

<script type="text/javascript">

function ofc_ready()
{
    alert('ofc_ready');
}

function open_flash_chart_data()
{
    alert( 'reading data' );
    return JSON.stringify(data_1);
}

function load_1()
{
  tmp = findSWF("my_chart");
  x = tmp.load( JSON.stringify(data_1) );
}

function load_2()
{
  alert("loading data_2");
  tmp = findSWF("my_chart");
  x = tmp.load( JSON.stringify(data_2) );
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}
    
var data_1 = <?php echo $chart_1->toPrettyString(); ?>;
var data_2 = <?php echo $chart_2->toPrettyString(); ?>;

</script>


</head>
<body>

<p>Open Flash Chart</p>


<div id="my_chart"></div>
<br>
<a href="javascript:load_1()">display data_1</a> || <a href="javascript:load_2()">display data_2</a>
<p>
Don't forget to 'view source' to see how the Javascript JSON data is loaded.
</p>
</body>
</html>

In this example we also make use of the Javascript function load(). This will load the second JSON data into the chart.

This should look like example 5.

It is useful to hook together a timer, an AJAX function and the load() function to periodically update the chart.

If you have many charts on a single page then they will all call these Javascript functions and you won't know which chart has called it. You can pass a chart ID to these functions, for an example of this see the advanced multiple chart Javascript examples.

Support This Project
Adverts:


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