Active Graphs and Charts - Dynamic Time Graph Labels

Getting Started

Documentation

Tutorials

Examples

Dynamic Time Graph Labels

In this tutorial we show how to dynamically generate time labels for the chart axis

Configure the Graph

The first step is to configure the graph software to request the properties from a server script. This is done with the parameter 'JpGraphPropertyFile'. Here is the configuration used for this graph:-

    window.onload = function () {
        /**
         * draw the graph
         */
        var thegraph = new JpGraph('stacked vertical bar',
                                   'graph',
                                   null,
                                   {
                                    JpGraphDataFile       : './scripts/temperature-data.txt',
                                    JpGraphPropertyFile   : './scripts/time-props.php',
                                   });
    }

Create the Property Script

For this example we have created the property script with PHP. The server side script can be written in any server side language and at the bottom of this page there are sample scripts for ASP and PHP

The script is fairly straight forward and performs the following steps:-

Calculate 12 hours back from the current time
Format the times
Output the X axis labels

<?php
/**
 * Generating Dynamic Time Labels
 *
 * This sample script generates hourly time labels for the X axis
 */

/*
 * work out the times and place into
 * an array
 */
$labels = array();
$startTimestamp = strtotime("-12 hours");
for ($i=0; $i<12; $i++)
{
    $labels[$i] = date("g:ia", strtotime("+" . $i . " hours" , $startTimestamp) );
} 

/*
 * build the output string
 */
$xlabels = "";
for ($i=0; $i<12; $i++)
{
    $xlabels .= $labels[$i] . "|";
}

/*
 * output the date labels
 */
echo "xLabels = " . $xlabels . PHP_EOL;
?>

Sample Property Scripts

The server script may be written in any language, here are sample scripts for some common languages:-

back to tutorial index