Open Flash Chart
Support This Project :: Home - Gallery - X Axis Labels Step
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 - X Axis Labels Step


Method: set_x_label_style()

See Gallery - X Axis Labels for the method definition.

Method: set_x_axis_steps()

See Gallery - X Axis Labels for the method definition.

In this example we have 2 years worth of data. The X axis labels are set to each month plus the year, e.g. 'January 08'. We set the X axis label style, step value to be 6, the chart the shows every 6th label.

We then use set_x_axis_steps() to only tick every 3, this then ticks every 3rd value.

These two methods allow us to remove visual complexity from the graph and stop from overwhelming the user with too much clutter. The graph above shows two years of data, and yet it still looks clean and crisp. Often using fewer labels makes the chart look better.

Note that the tooltips pick up the X axis label, even though it is not shown on the X axis.


Create the flash object
<?php
include_once 'ofc-library/open_flash_chart_object.php';
open_flash_chart_object( '100%', 200, 'http://'. $_SERVER['SERVER_NAME'] .'/open-flash-chart/gallery-data-24.php' );
?>

gallery-data-24.php
<?php

// generate some random data
srand((double)microtime()*1000000);

$data_1 = array();
$data_2 = array();
for( $i=0; $i<24; $i++ )
{
  $data_1[] = rand(11,19);
  $data_2[] = rand(1,10);
}

include_once( 'ofc-library/open-flash-chart.php' );
$g = new graph();

$g->set_data( $data_1 );
$g->line_dot( 3, 6, '#9933CC', 'Earnings', 18 );

$g->set_data( $data_2 );
$g->line( 2, '#50CC33', 'Beer money', 18 );

//
// LOOK: label every 6 months
//
$g->set_x_label_style( 10, '#9933CC', 0, 6, '#00A000' );
//
//
// ... and tick every 3 months (every quater):
//
$g->set_x_axis_steps( 3 );
//
//

$g->set_x_labels( array( 'January 07','February 07','March 07','April 07','May 07','June 07','July 07','August 07','September 07','October 07','November 07','December 07','January 08','February 08','March 08','April 08','May 08','June 08','July 08','August 08','September 08','October 08','November 08','December 08' ) );
$g->set_y_max( 20 );
$g->title( 'Profit', '{font-size: 25px; color: #FF8040}' );
echo $g->render();
?>
To see the data produced : gallery-data-24.php, then 'view source'.
Help support the project: Support This Project

Adverts:

AnyChart - flash charts, maps and dashboards