Warning this is an old version.

Take me to the latest version

Tutorial 4

1: Write JSON

In this tutorial we will use PHP to write the JSON data for our chart.

Create the flash object
<?php

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

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

$max 20;
$tmp = array();
for( 
$i=0$i<9$i++ )
{
  
$tmp[] = rand(0,$max);
}

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

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

$chart = new open_flash_chart();
$chart->set_title$title );
$chart->add_element$bar );
                    
echo 
$chart->toString();


?>

Copy this into a file and save it as data.php in the root of your web server. Take a look at the JSON it creates by browsing to this file (e.g. http://example.com/data.php )

Now we need a web page to display our chart, this should be familiar from the previous tutorials:

Code:
<html>
<head>
 
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "550", "200", "9.0.0");
</script>
 
</head>
<body>
 
<p>Hello World</p>
 
 
<div id="my_chart"></div>
 
 
</body>
</html>

Copy this text into a new file and save this as chart-2.html into the root of your web server.

Browse to this web page and you should see Open Flash Chart display the standard error message. Remember that Open Flash Chart will look in the URL for the variable ofc, so now append ?ofc=data.php to your URL (e.g. http://example.com/chart-2.html?ofc=data.php ) and you should see a chart like this: chart-3.html?ofc=chart-3.php

Code:
<html>
<head>
 
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "550", "200", "9.0.0", "expressInstall.swf", {"data-file":"chart-3.php"} );
</script>
 
</head>
<body>
 
<p>Hello World</p>
 
 
<div id="my_chart"></div>
 
<p>Don't forget to "view source"</p>
 
</body>
</html>

Next amend your .html page so that it passes the location of the data file to the chart through a flash variable. This cleans up the URL , your chart should look like this example: chart-3-2.html

In both examples Open Flash Chart opens the URL data.php, your web server runs data.php using PHP and dynamically generates the JSON. The chart displays this.

In the next tutorial we'll get rid of the external data file and embed the JSON data inside the web page: Tutorial 5

Support This Project
Adverts:


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