Chart Elements - X Axis Menu - X Axis
Generate 2 lines of 200 data points (the chart width is 300px, we
don't want more than 1 point per pixel!)
Use the various step attributes to change how the chart shows the labels and grid lines.
- steps: which labels to generate (available to the tooltip)
- visible-steps: which labels to show
The chart uses the step value to generate a list of X
labels, then the 'visible-steps' attribute then sets some of these to be visible or invisible.
Points on the chart that are in an X location that does not have label will not get a
tooltip (because it does not exist in the list)...
For example if you set steps to 2, the chart will generate labels: 0, 2, 4, 6,.... etc. A
point at location (1, 1) will not have an x axis label.
The list of labels may get massive, having a max X of 1,000,000 and label step of 1 will
generate a million labels and crash flash.
Documentation: x_axis,
x_axis_labels
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", "300", "9.0.0", "expressInstall.swf",
{"data-file":"gallery/x-axis-labels-step.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/x-axis-labels-step.php
<?php
include '../php-ofc-library/open-flash-chart.php';
function dot($col)
{
$default_dot = new dot();
$default_dot
->size(3)
->halo_size(1)
->colour($col)
->tooltip('X: #x_label#<br>Y: #val#');
return $default_dot;
}
function green_dot()
{
return dot('#3D5C56');
}
$data_1 = array();
$data_2 = array();
// generate 201 data points
for( $i=0; $i<20.1; $i+=0.1 )
{
$data_1[] = (sin($i) * 1.9) + 10;
$data_2[] = (cos($i) * 1.9) + 4;
}
$chart = new open_flash_chart();
$title = new title( count($data_2) );
$line = new line();
$line->set_values($data_1);
$line->set_default_dot_style(dot('#D07070'));
$line_2 = new line();
$line_2->set_default_dot_style(green_dot());
$line_2->set_values($data_2);
$line_2->set_colour( '#3D5C56' );
$chart->set_title( $title );
$chart->add_element( $line );
$chart->add_element( $line_2 );
//
// create an X Axis object
//
$x = new x_axis();
// grid line and tick every 10
$x->set_steps(5);
// now set up the x axis labels
$labels = new x_axis_labels();
// we have points at every X location, so label each X location
$labels->set_steps(1);
$labels->visible_steps(10);
// finally attach the label definition to the x axis
$x->set_labels($labels);
//
// Add the X Axis object to the chart:
//
$chart->set_x_axis( $x );
$y = new y_axis();
$y->set_range( 0, 15, 5 );
$chart->set_y_axis( $y );
echo $chart->toPrettyString();
|
