Tutorial Membuat Chart dengan Open Flash Chart 2

1. Download Open flash chart di http://teethgrinder.co.uk/open-flash-chart-2/downloads.php

2. rename hasil download menjadi ofc.zip dan extraxt di direcktori xampp/htdocs atau di
appserver/www sehingga akan terbentuk xampp/htdocs/ofc seperti tampak berikut :

Dan didalam direktori ofc berisi :

Perhatikan di directori tersebut terdapat open-flash-chart.swf dan juga ada folder php-pfc-library
Buka folder php-ofc-library dan pastikan ada banyak file sbb:

3. Pastikan pada browser anda telah terinstall dan diaktivkan flash player browser aktiv untuk
menjalankan javascript
4. membuat chart
a. Line Chart
Buat file php get data data-line-dot.php
<?php
include 'ofc/php-ofc-library/open-flash-chart.php';
$data_1 = array();
$data_2 = array();
$data_3 = array();
for( $i=0; $i<6.2; $i+=0.2 )
{
$data_1[] = (sin($i) * 1.9) + 10;
$data_2[] = (sin($i) * 1.9) + 7;
$data_3[] = (sin($i) * 1.9) + 4;
}
$title = new title( date("D M d Y") );
//--------Line 1 -----------$line_1_default_dot = new dot();
$line_1_default_dot->colour('#f00000');
$line_1 = new line();
$line_1->set_default_dot_style($line_1_default_dot);
$line_1->set_values( $data_1 );
$line_1->set_width( 1 );
// ------- LINE 2 ----$line_2_default_dot = new dot();
$line_2_default_dot->size(3)->halo_size(1)->colour('#3D5C56');
$line_2 = new line();
$line_2->set_default_dot_style($line_2_default_dot);

$line_2->set_values( $data_2 );
$line_2->set_width( 2 );
$line_2->set_colour( '#3D5C56' );
// ------- LINE 3 ----$line_3_default_dot = new dot();
$line_3_default_dot->size(4)->halo_size(2)->colour('#3D5C55');
$line_3 = new line();
$line_3->set_default_dot_style($line_3_default_dot);
$line_3->set_values( $data_3 );
$line_3->set_width( 6 );
$line_2->set_colour( '#3D5C55' );
//membuat garis y
$y = new y_axis();
//menentukan tinggi y dan intervalnya (awal, tinggi,interval)
$y->set_range( 0, 15, 5 );

$chart = new open_flash_chart();

$chart->set_title( $title );
$chart->add_element( $line_1 );
$chart->add_element( $line_2 );
$chart->add_element( $line_3 );
$chart->set_y_axis( $y );
echo $chart->toPrettyString();
?>

Hasil jika dijalankan missal localhost/data-line-dot.php atau localhost:8080/data-line-dot.php

Simpan di folder xampp/htdocs atau appserv/www

Membuat file membaca data-line-dot ofc-line-dot.php dan simpan di folder xampp/htdocs atau
appser/www sbb:

<script type="text/javascript" src="ofc/js/swfobject.js"></script>

<script type="text/javascript">
swfobject.embedSWF(
"ofc/open-flash-chart.swf", "my_chart", "550", "200",
"9.0.0", "expressInstall.swf",
{"data-file":"data-line-dot.php"} );
</script>
<div id=my-chart ></div>
Bila dijalankan sbb:

Selanjutnya buat data-line-soliddot.php

<?php
include 'ofc/php-ofc-library/open-flash-chart.php';
$data = array();
for( $i=0; $i<6.2; $i+=0.2 )
{ $data[] = (sin($i) * 1.9) + 4;}
$title = new title( date("D M d Y") );
// ------- LINE 2 ----$d = new solid_dot();
$d->size(3)->halo_size(1)->colour('#3D5C56');
$line = new line();
$line->set_default_dot_style($d);
$line->set_values( $data );
$line->set_width( 2 );
$line->set_colour( '#3D5C56' );

$y = new y_axis();
$y->set_range( 0, 8, 4 );
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $line );
$chart->set_y_axis( $y );
echo $chart->toPrettyString();
?>
Buat file php ofc-line-soliddot.php
<script type="text/javascript" src="ofc/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"ofc/open-flash-chart.swf", "my_chart", "550", "200",
"9.0.0", "expressInstall.swf",
{"data-file":"data-line-soliddot.php"} );
</script>
<div id="my_chart" ></div>
Hasilnya :

Selanjutnya : hollow dot

Buat file get data data-hollow-dot.php
<?php
include 'ofc/php-ofc-library/open-flash-chart.php';

$data_1 = array();
$data_2 = array();
$data_3 = array();
for( $i=0; $i<6.2; $i+=0.2 )
{
$data_1[] = (sin($i) * 1.9) + 7;
$data_2[] = (sin($i) * 1.9) + 10;
$data_3[] = (sin($i) * 1.9) + 4;
}
$title = new title( date("D M d Y") );
$d = new hollow_dot();
$d->size(5)->halo_size(0)->colour('#3D5C56');
$line_1 = new line();
$line_1->set_default_dot_style($d);
$line_1->set_values( $data_1 );
$line_1->set_width( 2 );
$line_1->set_colour( '#3D5C56' );
$d = new hollow_dot();
$d->size(4)->halo_size(1)->colour('#668053');
$line_2 = new line();
$line_2->set_values( $data_2 );
$line_2->set_default_dot_style($d);
$line_2->set_width( 1 );
$line_2->set_colour( '#668053' );
$d = new hollow_dot();
$d->size(4)->halo_size(1)->colour('#C25030');
$line_3 = new line();
$line_3->set_values( $data_3 );
$line_3->set_default_dot_style($d);
$line_3->set_width( 6 );
$line_3->set_colour( '#C25030' );
$y = new y_axis();
$y->set_range( 0, 15, 5 );
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $line_1 );
$chart->add_element( $line_2 );
$chart->add_element( $line_3 );
$chart->set_y_axis( $y );
echo $chart->toPrettyString();
?>

Buat file tampilkan chart ofc-hollow-dot.php

<script type="text/javascript" src="ofc/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"ofc/open-flash-chart.swf", "my_chart", "550", "200",
"9.0.0", "expressInstall.swf",
{"data-file":"data-hollow-dot.php"} );
</script>
<div id="my_chart" ></div>
Hasilnya :

Selanjutnya :
b. Bar Chart
c. Horizontal Bar Chart
d. Pie Chart
e. Stacked Chart
f. Radar Chart
g.
5.