Open Flash Chart

:: Home - Gallery - Bar Chart 3D

Info: Open Flash Chart 2 is out. Version 1.x and these pages will never disappear and the charts will continue working forever, but further development on 1.x has stopped. Take a look at version 2 here Open Flash Chart 2.

Gallery - Bar Chart 3D

We at Open flash Chart always strive to make things easy for ourselves. So 3D bar charts have exactly the same parameters as the bar object. The 3D effect is created by shifting the bar colour towards white (#FFFFFF) by about 10%, these two colours are then blended to make the bars look 3D.

Object: bar_3D()

bar_3d( integer $alpha, integer $colour )

See the bar method for details on these parameters.

Method: graph::set_x_axis_3d()

set_x_axis_3d( integer $size )

$size is the depth in pixels of the 3D X axis slab. This is a method in the graph object.

Note: How making the X axis 3D moves the X axis labels left about 12px. It also creates some padding inside the left of the chart, so the left most bar does not obscure the Y axis.

Using a 3D axis with a line chart will show this inner left padding. Using 3D bars with a normal 2D X axis will show the left most bar obscuring the Y axis. Try experimenting with different options to see what happens.

Create the flash object

<?php
include_once 'ofc-library/open_flash_chart_object.php';
open_flash_chart_object( 750, 260, 'http://'. $_SERVER['SERVER_NAME'] .'/open-flash-chart/gallery-data-31.php' );
?>

gallery-data-31.php

<?php

include_once( 'ofc-library/open-flash-chart.php' );
srand((double)microtime()*1000000);


$bar_red = new bar_3d( 75, '#D54C78' );
$bar_red->key( '2006', 10 );

// add random height bars:
for( $i=0; $i<10; $i++ )
  $bar_red->data[] = rand(2,5);

//
// create a 2nd set of bars:
//
$bar_blue = new bar_3d( 75, '#3334AD' );
$bar_blue->key( '2007', 10 );

// add random height bars:
for( $i=0; $i<10; $i++ )
  $bar_blue->data[] = rand(5,9);

// create the graph object:
$g = new graph();
$g->title( '3D Bar Chart', '{font-size:20px; color: #FFFFFF; margin: 5px; background-color: #505050; padding:5px; padding-left: 20px; padding-right: 20px;}' );

//$g->set_data( $data_1 );
//$g->bar_3D( 75, '#D54C78', '2006', 10 );

//$g->set_data( $data_2 );
//$g->bar_3D( 75, '#3334AD', '2007', 10 );

$g->data_sets[] = $bar_red;
$g->data_sets[] = $bar_blue;

$g->set_x_axis_3d( 12 );
$g->x_axis_colour( '#909090', '#ADB5C7' );
$g->y_axis_colour( '#909090', '#ADB5C7' );

$g->set_x_labels( array( 'January','February','March','April','May','June','July','August','September','October' ) );
$g->set_y_max( 10 );
$g->y_label_steps( 5 );
$g->set_y_legend( 'Open Flash Chart', 12, '#736AFF' );
echo $g->render();
?>

To see the data produced : gallery-data-31.php, then 'view source'.

Help support the project:

Adverts:

AnyChart - flash charts, maps and dashboards