ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Vertical Linear Meter & Wide Meter
Posted by Aaron B on Mar-19-2011 00:25
| Reply | Monitor
Attachments:
Hi,

Weve been forwarded an email from a client, with a screenshot of charts with various
looks and feels that they are after. In the attached screenshot you will see on the left
are their ideas and on the right is what I have come up as possible solutions.

You can clearly see that my solutions are not too similar and I wandered if there is
anything you could suggest to help me get them more alike.

To help you out, the code for the two charts are below.

--------------------------
<?php
require_once 'ChartDirector/phpchartdir.php';

$value = 1846;

$m = new LinearMeter(150, 300, 0xC5CFE8);

$m->setMeter(75, 50, 20, 200);

$m->setRail (0, 0, 25);

$m->setLabelStyle("bold", 11);

$m->setScale(0, 10000, 2500, 500);
$m->setTickLength(-20, -20);

$m->addZone(0, 2000, 0xFF0000);
$m->addZone(2000, 4800, 0xFFFF00);
$m->addZone(4800, 10000, 0x006633);

$p = $m->addPointer($value, 0xFF6666, 0x000000);
$p->setShape(1, 0, 1.2);

$m->addText(75, 5, "$" . $value, "arial.ttf", 11, 0x000000, TopCenter);

header("Content-type: image/png");
print($m->makeChart2(PNG));

?>
--------------------------

<?php
require_once 'ChartDirector/phpchartdir.php';

$value = 146;

$m = new AngularMeter(200, 100);

$m->setBackground(0xCFCFCF);

$m->setMeter(100, 235, 210, -24, 24);

$m->setLabelPos(0);

$m->setScale(0, 200, 100, 20);

$m->addZone(0, 200, 0xC5CFE8);

$m->addTitle2(Bottom, sprintf("%01.2f", $value) . "\\n", "arial.ttf", 10);

$m->addPointer($value, 0xFF6666, 0x000000);

header("Content-type: image/png");
print($m->makeChart2(PNG));

?>

Any response would be much appreciated.

Thanks in advance
chart_ss.jpg

  Re: Vertical Linear Meter & Wide Meter
Posted by Peter Kwan on Mar-19-2011 02:58
| Reply | Monitor
Hi Aaron,

For the vertical linear meter, the key differences I see are the label format, and the shape of the ticks. For the label format, you may use BaseMeter.setLabelFormat. For the shape of the ticks, you may consider to draw the ticks with your own code using BaseChart.addText and BaseChart.addLine. For example:

<?php
require_once 'ChartDirector/phpchartdir.php';

$value = 1846;

$m = new LinearMeter(150, 300, 0xC5CFE8);

$m->setMeter(80, 50, 10, 200);

$m->setRail (0, 0, 25);

$m->setLabelStyle("bold", 11);
$m->setLabelFormat("\\${value|,}");
$m->setLabelPos(false, 10);

$m->setScale(0, 10000, 2500, 500);

for ($i = 0; $i <= 10000; $i += 500) {
    $yCoor = 50 + 200 * $i / 10000;
    if ($i % 2500 == 0) {
        $textBox = $m->addText(75, $yCoor - 2, "");
        $textBox->setSize(21, 5);
        $textBox->setBackground(0xC5CFE8, 0x000000);
    }
    else
        $m->addLine(78, $yCoor, 92, $yCoor, 0x000000);
}

$m->addZone(0, 2000, 0xFF0000);
$m->addZone(2000, 4800, 0xFFFF00);
$m->addZone(4800, 10000, 0x006633);

$p = $m->addPointer($value, 0xFF6666, 0x000000);
$p->setShape(1, 0, 1.2);

$m->addText(75, 5, "$" . $value, "arial.ttf", 11, 0x000000, TopCenter);

header("Content-type: image/png");
print($m->makeChart2(PNG));

?>

For the angular meter, the main differences I see are the label format, the green arc, and the overall shape of the meter.

For the label format, you may use BaseMeter.setLabelFormat, the same as that of the linear meter. For the green arc, you may use AngularMeter.addZone to add a green zone at a radius that is smaller than the meter scale.

For the overall meter shape, you may consider to just use a background image showing the meter shape, and then plot the angular meter over the background image. You may use something line the "Round Meter" sample code, removing all unnecessary decorations, and use AngularMeter.setCap to set a bigger circular cap at the center.

Hope this can help.

Regards
Peter Kwan

  Re: Vertical Linear Meter & Wide Meter
Posted by Aaron B on Mar-21-2011 16:31
| Reply | Monitor
Thanks a lot, thats a great help.

Much appreciated.