1         Using Spider Plots

 

1.1        Introduction


Spider 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) . the figure below show an example of a spider (sometimes called a web-plot). Spiderplots are not suitable if you want very accurate readings from the graph since, by it’s nature, it can be difficult to read out very detailed values.

 

 


Figure 42. Example of a spider graph with two plots.

The following points are worth noting:

 

 

In the following section we show how to draw both simple and complex spider graph. As we will show all the settings will follow the same pattern as for the more standard linear graphs.

 

1.2        Creating a simple spider graph.

Let’s start by creating a very simple spider plot based on 5 data points using mostly default values.

 

As the first thing you must remember to include the extension module that contains spider plot. “jpgraph_spider.php”.

 

<?php

       include ("jpgraph.php");

       include ("jpgraph_spider.php");

      

       // Some data to plot

       $data = array(55,80,46,71,95);

      

       // Create the graph and the plot

       $graph = new SpiderGraph(250,200);

       $plot = new SpiderPlot($data);

      

       // Add the plot and display the graph

       $graph->Add($plot);

       $graph->Stroke();

?>

 

If you run the above script it will generate the following image

 


Figure 43. A very simple spider plot

From the above image you may note the following have been set automatically

 

 

1.3        Controlling size and position of plot

One of the simplest changes we can do is change the size and the position of the graph. These two parameters are controlled by the two methods SetCenter() and SetPlotSize(). The parameters of both these methods are in percentage.

 

To demonstrate lets make the plot smaller and move it a little bit to the left in the image. This is accomplished by the lines

. . .

// Set diameter of spider graph to 40% of min(height,weight)

$graph->SetPlotSize(0.4);

 

// Position the centre of the graph at x=30% of the width and y=50% of height

$graph->SetCenter(0.3,0.5);
. . .


 


The resulting image will then be as displayed below

Figure 44. Resized and repositioned spider graph.

 

It is worth clarifying how the sizing works. Since the size is given in percentage you might, rightfully so, ask percentage of what? Image height?, image width? Since the axis can be in all directions we take the percentage of min(height,width).

 

1.4        Specifying titles for the axis and legends for plots

We normally would like something more meaningful as description of each axis then it’s number. Specifying the titles are accomplished through the use of the method SetTitles() of the graph. Let’s say that each axis corresponds to a month.

 

. . .

$axtitles=array(“Jan”,”Feb”,”Mar”,”Apr”,”May”);

$graph->SetTitles($axtitles);

 

Let’s also specify a legend for the plot

 

. . .
$plot->SetLegend("Defects");

 

Let’s also take the opportunity to set a title of the graph

 

. . .
$graph->title->Set(“Result 2001”);

$graph->title->SetFont(FONT1_BOLD);

 

The resulting graph are now starting to look a little bit more pleasing as the following figure illustrates

 

 


 


Figure 45. Spider graph with legends, and titles .

 

1.5        Specifying gridlines

By default the graph has tick lines but no grid lines. Let’s change this so that we don’t have any ticks but use “dashed” gridlines instead.

 

To suppress ticks we could do it the same way as for linear graphs by calling the SupressTickMarks() method of Ticks. This would be accomplished by

 

. . .

$graph->axis->scale->ticks->SupressTickMarks();

 

Since this is, in OO terms, a clean design is it still a little bit unwieldy . There is therefore a shortcut which lets you just say

 

. . .

$graph->SupressTickMarks()

 

To set a “dashed” apperance of the grid you have to invoke the SetLineStyle() method of the grid and to show the grid lines you just call, as before, the method Show() of the grid as

 

. . .
$graph->grid->SetLineStyle("dashed");

$graph->grid->Show();

 

The default color for grid is “silver” but you may of course easily change that by invoking the SetColor() method on the grid.

 


Figure 46. A Spiderplot with gridlines and no ticks.

 


By design the plot is above the gridline but beneath the axis in image depth, hence some part of the gridlines are hidden.

 

To have the gridlines more “visible” just change their color, say to, dark red by invoking the SetColor() method as

 

. . .

$graph->grid->SetColor(“darkred”);

 

The resulting image will be

 


Figure 47. Spider graph with dark red grid lines

 

 


1.6        Setting background color and frame

By default the image has a frame with “white” as the background color. As you saw for normal Linear plot we can have a background and a shadow of the frame. The one difference between spider plots and linear plots is that there is no concept of margin and plot area color, there is only one background color. This is set through the Color() method of graphs.

 

To set a shadowed frame you just evoke the SetShadow() method of the graph. It has the same parameter as the previous introduced Linear graphs.

 

Lets set thye background to a very light blue-ish color and add a shadow to the frame. This is done by the two lines

 

$graph->SetShadow();

$graph->SetColor(array(200,230,230));

 

 

and the resulting graph

 


Figure 48. Spider graph with background and shadow

 


1.7        Adding several plots to a spider graph

This is done exactly the same way as for the other graph types, just call the method Add() of class SpiderGraph for each plot you want to add. For spider plots it is important that all the plots have the same number of data points. The library will check this and treat this as an error and abort the program.

 

Lets add a second plot to our previous graph and let’s make that an open plot, i.e. it is not filled, and make the weight of the line 2.

 

 

$data2 = array(65,95,50,75,60);

$plot2 = new SpiderPlot($data2);

$plot2->SetFill(false);

$plot2->SetLineWeight(2);

$plot2->SetLegend(“Target”);

. . .

$graph->Add($plot2);

 

The resulting graph will now look like

 


Figure 49. Spider graph with two plots.

 

 


1.8        Using logarithmic scales with spiderplots

You may also use logarithmic scales on the axis. This is done pretty much the same was as when you work with log scales with normal graphs. An example will make this clear

 

$data = array(242,58,500,12,397,810,373);

 

// Create the graph

$graph = new SpiderGraph(500,500,"spiderlog");

 

// Make the spider graph fill out it's bounding box

$graph->SetPlotSize(0.85);

 

// Use logarithmic scale (If you don't use any SetScale()

// the spider graph will default to linear scale

$graph->SetScale("log");

// Use anti-aliasing to make the image look better
$graph->img->SetAntiAliasing();

 

// Uncomment the following line if you want to supress

// minor tick marks

//$graph->yscale->ticks->SupressMinorTickMarks();

 

// We want the major tick marks to be black and minor

// slightly less noticable

$graph->yscale->ticks->SetMarkColor("black","darkgray");

 

// Set the axis title font

$graph->axis->title->SetFont(FF_ARIAL,FS_BOLD,12);

 

// Use blue axis

$graph->axis->SetColor("blue");

 

$plot = new SpiderPlot($data);

$plot->SetLineWeight(1);

$plot->SetColor('forestgreen');

 

// Add the plot and display the graph

$graph->Add($plot);

$graph->Stroke();

?>

 

A few comments:

 

The code above would generate an image like

 

Figure 50. Example of spiderplot with logarithmic scale
.