Warning this is an old version.

Take me to the latest version

Tutorial : Many charts on one page

This is the JavaScript that is in this page:

This goes into the <head> of the page:
 
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
 
swfobject.embedSWF(
  "open-flash-chart.swf", "pie_chart",
  "300", "300", "9.0.0", "expressInstall.swf",
  {"data-file":"gallery/tutorial-2-charts-pie.php"} );
 
 
swfobject.embedSWF(
  "open-flash-chart.swf", "line_chart",
  "450", "300", "9.0.0", "expressInstall.swf",
  {"data-file":"gallery/tutorial-2-charts-line.php"} );
 
 
</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]

We have two divs in this page (directly after the H1 title) defined like this:

 
<div id="pie_chart"></div>
<div id="line_chart"></div>
 
So you can see in the JS we push the pie chart data into the "pie_chart" div and the line chart data in the "line_chart" div. Easy :-)

For the JavaScript gurus out there who think this isn't hard enough already, check out the far more complex method of using JavaScript to create many charts.

Here is the code for the two charts:

gallery/tutorial-2-charts-pie.php
<?php

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

$title = new title'Cows go mooo' );

$pie = new pie();
$pie->set_start_angle35 );
$pie->set_animatetrue );
$pie->set_tooltip'#val# of #total#<br>#percent# of 100%' );
$pie->set_values( array(2,3,6,3,5,3) );

$chart = new open_flash_chart();
$chart->set_title$title );
$chart->add_element$pie );


$chart->x_axis null;

echo 
$chart->toPrettyString();
To see the data produced : gallery/tutorial-2-charts-pie.php, then 'view source'.
gallery/tutorial-2-charts-line.php
<?php

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

$data_1 = array();

for( 
$i=0$i<6.2$i+=0.2 )
{
  
$data_1[] = (sin($i) * 1.9) + 7;
}

$title = new title"Waves go wobble" );

$line_1 = new line();
$line_1->set_values$data_1 );
$line_1->set_width);


$y = new y_axis();
$y->set_range010);


$chart = new open_flash_chart();
$chart->set_title$title );
$chart->add_element$line_1 );
$chart->set_y_axis$y );

echo 
$chart->toPrettyString();
To see the data produced : gallery/tutorial-2-charts-line.php, then 'view source'.
Support This Project
Adverts:


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