Active Graphs and Charts - Dynamic Date Graph Labels

Getting Started

Documentation

Tutorials

Examples

Dynamic Date Graph Labels

In this tutorial we show how to dynamically generate date 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/date-data.txt',
                                    JpGraphPropertyFile   : './scripts/date-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 20 days back from the current date
Format the dates
Output the X axis labels

<?php
/**
 * Generating Dynamic Date Labels
 *
 * This sample script generates daily date labels for the X axis labels
 *
 */
/*
 * work out the dates and place into
 * an array
 */
$labels = array();
$startTimestamp = strtotime("-20 days");
for ($i=0; $i<20; $i++)
{
    $labels[$i] = date("jS M", strtotime("+" . $i . " days" , $startTimestamp) );
} 
/*
 * build the output string
 */
$xlabels = "";
for ($i=0; $i<20; $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