Está en la página 1de 12

Tutorial Open Flash Chart Line Chart

Sebelum membaca materi ini sebaiknya anda baca materi tutorial membuat chart dengan open
flash chart 2 untuk mengetahui requirememt yang dibutuhkan
a.

line chart

data_ofc_line_default_value.php
<?php
include 'ofc3/php-ofc-library/open-flash-chart.php';
$title = new title( date("D M d Y") );
$line_dot = new line();
$line_dot->set_values( array(1,2,1,null,null,null,null,null) );
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $line_dot );
echo $chart->toPrettyString();
?>
ofc_line_default_value.php
<script type="text/javascript" src="ofc3/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"ofc3/open-flash-chart.swf", "my_chart", "550", "200",
"9.0.0", "ofc3/expressInstall.swf",
{"data-file":"data_ofc_line_default_value.php"} );
</script>
<div id="my_chart"></div>
Hasilnya

b.

line dot chart


data_ofc_line_dot.php

<?php
include 'ofc3/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_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 2 ----$line_3_default_dot = new dot();
$line_3_default_dot->size(4)->halo_size(2);
$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 );
$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();
?>
ofc_line_dot.php
<script type="text/javascript" src="ofc3/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"ofc3/open-flash-chart.swf", "my_chart", "550", "200",
"9.0.0", "ofc3/expressInstall.swf",
{"data-file":"data_ofc_line_dot.php"} );
</script>
<div id="my_chart"></div>
Hasilnya

c.
line solid dot chart
data_ofc_line_solid_dot.php
<?php
include 'ofc3/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();
?>
Ofc_line_solid_dot.php
<script type="text/javascript" src="ofc3/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"ofc3/open-flash-chart.swf", "my_chart", "550", "200",
"9.0.0", "ofc3/expressInstall.swf",
{"data-file":"data_ofc_line_solid_dot.php"} );
</script>
<div id="my_chart"></div>
Hasilnya

d.
line hollow dot chart
data_ofc_line_hollow.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();
?>
Ofc_line_hollow.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", "ofc/expressInstall.swf",
{"data-file":"data_ofc_line_hollow.php"} );
</script>
<div id="my_chart"></div>
Hasilnya

e.
line start chart
data_ofc_line_star.php
<?php
include 'ofc/php-ofc-library/open-flash-chart.php';
$data = array();
$data2 = array();
for( $i=0; $i<6.2; $i+=0.2 )
{
$data[] = (sin($i) * 7) + 8;
$data2[] = (sin($i) * 7) + 11;
}
$title = new title( date("D M d Y") );
$s = new star();
$s->size(6)->halo_size(2);
$line = new line();
$line->set_default_dot_style($s);

$line->set_values( $data );
$line->set_width( 2 );
$s2 = new star();
$s2->size(6)->halo_size(2)->colour('#f00000')->rotation(180)->hollow(false);
$line2 = new line();
$line2->set_default_dot_style($s2);
$line2->set_values( $data2 );
$line2->set_width( 1 );
$y = new y_axis();
$y->set_range( 0, 20, 5 );
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $line );
$chart->add_element( $line2 );
$chart->set_y_axis( $y );
echo $chart->toPrettyString();
?>
ofc_line_star.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", "400",
"9.0.0", "ofc/expressInstall.swf",
{"data-file":"data_ofc_line_star.php"} );
</script>
<div id="my_chart"></div>
hasilnya

f.
line bow chart
data_ofc_line_bow.php
<?php
include 'ofc/php-ofc-library/open-flash-chart.php';
$data_1 = array();
$data_2 = array();
for( $i=0; $i<6.2; $i+=0.2 )
{
$data_1[] = (sin($i) * 1.9) + 7;
$data_2[] = (sin($i) * 1.9) + 4;
}
$title = new title( date("D M d Y") );
$d = new bow();
$d->size(6)->halo_size(0)->colour('#3D5C56')->rotation(90);
$line_1 = new line();
$line_1->set_default_dot_style($d);
$line_1->set_values( $data_1 );
$line_1->set_width( 1 );
$line_1->set_colour( '#3D5C56' );
$d = new 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( 2 );
$line_2->set_colour( '#668053' );
$y = new y_axis();
$y->set_range( 0, 10, 5 );
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $line_1 );
$chart->add_element( $line_2 );
$chart->set_y_axis( $y );

echo $chart->toPrettyString();
?>
ofc_line_bow.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", "ofc/expressInstall.swf",
{"data-file":"data_ofc_line_bow.php"} );
</script>
<div id="my_chart"></div>
hasilnya

g.
line anchor chart
data_ofc_line_anchor.php
<?php
include 'ofc/php-ofc-library/open-flash-chart.php';
$data_1 = array();
$data_2 = array();
for( $i=0; $i<6.2; $i+=0.2 )
{
$data_1[] = (sin($i) * 1.9) + 7;
$data_2[] = (sin($i) * 1.9) + 4;
}
$title = new title( date("D M d Y") );
$d = new anchor();
$d->size(6)
->halo_size(1)
->colour('#3D5C56')
->rotation(90)
->sides(3);
$line_1 = new line();
$line_1->set_default_dot_style($d);
$line_1->set_values( $data_1 );

$line_1->set_width( 1 );
$line_1->set_colour( '#3D5C56' );
$d = new anchor();
$d->size(4)
->halo_size(1)
->colour('#668053')
->rotation(45)
->sides(5);
$line_2 = new line();
$line_2->set_values( $data_2 );
$line_2->set_default_dot_style($d);
$line_2->set_width( 2 );
$line_2->set_colour( '#668053' );
$y = new y_axis();
$y->set_range( 0, 10, 5 );
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $line_1 );
$chart->add_element( $line_2 );
$chart->set_y_axis( $y );
echo $chart->toPrettyString();
?>
ofc_line_anchor.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", "ofc/expressInstall.swf",
{"data-file":"data_ofc_line_anchor.php"} );
</script>
<div id="my_chart"></div>
hasilnya

h.

line style dash chart

i.

x axis date time

j.

on show animation

Type on show : pop-up,explode,mid-slide,drop,fade-in,shrink-in

Animation: types
Delay: seconds, before anything happens
Cascade: seconds. The difference between when the left
and right items start to animate

Try:

k.

Red [drop, delay:0, cascade:1] with Blue [drop, 0.5,


cascade:1]
Red [drop, delay:0.5, cascade:2.5] (3 seconds until
finished) with Blue [drop, delay:0, cascade:1]
Red [drop, delay:0.2, cascade:0] with Blue [drop,
delay:0, cascade:0]

on click event