The following script shows the simplest possible odometer using just default values

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

<?php // content="text/plain; charset=utf-8"
require_once ("jpgraph/jpgraph.php");
require_once ("jpgraph/jpgraph_odo.php");
 
// Create a new odometer graph (width=250, height=200 pixels)
$graph = new OdoGraph(250,140);
 
// Now we need to create an odometer to add to the graph.
// By default the scale will be 0 to 100
$odo = new Odometer();
 
// Set display value for the odometer
$odo->needle->Set(30);
 
// Add the odometer to the graph
$graph->Add($odo);
 
// ... and finally stroke and stream the image back to the client
$graph->Stroke();
 
?>

Figure 20.2. A basic odometer (odotutex00.php)

The size of the Odometer is determined automatically to fit the given image size as good as possible. Since the size of the odometer automatically adjust itself to allow for any odometer caption, graph titles or graph captions there is rarely need to manually override this automation.

However it is still possible to manually specify the absolute size (of the radius) in pixels or as a fraction of the image size.

To set a specific value top the Odometer radius the following method is used

Since clas OdoGraph inherits all the basic graph features we can easily augment the graph in Figure 20.2 to, for example, have titles by adding the line

1

$graph->title->Set('A suitable graph title');

In the following chapters we will go through all the options that exists to modify the size, shape and appearance of the graph.

Odometers comes in two fundamental shapes, full and half circle. The default if nothing else is specified is to create a half circle. The type of odometer is specified in the creation of the odometer.

The type is controlled by the two constants

As an example the following odometer plot instantiation will create a full odometer plot

1

$odo = new Odometer(ODO_FULL);

and the following a half odometer plot

1

$odo = new Odometer(ODO_HALF);

In ?? an example of a very basic full circle odometer is shown

Figure 20.3. A full circle odometer (odotutex01.php)

Remember that each graph can have a title, a subtitle and subsubtitle. In addition the Odmeter graphs offers the possibility to have a caption string. This is a text (much like the title) but is drawn at the bottom of the graph instead of at the top.

The following script shows how to add a tite, subtitle and caption to our previous example

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

<?php // content="text/plain; charset=utf-8"
require_once ("jpgraph/jpgraph.php");
require_once ("jpgraph/jpgraph_odo.php");
 
// Create a new odometer graph (width=250, height=200 pixels)
$graph = new OdoGraph(250,180);
 
// Setup titles
$graph->title->Set("Result for 2002");
$graph->title->SetColor("white");
$graph->title->SetFont(FF_ARIAL,FS_BOLD,14);
$graph->subtitle->Set("New York Office");
$graph->subtitle->SetColor("white");
$graph->caption->Set("Figure 1. Branch results.");
$graph->caption->SetColor("white");
 
// Now we need to create an odometer to add to the graph.
// By default the scale will be 0 to 100
$odo = new Odometer();
 
// Set display value for the odometer
$odo->needle->Set(30);
 
// Add the odometer to the graph
$graph->Add($odo);
 
// ... and finally stroke and stream the image back to the client
$graph->Stroke();
 
?>

Figure 20.4. Adding titles and captions (odotutex02.php)

As can be see from the figure the margins will automatically adjust to hold the specified titles and captions.

Remember that text strings can have multiple lines by separating lines with a '\n' character. The following example shows how to add a more descriptive caption to the graph

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

<?php // content="text/plain; charset=utf-8"
require_once ("jpgraph/jpgraph.php");
require_once ("jpgraph/jpgraph_odo.php");
 
// Create a new odometer graph (width=250, height=200 pixels)
$graph = new OdoGraph(250,200);
 
// Setup titles
$graph->title->Set("Result for 2002");
$graph->title->SetColor("white");
$graph->title->SetFont(FF_ARIAL,FS_BOLD,14);
$graph->subtitle->Set("New York Office");
$graph->subtitle->SetColor("white");
$graph->caption->Set("Figure 1.This is a very, very\nlong text with multiples lines\nthat are added as a caption.");
$graph->caption->SetColor("white");
 
// Now we need to create an odometer to add to the graph.
// By default the scale will be 0 to 100
$odo = new Odometer();
 
// Set display value for the odometer
$odo->needle->Set(30);
 
// Add the odometer to the graph
$graph->Add($odo);
 
// ... and finally stroke and stream the image back to the client
$graph->Stroke();
 
?>

Figure 20.5. Adding a multi line caption (odotutex03.php)

Almost all areas in the graph have a customizable color. This means that for the Odometer graph itself it is possible to adjust

For example the following line changes the margin color of the graph

1
2
3
4
5

<?php
// Make the border 40% darker than normal "khaki"
$graph->SetMarginColor("khaki:0.6"); 
$graph->SetColor("khaki");
?>

