In order to create Radar graphs the module
jpgraph_radar.php" must first be included.
Radar plots are most often used to display how a number of results compare to some set targets. They make good use of the human ability to spot symmetry (or rather un-symmetry). Radar plots are not suitable if high accuracy readings from the graph are needed since, by it's nature, it can be difficult to read out very detailed values.
Figure 16.32 shows a basic radar graph with two radar plots added.
Figure 16.32. A typical radar graph with two radar plots added
Radar graphs are created as an instance of
class RadarGraph which
inherits all common formatting options from the standard
such as titles, background colors, background titles, etc.
Tabbed titles cannot not be used for radar graphs since there is no applicable concept of a plot area
The following facts applies to a radar graph
There is one axis for each data point
Each axis may have an arbitrary title which is automatically positioned
A radar plot may be filled or open
The first axis is always oriented vertical and is the only axis with labels
Several radar plots can be combined in one radar graph
Axis can have either linear or logarithmic scale on the axis
In addition all the normal formatting of labels, background colors, grid lines, plot colors, fill colors etc. can be adjusted. The rest of this sections will show some of the typical formatting options available.
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
$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
class RadarGraph and then adding one or several
class RadarPlot as the following code snippet
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
// 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
Figure 16.34. A basic radargraph with minimal formatting
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
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
(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
// 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 scale is specified as a string and can be either
lin" or "
The size and position of the radar graph are adjusted by the two methods
The size is specified as a fraction of min($weight,$height) and indicates the length of the axis.
The center of the graph can be specified as either a fraction of the width/height or as an absolute position.
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
$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
Set the color of the axis and (optional) the labels
Specifies width in pixels of the axis
Specify the format string to be used for the labels
Set the callback function to be used for the label formatting
Sets the font property for the labels of the axis. Note that this will not effect the font property of the title of the axis.
In order to specify the titles for each axis the method
The argument is an array with as many entries as there are axis and where each entry specifies a text string which is the title of the axis.
Example 16.4. Having the name of the months as title of the axis
The easiest way to have the month name as titles is to use the
library global variable "
$titles = $gDateLocale->GetShortMonth(); $radargraph->SetTitles( $titles );
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
1 2 3 4
The tick marks can also be adjusted with the following methods
Hide all tick marks
Enable/Disable tick marks
Adjust the tick density
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
$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
Enable grid lines
Set the color of the grid lines
Set the weight of the grid line
Set the line style, can be one of
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
Figure 16.37. Enabling a dashed grid line with red
In order to change the (default) linear scale o the axis to use logarithmic scale the following line must be added:
Figure 16.38 shows an example of a logarithmic radar graph
Figure 16.38. Using a logarithmic scale
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
Figure 16.39. Enabling anti-alias for the logarithmic radar example
Remember the limitation when using anti-aliasing that lines will be given line weight=1 regardless of the specified weight.
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
Example 16.5. A more complex example of a radar graph with a manual scale (
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
// 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('firstname.lastname@example.org'); $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