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 set the graph to dynamically pull the data directly from MySQL databases.

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 sales (month INT PRIMARY KEY, productx REAL, producty REAL, productz REAL);

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

INSERT INTO sales VALUES(1,345,100,800); INSERT INTO sales VALUES(2,445,200,740); INSERT INTO sales VALUES(3,945,300,680); INSERT INTO sales VALUES(4,1145,400,697); INSERT INTO sales VALUES(5,780,450,524); INSERT INTO sales VALUES(6,640,700,100);

Step 2 - Create the dbinfo.php file

So that the graph can connect to the database it requires certain pieces of information including a database username and password.

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

<?php // Abstraction Class $jpDatabase["abstractionClass"] = "DBMySQL.class.php"; // Database Login Info $jpDatabase["dbServer"] = "localhost:3306"; $jpDatabase["dbUser"] = "[USER]"; $jpDatabase["dbPassword"] = "[PASSWORD]"; $jpDatabase["dbDatabase"] = "graphtestdb"; // Data Queries $jpDatabase["data"] = array(); // Query for Product X figures $jpDatabase["data"][0]["query"] = "SELECT productx FROM sales ORDER BY month "; $jpDatabase["data"][0]["valueField"] = "productx"; // Query for Product Y figures $jpDatabase["data"][1]["query"] = "SELECT producty FROM sales ORDER BY month "; $jpDatabase["data"][1]["valueField"] = "producty"; // Query for Product Z figures $jpDatabase["data"][2]["query"] = "SELECT productz FROM sales ORDER BY month "; $jpDatabase["data"][2]["valueField"] = "productz"; // 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.

The graphing software will execute each of the SELECT statements found in this file. The results of each query will be plotted as a series of data on the chart.

More information on the format and workings of this file can be found on the following page of the documentation:-
Database Information File »

Step 3 - Create the config file

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

width: 500 height: 400 backgroundcolor: white grid: true axis: true 3d: false depth3d: 10 ndecplaces: 0 thousandseparator: , displayvalues: false 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 titlefont: arial titlefontsize: 14 titlefontbold: bold titlefontitalic: false titlecolor: #8080B0 titleposition: -1,55 xtitletext: Month xtitlefont: arial xtitlefontsize: 11 xtitlefontbold: bold xtitlefontitalic: false xtitlecolor: #8080B0 xtitleposition: 255,-1 ytitletext: Value ytitlefont: arial ytitlefontsize: 11 ytitlefontbold: bold ytitlefontitalic: false ytitlecolor: #8080B0 ytitleposition: -1,230 xlabels: January|February|March|April|May|June| 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.txt 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 and [URL FilePath] with the url of the web directory where your page resides)

<html> <head> <title>Graph Test</title> </head> <body> <img src="http://[www.YourDomain.com]/jpowered/graph/line-graph.php? dbinfo=[Relative FilePath]/graphtest/dbinfo.php& config=[URL FilePath]/graphtest/config.txt" width=500 height=400> </body> </html>

Note:[Relative FilePath] should be replaced with a relative file path which is relative to the location of the line-graph.php file (it is NOT relative to the location of your web page).
For example if you place the dbinfo.php in a directory /graphtest/ then your dbinfo parameter should look like this:-

dbinfo=../../graphtest/dbinfo.php


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 Line Graph with 18 points plotted (6 for each series).