Tutorial Open Flash Chart Horizontal Chart Chart
a. bar chart horizontal
data_ofc_horisontalbar.php
<?php
include_once 'ofc/php-ofc-library/open-flash-chart.php';
$x_labels = array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
$title = new title( "Our New House Schedule" );
$hbar = new hbar( '#86BBEF' );
$hbar->set_tooltip( 'Months: #val#' );
$hbar->append_value( new hbar_value(0,4) );
$hbar->append_value( new hbar_value(4,8) );
$h = new hbar_value(8,11);
$h->set_tooltip( "#left# to #right#<br>{$x_labels[8]} to {$x_labels[11]} (#val#
months)" );
$hbar->append_value( $h );
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $hbar );
$x = new x_axis();
$x->set_offset( false );
$x->set_labels_from_array( $x_labels );
$chart->set_x_axis( $x );
$y = new y_axis();
$y->set_offset( true );
$y->set_labels( array( "Make garden look sexy","Paint house","Move into house" ) );
$chart->add_y_axis( $y );
echo $chart->toPrettyString();
?>
ofc_horisontalbar.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_horisontalbar.php"} );
</script>
<div id="my_chart"></div>
hasilnya
b. bar horizontal shapes (Gantt chart)
data_ofc_horisontailbar_adv-shapes.php
<?php
include_once 'ofc/php-ofc-library/open-flash-chart.php';
//
// you could draw one larger more complex shape,
// or more simply use 3 shapes to make an arrow
//
function draw_arrow( $x, $y, $length )
{
$width = 0.03;
$top = new shape( '#80B11A' );
$top->append_value( new shape_point( $x, $y+$width ) );
$top->append_value( new shape_point( $x+$length+$width, $y+$width ) );
$top->append_value( new shape_point( $x+$length+$width, $y-$width ) );
$top->append_value( new shape_point( $x, $y-$width ) );
$down = new shape( '#80B11A' );
$down->append_value( new shape_point( $x+$length+$width, $y-$width ) );
$down->append_value( new shape_point( $x+$length+$width, $y-$width-0.37 ) );
$down->append_value( new shape_point( $x+$length-$width, $y-$width-0.37 ) );
$down->append_value( new shape_point( $x+$length-$width, $y-$width ) );
$arrow = new shape( '#80B11A' );
$arrow->append_value( new shape_point( $x+$length-0.2, $y-$width-0.37 ) );
$arrow->append_value( new shape_point( $x+$length, $y-0.6 ) );
$arrow->append_value( new shape_point( $x+$length+0.2, $y-$width-0.37 ) );
return array( $top, $down, $arrow );
}
function today()
{
$today = new shape( '#FA6900' );
$today->append_value( new shape_point( 5.9, -0.5 ) );
$today->append_value( new shape_point( 5.9, 5.5 ) );
$today->append_value( new shape_point( 6.1, 5.5 ) );
$today->append_value( new shape_point( 6.1, -0.5 ) );
return $today;
}
$title = new title( "Our New House Schedule" );
$hbar = new hbar( '#7A6A53' );
$hbar->append_value( new hbar_value(0,2) );
$h = new hbar_value(2,3);
$h->set_colour( '#27825C' );
$hbar->append_value( $h );
$hbar->append_value( new hbar_value(4,6) );
$hbar->append_value( new hbar_value(6,8.5) );
$hbar->append_value( new hbar_value(8.5,10) );
$hbar->append_value( new hbar_value(9,11) );
$chart = new open_flash_chart();
$chart->set_title( $title );
//
// items are added in Z order, so we add the 'today'
// marker first, so it is behind all other items
//
$chart->add_element( today() );
//
// Ugh, this is a bit icky. If you do this,
// you should sub-class 'chart' and add draw_arrow()
// as a method and add the shapes to '$this'
// But using a function makes the tutorial
// simple :-)
//
$shapes = draw_arrow( 2, 5, 0.5 );
foreach( $shapes as $shape )
$chart->add_element( $shape );
//
$shapes = draw_arrow( 3, 4, 1.5 );
foreach( $shapes as $shape )
$chart->add_element( $shape );
$shapes = draw_arrow( 6, 3, 0.5 );
foreach( $shapes as $shape )
$chart->add_element( $shape );
//
// we add the bars last so they are foremost
// (Z order)
//
$chart->add_element( $hbar );
//
$chart->add_y_axis( new y_axis() );
$x = new x_axis();
$x->set_offset( false );
$x>set_labels_from_array( array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov'
,'Dec') );
$chart->set_x_axis( $x );
$y = new y_axis();
$y->set_offset( true );
$y->set_labels(
array(
"Put up shelves",
"Ask for tools from Santa",
"Make garden look sexy",
"Buy shovel",
"Paint house",
"Move into house" ) );
$chart->add_y_axis( $y );
echo $chart->toPrettyString();
?>
ofc_horisontailbar_adv-shapes.php
<script type="text/javascript" src="ofc/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"ofc/open-flash-chart.swf", "my_chart", "700", "300",
"9.0.0", "ofc/expressInstall.swf",
{"data-file":"data_ofc_horisontailbar_adv-shapes.php"} );
</script>
<div id="my_chart"></div>
hasilya
c. tooltip hover
data_ofc_horisontalbar_tooltip_hover.php
<?php
include_once '../php-ofc-library/open-flash-chart.php';
$x_labels = array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','N
ov','Dec');
$title = new title( "Total hours on project mayhem" );
$hbar = new hbar( '#86BBEF' );
$hbar->set_tooltip( 'Months: #val#' );
$hbar->set_values( array(4,8,3,4,7,8) );
$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $hbar );
$x = new x_axis();
$x->set_offset( false );
$x->set_range( 0, 10 );
//$x->set_labels_from_array( $x_labels );
$chart->set_x_axis( $x );
$y = new y_axis();
$y->set_offset( true );
$y->set_labels( array( "Jeff","Geoff","Bob","Terry","Duncan","monk.e.boy" ) );
$chart->add_y_axis( $y );
$tooltip = new tooltip();
//
// LOOK:
//
$tooltip->set_hover();
//
//
//
$tooltip->set_stroke( 1 );
$tooltip->set_colour( "#000000" );
$tooltip->set_background_colour( "#ffffff" );
$chart->set_tooltip( $tooltip );
echo $chart->toPrettyString();
?>
ofc_horisontalbar_tooltip_hover.php
<script type="text/javascript" src="ofc/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"ofc/open-flash-chart.swf", "my_chart",
"400", "250", "9.0.0", "ofc/expressInstall.swf",
{"data-file":"data_ofc_horisontalbar_tooltip_hover.php"} );
</script>
<div id="my_chart"></div>
Hasilnya
