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_angle( 35 );
$pie->set_animate( true );
$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();
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( 2 );
$y = new y_axis();
$y->set_range( 0, 10, 2 );
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $line_1 );
$chart->set_y_axis( $y );
echo $chart->toPrettyString();
|
Adverts:
|