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

Message ListMessage List     Post MessagePost Message

  Realtime Meter
Posted by Jerry Allen on Nov-20-2012 06:27
| Reply | Monitor
Are there any examples of realtime meters/gauges that someone would share?

Thanks,

Jerry

  Re: Realtime Meter
Posted by Peter Kwan on Nov-21-2012 01:09
| Reply | Monitor
Attachments:
Hi Jerry,

For PHP, you just need to reload the <IMG> tag that contains the meter to update it. I have attached an example that updates the meter every 3 seconds.

Hope this can help.

Regards
Peter Kwan
test.php
<html>
<body>
<h1>Realtime Meter</h1>
<img id="myMeter" src="roundmeter.php">
<script>
function updateMeter() {
	document.getElementById("myMeter").src="roundmeter.php?dummy=" + (new Date()).getTime();
}
window.setInterval(updateMeter, 3000);
</script>

</body>
</html>
roundmeter.php
<?php
require_once("../lib/phpchartdir.php");

# The value to display on the meter
$value = rand(0, 100);

# 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.ttf", 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));
?>