Scribd
Upload
79 views

Tutorial Open Flash Chart Line Chart

The document provides tutorials on creating different types of line charts using Open Flash Chart, including: 1) Basic line, line dot, and line solid dot charts with different dot styles; 2) Line charts with hollow dots, stars, bows, and anchors as the dot markers; 3) A line chart demonstrating dash styles and date/time on the x-axis. It also discusses using on-show animations like pop, explode, and fade to animate chart elements, and attaching on-click events to chart elements.

Uploaded by

Subandi Wahyudi
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
79 views

Tutorial Open Flash Chart Line Chart

The document provides tutorials on creating different types of line charts using Open Flash Chart, including: 1) Basic line, line dot, and line solid dot charts with different dot styles; 2) Line charts with hollow dots, stars, bows, and anchors as the dot markers; 3) A line chart demonstrating dash styles and date/time on the x-axis. It also discusses using on-show animations like pop, explode, and fade to animate chart elements, and attaching on-click events to chart elements.

Uploaded by

Subandi Wahyudi
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 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

You might also like