Gallery - Horizontal Chart

Make a horizontal bar chart.

Object: hbar( $colour )

  • append_value( $v )
    Add a hbar_value object
  • set_colour( $colour )
    Bar colour
  • set_key( $text, $font_size )
  • set_tooltip( $tip )

    Magic values:

    • #left# - the left value
    • #right# - the right value
    • #val# - the width of the bar

Object: hbar_value( $left, $right )

  • set_colour( $colour )
  • set_tooltip( $tip )
    See above.

To add more than one set of bars to a bar chart, see bar chart 2.

For details of how we changed the key text styles, see Line and Key.

Another more complex horizontal bar chart can be found on the shapes (Gantt chart) page.

Look at this example, we change the tooltip style to be hover: tooltip hover.

This goes into the <head> of the page:

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">

"open-flash-chart.swf", "my_chart",
"550", "200", "9.0.0", "expressInstall.swf",
{"data-file":"gallery/horizontal-bar-chart.php"} );

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]


include_once '../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_offsetfalse );
$x->set_labels_from_array$x_labels );
$chart->set_x_axis$x );

$y = new y_axis();
$y->set_offsettrue );
$y->set_labels( array( "Make garden look sexy","Paint house","Move into house" ) );
$chart->add_y_axis$y );

To see the data produced : gallery/horizontal-bar-chart.php, then 'view source'.
Support This Project

Open Flash Chart logo by | Syntax highlights are by GeSHi