This tutorial assumes you have already downloaded and installed at least Version 6.0 of the graphing package.
The latest release can be downloaded here

It is also assumed that you have a basic understanding of how to add a graph to a web page. If not then please see the following page:-
Adding Graphs to Web Pages

This tutorial demonstrates how the X-Axis labels can be dynamically generated from input parameters passed through on the IMG tag request.

Directory Structure

In this tutorial you will be create a web page and a couple of configuration files. For the purposes of this tutorial you should create a directory /graphtest/ directory under your web root directory.

This tutorial also assumes that you installed the graphing software directly under the web root
(e.g. /webRootFilePath/jpowered/graph/ )

Step 1 - Create a test MySQL Database

For the purpose of this tutorial the following MySQL database should be created.-

CREATE DATABASE graphtestdb; USE graphtestdb; CREATE TABLE salesPerYear (salesPerYearID INT auto_increment, month INT, year INT, productx REAL, producty REAL, productz REAL, PRIMARY KEY (`salesPerYearID`), KEY `month` (`month`), KEY `year` (`year`) );

Now add the following data to the 'salesPerYear' table:-

INSERT INTO salesPerYear VALUES(0,1,2006,34500,10000,80000); INSERT INTO salesPerYear VALUES(0,2,2006,44500,20000,74000); INSERT INTO salesPerYear VALUES(0,3,2006,94500,30000,68000); INSERT INTO salesPerYear VALUES(0,4,2006,114500,40000,69700); INSERT INTO salesPerYear VALUES(0,5,2006,78000,45000,52400); INSERT INTO salesPerYear VALUES(0,6,2006,64000,70000,10000); INSERT INTO salesPerYear VALUES(0,7,2006,44500,30000,30000); INSERT INTO salesPerYear VALUES(0,8,2006,54500,50000,74000); INSERT INTO salesPerYear VALUES(0,9,2006,64500,20000,28000); INSERT INTO salesPerYear VALUES(0,10,2006,64500,30000,63700); INSERT INTO salesPerYear VALUES(0,11,2006,38000,55000,82400); INSERT INTO salesPerYear VALUES(0,12,2006,74000,30000,90000); INSERT INTO salesPerYear VALUES(0,1,2007,74500,55000,80000); INSERT INTO salesPerYear VALUES(0,2,2007,78500,54000,84000); INSERT INTO salesPerYear VALUES(0,3,2007,72500,53000,88000); INSERT INTO salesPerYear VALUES(0,4,2007,73500,52000,89700); INSERT INTO salesPerYear VALUES(0,5,2007,78000,55000,82400); INSERT INTO salesPerYear VALUES(0,6,2007,74000,50000,80000); INSERT INTO salesPerYear VALUES(0,7,2007,74500,51000,80000); INSERT INTO salesPerYear VALUES(0,8,2007,77500,52000,84000); INSERT INTO salesPerYear VALUES(0,9,2007,74500,53000,88000); INSERT INTO salesPerYear VALUES(0,10,2007,78500,54000,89700); INSERT INTO salesPerYear VALUES(0,11,2007,78000,55000,82400); INSERT INTO salesPerYear VALUES(0,12,2007,74000,54000,80000); INSERT INTO salesPerYear VALUES(0,1,2008,84500,20000,20000); INSERT INTO salesPerYear VALUES(0,2,2008,84500,30000,24000); INSERT INTO salesPerYear VALUES(0,3,2008,84500,35000,28000); INSERT INTO salesPerYear VALUES(0,4,2008,84500,36000,29700); INSERT INTO salesPerYear VALUES(0,5,2008,88000,45000,22400); INSERT INTO salesPerYear VALUES(0,6,2008,84000,42000,20000); INSERT INTO salesPerYear VALUES(0,7,2008,84500,44000,20000); INSERT INTO salesPerYear VALUES(0,8,2008,84500,47000,24000); INSERT INTO salesPerYear VALUES(0,9,2008,84500,42000,28000); INSERT INTO salesPerYear VALUES(0,10,2008,84500,43000,29700); INSERT INTO salesPerYear VALUES(0,11,2008,88000,45000,22400); INSERT INTO salesPerYear VALUES(0,12,2008,84000,48000,20000);

Step 2 - Create a Custom Data Function

Create a file named datafunction.php which contains the following:-

