Scribd
Upload
30 views

Tutorial Open Flash Chart Horizontal Chart Chart

The document provides tutorials for creating horizontal bar charts using Open Flash Chart. It includes examples of creating a basic horizontal bar chart, adding custom shapes to represent tasks over time similar to a Gantt chart, and formatting tooltips to appear on hover.

Uploaded by

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

Tutorial Open Flash Chart Horizontal Chart Chart

The document provides tutorials for creating horizontal bar charts using Open Flash Chart. It includes examples of creating a basic horizontal bar chart, adding custom shapes to represent tasks over time similar to a Gantt chart, and formatting tooltips to appear on hover.

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/ 6

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

You might also like