Gallery - Shapes

Add shapes to the chart.

Object: shape( $colour )

See also arrows.

  • append_value( $v )
    Add a shape_point object

Object: shape_point( $x, $y )

$x and $y are translated to chart positions.

Note all items are added to the chart in Z (depth) order. Items added first are drawn first. So it is a good idea to add your shapes before any charts so the shapes are drawn in the background (and do not cover the chart items)

A simpler chart can be found on the horizontal bar chart page.

This goes into the <head> of the page:

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"open-flash-chart.swf", "my_chart", "700", "300",
"9.0.0", "expressInstall.swf",
{"data-file":"gallery/adv-shapes.php"} );
</script>
This writes the chart into a div with id="my_chart", right click and view source to see it in action, [the tutorials have more details]

gallery/adv-shapes.php
<?php

include_once '../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_point5.9, -0.5 ) );
    
$today->append_value( new shape_point5.95.5 ) );
    
$today->append_value( new shape_point6.15.5 ) );
    
$today->append_value( new shape_point6.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_elementtoday() );
//
// 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_arrow250.5 );
foreach( 
$shapes as $shape )
    
$chart->add_element$shape );

// 
$shapes draw_arrow341.5 );
foreach( 
$shapes as $shape )
    
$chart->add_element$shape );

$shapes draw_arrow630.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_offsetfalse );
$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_offsettrue );
$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();
To see the data produced : gallery/adv-shapes.php, then 'view source'.
Support This Project
Adverts:


Open Flash Chart logo by numb.me.uk. | Syntax highlights are by GeSHi