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 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(); "} );
Hasilnya
b.
line dot chart data_ofc_line_dot.php
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(); "} );
Hasilnya
c. line solid dot chart data_ofc_line_solid_dot.php
$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(); "} );
Hasilnya
d. line hollow dot chart data_ofc_line_hollow.php
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(); "} );
Hasilnya
e. line start chart data_ofc_line_star.php 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(); "} );
hasilnya
f. line bow chart data_ofc_line_bow.php 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(); "} );
hasilnya
g. line anchor chart data_ofc_line_anchor.php 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(); "} );
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