Dynamic Graphs are added to a page with the standard HTML IMG tag. However the 'src' element, instead of being set to reference an actual image file, is set to reference the graphing software. The img tag is of the following format for all chart styles:-

Graph Image Tag Format

<img src="http://www.yourdomain.com/jpowered/graph/[GRAPH-STYLE]? data=[URLtoDATASOURCE]& config=[URLtoCONFIG]" width="" height="">

• [GRAPH-STYLE] - should be replaced with the chart style required (e.g. for a Line Graph this would be line-graph.php)
• [URLtoDATASOURCE] - should be the URL link to the data source. The datasource can a file, a script or a database.
• [URLtoCONFIG] - this is the URL link to the configuration settings file.

The width and height settings operate as normal and tell the browser what size the graph will be.

For example if we require a Vertical Bar Graph in a page where the data is supplied by a script ./data/vbardata.php and the config settings are in a file called vbarconfig.txt then the following img tag would be added to the page:-

Vertical Bar Graph Example Image Tag

<img src="http://www.yourdomain.com/jpowered/graph/vertical-bar-graph.php? data=http://www.yourdomain.com/data/vbardata.php& config=http://www.yourdomain.com/vbarconfig.txt" width="500" height="400">

Notice that here that full URL paths have been supplied for all files. Relative URLs can be also be used, however the paths will be relative to the ./jpowered/graph/ directory and not the dir of the page. With relative URLs the above img tag would become:-

Relative URL Example Image Tag

<img src="http://www.yourdomain.com/jpowered/graph/vertical-bar-graph.php? data=../../data/vbardata.php& config=../../vbarconfig.txt" width="500" height="400">

How the Graph is Produced - The Process

When a page containing a graphing img is loaded the following will occur:-

• browser issues a request to the graphing software for the graph image
• the graphing software will issue request / load files for the data and configuration
• if a database call has been requested then the queries will be issued for the data
• the graphing software will then dynamically construct the image in memory
• the graphing software then returns the graph image to the browser for display

Although the above process may seem complex, the processing time is very short and it is 100% cross browser compliant. Typically the time it takes to generate and display the graph is about the same as displaying a static image of equal size.

Sample IMG tags for each Graph type »

Also see:-

Graph Data »

Configuration Options and Parameters »