<?php function datascript() { $dataLines = array(); // ensure $_REQUEST["year"] is set and has a value // between 2006 and 2008. if (!isset($_REQUEST["year"])) { $_REQUEST["year"] = 2008; } if ($_REQUEST["year"]>2008 || $_REQUEST["year"]<2006) { $_REQUEST["year"] = 2008; } // connect to the database $dbLink = mysql_connect("localhost:3306", [USER], [PASSWORD]); if (!$dbLink) { print "Could not connect: ".mysql_error(); exit(0); } if (!mysql_select_db("graphtestdb", $dbLink)) { print "Could not select database: ".mysql_error(); exit(0); } // Contstruct the data lines for ProductX, ProductY and Product Z $sql = "SELECT productx,producty,productz FROM salesPerYear WHERE year=".$_REQUEST["year"]." ORDER BY month "; $result = mysql_query($sql, $dbLink); $dataNum = 1; while ( $row = mysql_fetch_array($result,MYSQL_ASSOC) ) { $dataLines[] = "data".$dataNum."series1: ".$row["productx"]; $dataLines[] = "data".$dataNum."series2: ".$row["producty"]; $dataLines[] = "data".$dataNum."series3: ".$row["productz"]; $dataNum++; } // release the result set and close the databse connection mysql_free_result($result); mysql_close($dbLink); // return the data lines to the graphing software return $dataLines; } // Make sure there are no characters (not even a space or return character) // after the following line ?>

Replace [USER] and [PASSWORD] with valid logon details for your MySQL server.

Place the file on your web server in a directory /graphtest/ under your web root directory

Note: The above assumes that your MySQL server is running on the same machine as your Web Server. If this is not the case then you will need to replace "localhost:3306" with the correct route to your MySQL server.

Step 3 - Create the config file

Create a file named 'config.php' and add the following contents to it. This file should then be placed in the /graphtest/ directory.

width: 800 height: 400 quality: very high backgroundcolor: white grid: true axis: true 3d: true ndecplaces: 0 thousandseparator: , barspacing: 2 barwidth: 16 displaybarvalues: false gradientfill: true series1: #BB0000|Product X|left|8|triangle|true|solid| series2: #0000BB|Product Y|left|8|box|true|solid| series3: #FF8800|Product Z|left|8|diamond|true|solid| gridbgcolor: #FFFFCC axiscolor: dark grey floorcolor: light gray gridcolor: grey gridstyle: dotted ylables: true yfont: arial yfontsize: 11 yfontbold: bold yfontitalic: false ylabelcolor: black ylabelpre: $ ylabelpost: titletext: Product Sales by Month for 2008 titlefont: arial titlefontsize: 14 titlefontbold: bold titlefontitalic: false titlecolor: #8080B0 titleposition: -1,55 xtitletext: 2008 xtitlefont: arial xtitlefontsize: 11 xtitlefontbold: bold xtitlefontitalic: false xtitlecolor: #8080B0 xtitleposition: -1,-1 ytitletext: Value ytitlefont: arial ytitlefontsize: 11 ytitlefontbold: bold ytitlefontitalic: false ytitlecolor: #8080B0 ytitleposition: -1,230 <?php // dynamically generate the X Axis labels from // the request parameter "startDate" $year = substr($_REQUEST["startDate"],0,4); $month = substr($_REQUEST["startDate"],5,2); $day = substr($_REQUEST["startDate"],8,2); $startDate = mktime(0,0,0,$month,$day,$year); $xlabelValue = ""; for ($i=0;$i<12;$i++) { $monthName = date("F 'y",$startDate); $xlabelValue .= $monthName."|"; // add 1 month to for the next month $startDate = strtotime("+1 month",$startDate); } // write out the xlabels parameter print "xlabels: ".$xlabelValue."\n"; ?> xlabelorientation: Up angle xlabeloffset: 0 xlabelcolor: #8080B0 xlabelfont: arial xlabelfontsize: 10 xlabelfontbold: false xlabelfontitalic: false legend: true legendstyle: horizontal legendbgcolor: #EEEEEE legendbordercolor: #CCCCFF legendtextcolor: #8080B0 legendtitle: legendfont: arial legendfontsize: 11 legendfontbold: false legendfontitalic: false legendposition: -1,64 // for a full explanation of these parameters see:- // http://www.jpowered.com/php-scripts/adv-graph-chart/documentation/configurationOptions.htm

Notes: This config.php file contains the parameters which determine certain aspects of the graph like colors and fonts. For the function and options of each parameter see the following page:-
Graph Parameters »

Step 4 - Create a web page and add the Graph to it

Add this HTML code to your page (replacing [www.YourDomain.com] with the actual domain of your web site. Place this page in the /graphtest/ directory.

<html> <head> <title>Graph Test</title> </head> <body> <br><br> <div id="graphContent"> <img src="http://[www.YourDomain.com]/jpowered/graph/vertical-cylinder-graph.php? datascript=../../graphtest/datafunction.php& config=../../graphtest/config.php& startDate=2008-01-01" width=800 height=400> </div> </body> </html>

Note:The relative file paths are relative to the location of the vertical-cylinder-graph.php file (they are NOT relative to the location of the web page).


Save the web page and load it up to your web server placing it in the /graphtest/ directory.

Final Step - View the page in a browser

Open your web browser and view the page. You should see a Vertical Cylinder Graph with 36 bars plotted (12 for each series).

How it works

When the page loads the graph function is called and the 'startDate' parameter is passed through.

The graph function in turn passes this through to the config.php script which then dynamically generates the x-axis labels using the value of startDate as a starting point.

In the config.php The output date format is set to 'month year' and the time interval to 1 month. However these can be changed to whatever interval and date/time format is required.