Charts - Stacked Bar Chart Menu - Stacked Chart

Make a stacked bar chart.

Object: bar_stack()

  • append_stack( $v )
    An array of values. Each value can be a number, a bar_stack_value or a null value.
  • function set_keys( $keys )
    an array of bar_stack_key.
  • This inherits from bar_base, so this implements all the bar chart methods.

Object: bar_stack_value( $val, $colour )

You can set the colour of a bar by passing in a bar_stack_value object instead of a number.

Object: bar_stack_key( $colour, $text, $font_size )

A bar stack can add many keys to the chart. You should add one for each colour used.

For stacked bar charts I tend to prefer using normal tooltips that only show when the mouse hovers an element. Try experimenting with the different settings to see which you like best.

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",
"650", "300", "9.0.0", "expressInstall.swf",
{"data-file":"gallery/stacked-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/stacked-bar-chart.php
<?php

include_once '../php-ofc-library/open-flash-chart.php';

$title = new title'Stuff I\'m thinking about, '.date("D M d Y") );
$title->set_style"{font-size: 20px; color: #F24062; text-align: center;}" );

$bar_stack = new bar_stack();

// set a cycle of 3 colours:
$bar_stack->set_colours( array( '#C4D318''#50284A''#7D7B6A' ) );

// add 3 bars:
$bar_stack->append_stack( array( 2.552.5 ) );

// add 4 bars, the fourth will be the same colour as the first:
$bar_stack->append_stack( array( 2.551.251.25 ) );


$bar_stack->append_stack( array( 5, new bar_stack_value(5'#ff0000') ) );
$bar_stack->append_stack( array( 2222, new bar_stack_value(2'#ff00ff') ) );

$bar_stack->set_keys(
    array(
        new 
bar_stack_key'#C4D318''Kiting'13 ),
        new 
bar_stack_key'#50284A''Work'13 ),
        new 
bar_stack_key'#7D7B6A''Drinking'13 ),
        new 
bar_stack_key'#ff0000''XXX'13 ),
        new 
bar_stack_key'#ff00ff''What rhymes with purple? Nurple?'13 ),
        )
    );
$bar_stack->set_tooltip'X label [#x_label#], Value [#val#]<br>Total [#total#]' );



$y = new y_axis();
$y->set_range014);

$x = new x_axis();
$x->set_labels_from_array( array( 'Winter''Spring''Summer''Autmn' ) );

$tooltip = new tooltip();
$tooltip->set_hover();

$chart = new open_flash_chart();
$chart->set_title$title );
$chart->add_element$bar_stack );
$chart->set_x_axis$x );
$chart->add_y_axis$y );
$chart->set_tooltip$tooltip );

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


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