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(0001$idate('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'); 
$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(00011date('Y')),    // <-- min == 1st Jan, this year
    
mktime(000131date('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_range015); 

$chart = new open_flash_chart();
$title = new titlecount($data_2) );
$chart->set_title$title );
$chart->add_element$line );
$chart->set_x_axis$x );
$chart->set_y_axis$y );

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


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