	Advanced Graphs and Charts for PHP Tutorials - Dynamic Configuration

Dynamic Configuration

Prerequisites

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 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.

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 <?php print $_REQUEST["year"]."\n"; ?>
titlefont:         arial
titlefontsize:     14
titlefontbold:     bold
titlefontitalic:   false
titlecolor:        #8080B0
titleposition:     -1,55

xtitletext:        <?php print $_REQUEST["year"]."\n"; ?>
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

xlabels:           January|February|March|April|May|June|July|August|September|October|November|December
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.

Ensure you replace [www.YourDomain.com] in both the IMG tag and the JavaScript function createGraph().

<html>

<head>
<title>Graph Test</title>

<script type="text/javascript">
function createGraph() {

        // which form ?
        formIndex = 0;
        for (i=0;i<document.forms.length;i++) {
                if (document.forms[i].name == "plotGraph") {
                        formIndex = i;
                }
        }

        // get all the values from the form
        selectbox = document.forms[formIndex].year;
        year = selectbox.options[selectbox.selectedIndex].value;

        // new image tag
        newcontent  = '<img src="http://[www.YourDomain.com]/jpowered/graph/vertical-cylinder-graph.php?';
        newcontent += 'datascript=../../graphtest/datafunction.php&';
        newcontent += 'config=../../graphtest/config.php&';
        newcontent += 'year='+year+'"';
        newcontent += 'width=800';
        newcontent += 'height=400>';

        document.getElementById("graphContent").innerHTML = newcontent;

        // return false to stop the 'normal' form submission
        // process and prevent the whole page being refreshed
        return false;
}
</script>
</head>

<body>

<form id="plotGraph" name="plotGraph" method="post" onsubmit="return createGraph();" action="">
Select Year
<select name="year" class="selectfield">
        <option value="2006">2006</option>
        <option value="2007">2007</option>
        <option value="2008">2008</option>
</select>
<input name="submit" value="Create Graph" type="submit">

</form>

<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&
year=2008"
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).

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.

How it works

When the 'Create Graph' button is clicked the JavaScript function 'createGraph()' is called. This function dynamically constructs the new IMG tag with the new year added as a parameter call to the Vertical Cylinder Graph.

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.

« back to Tutorial index

[ JPowered.com ] [ More Products ] [Support ]

Advanced Graphs and Charts for PHPTutorials - Dynamic Configuration