In order to better understand what is involved in creating a combined graph we will first show how this is done manually.

This is done by creating some PHP/GD code that creates a big enough empty image with plain GD commands and then get the image handles from the graphs that should be combined. The image handel can be returned from the Graph::Stroke() methods in the graphs that should be included. It is then possible to use these handles together with the GD image copy command and copy the individual graph images onto the previously created empty large GD image.

The following (almost complete) code shows how this can be done

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?php
// Assume we would like to combine graph1,2 and 3
// ...... create graph 1 here.......
$handle1 =  $graph1->Stroke( _IMG_HANDLER);
 
// ...... create graph 2 here.......
$handle2 =  $graph2->Stroke( _IMG_HANDLER);
 
// ...... create graph 3 here.......
$handle3 =  $graph3->Stroke( _IMG_HANDLER);
 
 
// Now create the "melting graph" which should contain all three graphs
// $WIDTH1 and $HEIGHT1 are width and height of graph 1 ($handle1)
// $WIDTH2 and $HEIGHT2 are width and height of graph 2 ($handle2)
// $WIDTH3 and $HEIGHT3 are width and height of graph 3 ($handle3)
// $x2,$x3 and $y2,$y3 shift from top left of global graph (ie position of 
// graph2 and graph3 in global graph)
 
$image = imagecreatetruecolor($WIDTH1,$HEIGHT1);
imagecopy($image, $handle1,0, 0, 0, 0, $WIDTH1,$HEIGHT1);
imagecopy($image, $handle2,$x1,$y1,0,0,$WIDTH2,$HEIGHT2);
imagecopy($image, $handle3,$x2,$y2,0,0,$WIDTH3,$HEIGHT3);
 
// Stream the result back as a PNG image
header("Content-type: image/png");
imagepng ($image);
?>

The advantages with this fully manual method are

but on the other hand the disadvantages are

It is here the class MGraph comes in. It will allow you to very easily create a combination of several graphs without knowing all the details on the GD library or calculating pixel positions.

This helper class abstracts away all the details about copying images as well as offering consistent interface (almost identical with the standard Graph class). A basic example will quickly reveal the elegance of using this helper class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php
//--------------------------------------
// Graph 1
//--------------------------------------
$graph1 = new Graph(...);
 
//... [Code to create graph1] ...
 
//--------------------------------------
// Graph 2
//--------------------------------------
$graph2 = new Graph(...);
 
//... [Code to create graph2] ...
 
//--------------------------------------
// Create a combined graph
//--------------------------------------
$mgraph = new MGraph();
$xpos1=3;$ypos1=3;
$xpos2=3;$ypos2=200;
$mgraph->Add($graph1,$xpos1,$ypos1);
$mgraph->Add($graph2,$xpos2,$ypos2);
$mgraph->Stroke();
?>

The above example illustrates the most basic usage of the MGraph class.

Each graph is added to the combined graph with a call to MGraph::Add() which in addition to the graph argument also takes the target X and Y coordinates where the graph will be placed in the combined image. The target X and Y coordinates are relative to any optional specified left and top margin.

In addition to adding graphs there are some basic formatting option for the combined graph that are listed below. The core methods provided by the MGraph class are

In the same way as the ordinary Graph class the MGraph class also have a property $footer which allows the setting of a left, center and right footer (see Adding a footer to the graph).

In addition the MGraph::Stroke() accepts a filename in the same way as the normal Graph::Stroke()

In addition to the basic usage as shown above it is also possible to add a background image in the combined graph. What is important to remember then is that all the subgraphs are copied onto the combined graph so normally they will be on top of the background image and hide it.

There are two ways of handling a background image

The background image itself is added with the method

The filename specifies the full name of the background image (including extension). Please note that the extension must be a valid image extension in order for the library to determine the format of the image file.

The second argument can be either numeric or a boolean in which case it specifies if the background image should be centered or if it should just be copied from the top left position. If it is numerical it is interpretated as the X-position for the optional X and Y coordinates specifying the position of the top left corner of the background image.

Figure 15.89. Mixing a background image with two subgraphs. In this case the mixing factor was 85 for both subgraphs. (Note: To reduce load time the image is quite hard compressed in JPEG so there are some artifacts in high-frequency areas.) (combgraphex2.php) shows a variant of Figure 15.88. A combination of a line graph at top and a bar graph in the bottom (combgraphex1.php) where a centered background image is mixed in with two subgraphs.

Figure 15.89. Mixing a background image with two subgraphs. In this case the mixing factor was 85 for both subgraphs. (Note: To reduce load time the image is quite hard compressed in JPEG so there are some artifacts in high-frequency areas.) (combgraphex2.php)

There are in principle no difference when combing graphs top/bottom or left/right. ?? shows an example of creating a graph that illustrates the changing weather conditions measure by Wind direction, speed and temperature in one graph with a detailed vertical scale showing the time.

Since this follows exactly the same principle laid out above the script should be fairly self explanatory. Note that we have suppressed the x-scale on two of the graphs to make better use of the available image size and also to create a stronger sense of "belonging" between the individual graphs.

Figure 15.90. Combining three graphs in one image (comb90dategraphex03.php)

There are some drawbacks using combined graphs