Adding a Graph to a Web Page

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

Also see - Sample IMG tags for each Graph type

Graph Image Tag Format

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

[GRAPH-STYLE] - replace with the chart style (e.g. line-graph.php)
[URLtoDATASOURCE] - the URL link of the data source, a file, a script or database.
[URLtoCONFIG] - 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 load data and configuration information
- if a database call has been requested then the queries will be issued for the data
- the graphing software will dynamically construct the image in memory
- the graphing software will send 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 »

Package Index

Demo Index

Documentation

Troubleshooting Guide

Support