Warning this is an old version.

Take me to the latest version

Tutorial 5

1: Using Javascript

Warning: This is for advanced users only. If you don't get this tutorial working, or if you do get it working but don't like it then feel free to ignore this method.

In this tutorial we will use PHP to write the JSON data into a Javascript variable for the chart.

Pros

  • Only one request to your server (after the browser has cached open-flash-chart.swf)
  • It is possible to embed many charts.
  • Makes ajax much easier
Cons
  • Complicated to understand
  • Requires an extra javascript file (this will be cached by the browser)

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 = new open_flash_chart();
$chart->set_title$title );
$chart->add_element$bar );

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

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

</script>


</head>
<body>

<p>Hello World</p>


<div id="my_chart"></div>
     

</body>
</html>

Copy this into a file and save it as js.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/js.php )

You should see a chart like this example 4.

This is complicated and hard to explain. In the previous tutorial, there were two files, data.html and data.php. When the HTML file is loaded Open Flash Chart requests the data from the URL (data.php) it reads this in as string data.

It is also possible to pass this string data to the chart from Javascript.

To do this we merge the two files into one. We create the PHP object in the same way as before, only this time we echo the JSON string into the Javascript.

The sequence of steps goes like this:

  1. Your browser requests js.php
  2. js.php is run on the server
  3. js.php creates a PHP open_flash_chart() object
  4. open_flash_chart writes the chart JSON data into the <script type="text/javascript"> section of the page
  5. The browser downloads the page
  6. The browser runs the Javascript (which creates the JSON object)

If you open the example page above, right click and view source, you can see this object inside the Javascript section.

One of the places the chart will look for data is in the Javascript open_flash_chart_data() function. Inside open_flash_chart_data() we take the JSON object, make it into a string and pass this string to the chart.

The last thing Open Flash Chart does after it has loaded data is call the Javascript function ofc_ready(), this is where you would start your AJAX timer.

Note: For use within an MVC framework, I have commented how you should split this PHP file up.

Or you can hook the load() function up with some sexy GUI and allow the user to modify the charts. It would be simple to pass the modified JSON object back to the server to save it.

Support This Project
Adverts:


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