For the odometer plot itself it is possible to adjust

For example the following lines would change the fascia, indicator and scale label color

1
2
3
4
5

<?php
$odo->SetColor("white");
$odo->scale->label->SetColor("blue");
$odo->needle->SetFillColor("yellow");
?>

Figure 20.6 shows the effect of adding the two code snippets above to our previous example.

Figure 20.6. Changing colors (odotutex04.php)

The indicator is accessed through the "$needle" property of the plot. The indicator needle for the odometer can have six basic shapes. which are set by the method

The style is defined by one of the following symbolic constants.

The following line would therefore create a plot with a "simple" indicator.

1

$odo->needle->SetStyle(NEEDLE_STYLE_SIMPLE);

The different styles are illustrated in Figure 20.7

Figure 20.7. Possible shapes of the odometer indicator (odotutex06.php)

For the needle style "NEEDLE_STYLE_ENDARROW" it is also possible to adjust the ending arrow. This is done by specifying the particular end arrow size as the second parameter to SetStyle(). , the $aStyleOption parameter.

To simplify the arrow style setting a number of predefined sizes are available. When choosing an arrowhead the width and length are specified in three different steps, small , medium and large.

The available end arrow styles are listed in ?? below

The following code specifies a the largest available arrowhead

1

$odo->needle->SetStyle(NEEDLE_STYLE_ARROWHEAD, NEEDLE_ARROW_LL);

An illustration of the various arrow heads are given in Figure 20.8

Figure 20.8. Illustration of various sizes of arrow heads (odotutex07.php)

The basic length and weight of the needle is specified with the methods

The needle size is specified as fractions of the radius. So for example the following line wold create a needle halfway into the plot area

1

$odo->needle->SetLength(0.5);

The default size for a needles is 60% of the radius.

It is possible to add drop shadows to both the overall graph s well as the indicator needle. To add a drop shadow to the overall graph the method is as usual

and to add a drop shadow to the indicator needle the method

must be used.

The following two lines add both types of drop shadows to an odometer graph with the result shown in ??

1
2
3
4
5

<?php
$graph->SetShadow();
...
$odo->needle->SetShadow();
?>

Figure 20.9. Adding drop shadows (odotutex08.php)

The size of the odometer is automatically adjusted to fit the available space in the image after margins for titles and captions have been taken into account. This means that normally it is not necessary to adjust the margins manually.

The odometer plot can be adjusted with the method

Each odometer also have a margin surrounding it. This is the amount of "space" around each individual odometer. The amount of space is adjusted by the method

OdoPlot::SetMargin($aMargin)

If we take the example in Figure 20.8 and increase the individual margin around all odometers they will become smaller (if we keep the original image size) and the result is shown in Figure 20.10

Figure 20.10. Increasing the individual margins around the plots (odotutex09.php)

An odometer usually have some colored markings to indicate safe and dangerous values. The library allows the addition of any number of colored scale areas with one or several calls to the method

This method allows the specification of a min and max value of the scale which will be given the background color specified as the third parameter.

The example in Figure 20.11 adds three different scale area with 6 different scale areas

Figure 20.11. Adding colored scale indicators (odotutex10.php)

In Figure 20.11 it can be seen that by default the scale color indication goes all the way down to the base of the needle. It is however possible to adjust this to the colored area stops a bit above the base of the needle. The non colored area is adjusted with a call to the method

The following example in Figure 20.12set the size of this base area to be 45% of the plot radius.

Figure 20.12. Adjusting the non-colored center area (odotutex11.php)

In all the previous example the odometer plots have all had a single indicator. It is however possible to add up to four indicators to each plot. This could for example be sued to show the current value and a sliding 3-day average.

The extra needles are accessed through the properties

In order to enable one of these extra needles the method OdoNeedle::Show() has to be called. The value of the indicator can then be set as the following example shows.

1
2

$odo->needle2->Show();
$odo->needle2->Set(44);

By default all the needles will have the same color so the color should be manually changed to be able to differentiate among multiple needles. The example in Figure 20.13 shows an example of this where we also have made the second indicator a bit shorter to further make it easier to read.

Figure 20.13. Adding a second scale indicator (odotutex12.php)

Most types of odometers have a legend in the middle of the meter usually indicating what the scale shows. The odometer have a specific text property to add text in that position.

The following code adds the label "mBar" as the scale indicator and also adjusts the default font

1
2

$odo->label->Set("mBar");
$odo->label->SetFont(FF_FONT2,FS_BOLD);

The result of this cane be seen in Figure 20.14

Figure 20.14. Adding a scale legend by using the label property (odotutex13.php)

The border of the odometer plot can be adjusted with a call to

The following example shows the effect of making the odometer plot border thicker

1

"=odotutex08.1|Adding a thicker border around the odometer plot"