The principle is exactly the same as for line plots but instead of an x-y coordinate each data point represents a value on one of the axis. The number of axis will automatically be the same as the number of data points. Even through the library itself does not impose any restrictions on the number of axis there is a practical limit so it is probably best to keep the number of data points limited to around 10-12.

Typical data set for a radar plot is then given as

1

$data = array( axis<1>_value, axis<2>_value, ..., axis<n>_value );

The plot points are assigned to the axis in a counter-clockwise direction starting at 12 a'clock. If clock-wise order is needed the input data must be reversed.

Creation of a radar graph follows the now familiar steps of first creating an instance of class RadarGraph and then adding one or several instances of class RadarPlot as the following code snippet shows

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
29
30
31
32
33
34

<?php
// Some data
$data1 = array( ... ) ;
$data2 = array( ... ) ;
 
$width  = ... ;
$height = ... ;
 
// Setup a basic radar graph
$graph = new RadarGraph($width,$height);
$graph->SetScale('lin');
 
// Add a title to the graph
$graph->title->Set('Quality result');
 
// .. add any other common graph formatting
 
// Create the first radar plot with formatting
$plot1 = new RadarPlot($data1);
$plot1->SetLegend('Goal');
$plot1->SetColor(̈́red', 'lightred');
 
// Create the second radar plot
$plot2 = new RadarPlot($data2);
$plot2->SetLegend('Actual');
$plot2->SetColor('blue', 'lightred');
 
// Add the plots to the graph
$graph->Add($plot2);
$graph->Add($plot1);
 
// and display the graph
$graph->stroke()
?>

As an illustration two very basic radar graphs with one radar plot each are displayed below. The left figure uses only default values and the right figure uses the ame data but adjusts a few properties to make the graph a bit more interesting.

Figure 16.33. A basic radargraph with no formatting (radarex1.php)

Figure 16.34. A basic radargraph with minimal formatting (radarex2.php)

Each radar plot can also have a legend. As usual the text for the legend is created by using the method

The legend box is accessed through the "$legend" property of the graph and this can be used to adjust the size, position and layout of the legend box (as described in Section 14.4).

In exactly the same way as for line graphs it is possible to add plot marks in radar plots. The mark property is accessed through the instance variable

(All available plot marks are listed in Appendix E)

For example to add a red ball marker the following line must be added

1

$radarplot->mark->SetType(MARK_IMG_SBALL,'red');

In Figure 16.35 we show a radar graph with added plot-marks. In addition we have also chosen to hide the tick marks on the axis and adjust some of the default colors.

Figure 16.35. Adding plot marks to a radar graph (radarmarkex1.php)

(See Chapter 10 for a full description on the usage of CSIM together with the library)

If markers are shown for the polar plot (by setting the mark property of the plot) each marker can be a hot spot in a client side image map. The target URL are as usual specified with the SetCSIMTargets() as the following short code snippet shows

1
2
3
4
5
6
7
8
9

<?php
// Start by specifying the proper URL targets
$targets  = array( "#1" , "#2" , ....... );
$radarplot = new RadarPlot( $data );
$radarplot->mark->SetType( MARK_SQUARE );
$radarplot->SetCSIMTargets( $targets );
$graph->Add( $radarplot );
$graph->StrokeCSIM(); 
?>

The scale of the axis can be either a linear or a logarithmic scale and is specified with the method

The size and position of the radar graph are adjusted by the two methods

The background color can be adjusted by

All axis have the same formatting and the axis is access through the "$axis" property of the RadarGraph class. For example make the axis 2 pixels wide the following lines would be needed

1
2

$radargraph = new RadarGraph($width,$height);
$radargraph->axis->SetWeight(2);

The axis supports all the same formatting options as for standard x-y graphs. Some of the more commonly used methods for the axis formatting are

In order to specify the titles for each axis the method

In order to adjust the property of the title for the axis the "$title" property of the axis is used. For example, to set the font and color for the titles of the axis the following two lines are needed

1
2
3
4

<?php
$radargraph->axis->title->SetFont(FF_ARIAL,FS_BOLD,12);
$radargraph->axis->title->SetColor('darkred');
?>

The tick marks can also be adjusted with the following methods

Each major tick mark can also be connected together to create a grid in the graph. The grid is accessed through the '$grid' property of the graph. To enable the grid and set the line style to "dotted" the following two lines must be added

1
2

$radargraph->grid->Show ();
$radargraph->grid->SetLineStyle( 'dashed' );

An example of dashed grid lines are shown in Figure 16.36. By default the grid lines have a gray color and are drawn behind the radar plot and hence part of the grid lines are obscured.

The property of the grid lines are adjusted by accessing the "$grid" line. The available methods to format grid lines are:

To make the grid lines in Figure 16.36 more visible lets change the color by using the SetColor() method on the grid. In addition we can also adjust the background color. The result of this is shown in Figure 16.37

Figure 16.36. Enabling a dashed grid line (radarex4.php)

Figure 16.37. Enabling a dashed grid line with red (radarex6.php)

In order to change the (default) linear scale o the axis to use logarithmic scale the following line must be added:

1

$graph->SetScale('log');

Figure 16.38 shows an example of a logarithmic radar graph

Figure 16.38. Using a logarithmic scale (radarlogex1.php)

Radar graph are an excellent example where enabling anti-alias can make a large visual difference. In order to enable anti-aliasing the method

must be called, for example as in

1

$radargraph->img->SetAntiAliasing();

To give an example of this Figure 16.39 shows an anti-aliased version of Figure 16.38 . (Another comparative example of enabling anti-aliasing is also given in Figure 14.80 and Figure 14.81.)

Figure 16.39. Enabling anti-alias for the logarithmic radar example (radarlogex1-aa.php)

As a final example we shown a radar graphs were we have adjusted many of the available properties, such as specifying a manual scale, to achieve the result shown in Figure 16.40

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
29
30
31
32
33
34
35
36

<?php // content="text/plain; charset=utf-8"
require_once ('jpgraph/jpgraph.php');
require_once ('jpgraph/jpgraph_radar.php');
 
$graph = new RadarGraph(300,300);
$graph->SetScale('lin',0,50);
$graph->yscale->ticks->Set(25,5);
$graph->SetColor('white');
$graph->SetShadow();
 
$graph->SetCenter(0.5,0.55);
 
$graph->axis->SetFont(FF_FONT1,FS_BOLD);
$graph->axis->SetWeight(2);
 
// Uncomment the following lines to also show grid lines.
$graph->grid->SetLineStyle('dashed');
$graph->grid->SetColor('navy@0.5');
$graph->grid->Show();
 
$graph->ShowMinorTickMarks();
 
$graph->title->Set('Quality result');
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->SetTitles(array('One','Two','Three','Four','Five','Sex','Seven','Eight','Nine','Ten'));
 
$plot = new RadarPlot(array(12,35,20,30,33,15,37));
$plot->SetLegend('Goal');
$plot->SetColor('red','lightred');
$plot->SetFillColor('lightblue');
$plot->SetLineWeight(2);
 
$graph->Add($plot);
$graph->Stroke();
 
?>

Figure 16.40. A more complex example of a radar graph with a manual scale (fixscale_radarex1.php)