Warning this is an old version.

Take me to the latest version

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">

swfobject.embedSWF(
"open-flash-chart.swf", "my_chart",
"550", "200", "9.0.0", "expressInstall.swf",
{"data-file":"gallery/horizontal-bar-chart.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/horizontal-bar-chart.php
<?php

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 );

echo 
$chart->toPrettyString();
To see the data produced : gallery/horizontal-bar-chart.php, then 'view source'.
Support This Project
Adverts:


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