ChartDirector Ver 5.0 (PHP Edition)

Round Meter

This example demonstrates a round meter.
This example is similar to the Semi-Circle Meter example, but with the angular range set to much wider. There are also more chart formatting and decorations.
First, a basic angular meter is created using the following steps:

- Create an AngularMeter object using AngularMeter.AngularMeter. In this example, the background color is set to silver using silverColor and the meter border is set to have a depressed effect.
- Specify the orientation of the meter using AngularMeter.setMeter. This specifies the center, the radius, and the angular span of the meter.
- Set the numeric scale of the meter using BaseMeter.setScale
- Add a pointer to the meter using BaseMeter.addPointer

Then more formatting and decorations are added. In this example, the following features are used:

- Define zones on the meter using AngularMeter.addZone. In this example, 3 zones (red, yellow and green) are defined.
- Add arbitrary text boxes to the meter using BaseChart.addText. In this example, a text box is added to label the meter as "CPU", and another text box is added to display the data value as text.
- Set the scale and tick and line widths with BaseMeter.setLineWidth. The meter scale line is disabled by setting its line width to 0 (note there is no arc along the scale). The major tick width is set to 2 pixels, so the major ticks are thicker than the minor ticks.
- Add a light blue ring to encircle the meter using AngularMeter.addRing.
- Add a metallic blue circle as the meter face using AngularMeter.addRing.

Source Code Listing

[File: phpdemo/roundmeter.php]

    <?php
    require_once("../lib/phpchartdir.php");

    # The value to display on the meter
    $value = 45.17;

    # Create an AugularMeter object of size 200 x 200 pixels, with silver background,
    # black border, 2 pixel 3D depressed border and rounded corners.
    $m = new AngularMeter(200, 200, silverColor(), 0x000000, -2);
    $m->setRoundedFrame();

    # Set the meter center at (100, 100), with radius 85 pixels, and span from -135 to
    # +135 degress
    $m->setMeter(100, 100, 85, -135, 135);

    # Meter scale is 0 - 100, with major tick every 10 units, minor tick every 5 units,
    # and micro tick every 1 units
    $m->setScale(0, 100, 10, 5, 1);

    # Disable default angular arc by setting its width to 0. Set 2 pixels line width for
    # major tick, and 1 pixel line width for minor ticks.
    $m->setLineWidth(0, 2, 1);

    # Set the circular meter surface as metallic blue (9999DD)
    $m->addRing(0, 90, metalColor(0x9999dd));

    # Add a blue (6666FF) ring between radii 88 - 90 as decoration
    $m->addRing(88, 90, 0x6666ff);

    # Set 0 - 60 as green (99FF99) zone, 60 - 80 as yellow (FFFF00) zone, and 80 - 100 as
    # red (FF3333) zone
    $m->addZone(0, 60, 0x99ff99);
    $m->addZone(60, 80, 0xffff00);
    $m->addZone(80, 100, 0xff3333);

    # Add a text label centered at (100, 135) with 15 pts Arial Bold font
    $m->addText(100, 135, "CPU", "arialbd.ttf", 15, TextColor, Center);

    # Add a text box centered at (100, 165) showing the value formatted to 2 decimal
    # places, using white text on a black background, and with 1 pixel 3D depressed
    # border
    $textBoxObj = $m->addText(100, 165, $m->formatValue($value, "2"), "Arial", 8,
        0xffffff, Center);
    $textBoxObj->setBackground(0x000000, 0x000000, -1);

    # Add a semi-transparent blue (40333399) pointer at the specified value
    $m->addPointer($value, 0x40333399);

    # Output the chart
    header("Content-type: image/png");
    print($m->makeChart2(PNG));
    ?>

© 2009 Advanced Software Engineering Limited. All rights reserved.