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