Chart Elements - X Axis Menu - X Axis Date and Time
Make use of UNIX date and time values in the X axis of the chart.
The #date:___# magic variable is an odd one, it tells the chart to display the number as a
formatted date. So to make the date come out as 'day month year' you'd:
- "#date:l jS, M Y" is used in the X axis of the above chart.
- "#date:Y-m-d at H:i#" would generate something like this: 2008-12-06 at 14:27
- "#date:g:i:s a#" would generate something like this: 2:27:11 pm
the text after the : uses the PHP date formatting rules.
This functionality came from a community modification of open flash chart, so for more information
please check out the date:___ documentation.
Scroll to the bottom of the page.
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-date.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-date.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#<br>#date:Y-m-d at H:i#');
return $default_dot;
}
function green_dot()
{
return dot('#3D5C56');
}
$data_1 = array();
$data_2 = array();
// generate 31 data points
for( $i=1; $i<32; $i++ )
{
$x = mktime(0, 0, 0, 1, $i, date('Y'));
$y = (sin($i) * 2.5) + 10;
$data_1[] = new scatter_value($x, $y);
$data_2[] = (cos($i) * 1.9) + 4;
}
$def = new hollow_dot();
$def->size(3)->halo_size(2)->tooltip('#date:d M y#<br>Value: #val#');
$line = new scatter_line( '#DB1750', 3 );
$line->set_values($data_1);
$line->set_default_dot_style( $def );
//
// create an X Axis object
//
$x = new x_axis();
// grid line and tick every 10
$x->set_range(
mktime(0, 0, 0, 1, 1, date('Y')), // <-- min == 1st Jan, this year
mktime(0, 0, 0, 1, 31, date('Y')) // <-- max == 31st Jan, this year
);
// show ticks and grid lines for every day:
$x->set_steps(86400);
$labels = new x_axis_labels();
// tell the labels to render the number as a date:
$labels->text('#date:l jS, M Y#');
// generate labels for every day
$labels->set_steps(86400);
// only display every other label (every other day)
$labels->visible_steps(2);
$labels->rotate(90);
// finally attach the label definition to the x axis
$x->set_labels($labels);
$y = new y_axis();
$y->set_range( 0, 15, 5 );
$chart = new open_flash_chart();
$title = new title( count($data_2) );
$chart->set_title( $title );
$chart->add_element( $line );
$chart->set_x_axis( $x );
$chart->set_y_axis( $y );
echo $chart->toPrettyString();
|
Adverts:
|