Gallery - Area Hollow Chart

Make an area chart.

Note to self: I must write a tutorial on how to use point objects

Object: area_hollow()

  • set_width( $w )
    Line width
  • set_colour( $colour )
    Line colour
  • set_values( $v )
  • set_dot_size( $size )
  • set_halo_size( $size )
    Set how big the halo (hollow area) around the dot is
  • set_key( $text, $font_size )
  • set_tooltip( $tip )
  • set_fill_colour( $colour )
  • set_fill_alpha( $alpha )
    A number between 0 and 1

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", "400", "9.0.0", "expressInstall.swf",
{"data-file":"gallery/area-hollow.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/area-hollow.php
<?php


$data = array();

for( $i=0; $i<6.2; $i+=0.2 )
{
  $tmp = sin($i) * 1.9;
  $data[] = $tmp;
}

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

$chart = new open_flash_chart();
$chart->set_title( new title( 'Area Chart' ) );

//
// Make our area chart:
//
$area = new area_hollow();
// set the circle line width:
$area->set_width( 2 );
$area->set_dot_size( 4 );
$area->set_halo_size( 1 );
$area->set_colour( '#838A96' );
$area->set_fill_colour( '#E01B49' );
$area->set_fill_alpha( 0.4 );
$area->set_values( $data );

// add the area object to the chart:
$chart->add_element( $area );

$y_axis = new y_axis();
$y_axis->set_range( -2, 2, 2 );
$y_axis->labels = null;
$y_axis->set_offset( false );

$x_axis = new x_axis();
$x_axis->labels = $data;
$x_axis->set_steps( 2 );

$x_labels = new x_axis_labels();
$x_labels->set_steps( 4 );
$x_labels->set_vertical();
// Add the X Axis Labels to the X Axis
$x_axis->set_labels( $x_labels );



$chart->add_y_axis( $y_axis );
$chart->x_axis = $x_axis;

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


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