Contents Previous Next

4.4 The basic principle of JpGraph and the creation of images

The common pattern for creating graphs is

  1. Create a script that constructs the image, type, colors size and so on.
  2. A wrapper script which contains one or more <IMG> tags to position the graphs on the proper HTML page.

Of course it is of perfectly possible to call the image script directly in the browser to just display the generated image in the browser.

You should remember that it is also possible to pass arguments to the image script via the normal HTTP GET/POST arguments. For example

 <img src ="showgraph.php?a=1&b=2" >

This could for example be used to control the appearance of the image or perhaps send data to the image which will be displayed. Note that this is probably not the best way to send large amount of data to plot. Instead the only practical way, for large data sizes, is to get all the data in the image script, perhaps from a DB. Another alternative for large amount of data to be sent to the image script is by creating a POST request to the image script.

Note: Forcing the browser to update your image Some browser may not send back a request to the web browser unless the user presses "Refresh" (F5 - in most browsers). This can lead to problems that the user is seeing old data. A simple trick is to add a dummy time argument which is not used in the script. For example 
echo '<img src="myimagescript.php?dummy='.now().'">';
It is also important to be aware of any internal caching the browser might do. The general problem with dynamically generated images is that the image generating script (file) remains the same. This makes the browser believe that the data hasn't changed and if the browser already has issues a previous GET request and has the data cached it will not send a new GET if the timestamp on the file is the same since it then believes it my use the old cached version.

When it comes to the structure of your imaging script they will generally have the structure

  // ... Include necessary headers

$graph  = new Graph($width, $height, ...);

// ... code to construct the graph details

$graph->Stroke();

JpGraph is completely Object oriented so all calls will be action on specific instances of classes. One of the fundamental classes is the Graph() class which represents the entire graph.

After the creation of the Graph() object all the code lines to construct the details of the graph are added.

The final method called in an image script will most likely be the Graph::Stroke() method. This will send the constructed image back to the browser. A variation of this is used if the graph are supposed to have image maps. In that case the final method will be Graph::StrokeCSIM()

In addition to this standard usage pattern you can also choose to

The cache system, which lessens the burden of the PHP server, works by avoiding o run all the code that follows the initial Graph() call by checking if the image has already been created and in that case directly send back the previously created (and stored in a file) image to the browser. When using the cache system a filename must be specified in the initial Graph() call which is used to store the image in the cache system and possibly also a timeout value to indicate how long the image in the cache directory should be valid.

In many of the examples in this manual the following pattern will be used

 $graph = new  Graph(300,200 ,"auto");

The two first parameters specify the width and height of the graph and the third parameter the name of the image file in the cache directory. The special name 'auto' indicates that the image file will be given the same name as the image script but with the extension changed to indicate the graphic format used, i.e '.jpg', '.png' and so on.

Please note that the cache system by default is disabled and must be enabled by setting the proper define in the file "jpg-config.inc"

Contents Previous Next