This tutorial demonstrates how to dynamically calculate the values of configuration parameters at runtime.
For example the data and x-axis labels may need to be constructed based upon selections made be the user.
The following tutorials assume you have already downloaded and installed the
PHP Advanced Graphs and Charts package.
The latest release can be downloaded here
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/ )
For the purpose of this tutorial the following MySQL database should be created.-
Now add the following data to the 'salesPerYear' table:-
Create a file named datafunction.php which contains the following:-
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.
Create a file named 'config.php' and add the following contents to it. This file should then be placed in the /graphtest/ directory.
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 »
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.
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.
Open your web browser and view the page.
You should see a Vertical Cylinder Graph with 36 bars plotted (12 for each series).
When you select a different year you should see a different set of data displayed and the graph titles change based upon the selection made.
The Vertical Cylinder Graph receives the new request and passes the 'year' parameter through to both the datafunction and the config script
The new graph image is constructed and returned to the browser for display
All this happens without refreshing the page
This is a fairly simple example of how to pass user selected / input data through to the graph functions and use that data to dynamically construct graph images. You can pass any number of the variables through the graph functions which in turn will be passed on to the data and config processes.