ChartDirector Ver 4.1 (Python Edition)

Multi-Pointer Angular Meter




This example demonstrates adding multiple pointers of different styles to a meter.

ChartDirector supports adding arbitrary number of pointers to a meter using BaseMeter.addPointer. The shape of each pointer is configurable by using MeterPointer.setShape or MeterPointer.setShape2.

This example demonstrates the 5 different built-in angular pointer styles in ChartDirector. Note the use of semi-transparent colors to avoid the pointers blocking the labels or each others.

Source Code Listing

[Standalone Version] pythondemo\multiameter.py
#!/usr/bin/python
from pychartdir import *

# Create an AugularMeter object of size 200 x 200 pixels
m = AngularMeter(200, 200)

# Use white on black color palette for default text and line colors
m.setColors(whiteOnBlackPalette)

# Set the meter center at (100, 100), with radius 85 pixels, and span from 0 to 360
# degress
m.setMeter(100, 100, 85, 0, 360)

# 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)

# Set angular arc, major tick and minor tick line widths to 2 pixels.
m.setLineWidth(2, 2, 2)

# Add a blue (9999ff) ring between radii 88 - 90 as decoration
m.addRing(88, 90, 0x9999ff)

# Set 0 - 60 as green (00AA00) zone, 60 - 80 as yellow (CCCC00) zone, and 80 - 100 as
# red (AA0000) zone
m.addZone(0, 60, 0x00aa00)
m.addZone(60, 80, 0xcccc00)
m.addZone(80, 100, 0xaa0000)

# Add a text label centered at (100, 70) with 12 pts Arial Bold font
m.addText(100, 70, "PSI", "arialbd.ttf", 12, TextColor, Center)

# Add a semi-transparent blue (806666FF) pointer    using the default shape
m.addPointer(25, 0x806666ffL, 0x6666ff)

# Add a semi-transparent red (80FF6666) pointer using the arrow shape
m.addPointer(9, 0x80ff6666L, 0xff6666).setShape(ArrowPointer2)

# Add a semi-transparent yellow (80FFFF66) pointer using another arrow shape
m.addPointer(51, 0x80ffff66L, 0xffff66).setShape(ArrowPointer)

# Add a semi-transparent green (8066FF66) pointer using the line shape
m.addPointer(72, 0x8066ff66L, 0x66ff66).setShape(LinePointer)

# Add a semi-transparent grey (80CCCCCC) pointer using the pencil shape
m.addPointer(85, 0x80ccccccL, 0xcccccc).setShape(PencilPointer)

# output the chart
m.makeChart("multiameter.png")

[CGI Version] pythondemo_cgi\multiameter.py
#!/usr/bin/python
from pychartdir import *

# Create an AugularMeter object of size 200 x 200 pixels
m = AngularMeter(200, 200)

# Use white on black color palette for default text and line colors
m.setColors(whiteOnBlackPalette)

# Set the meter center at (100, 100), with radius 85 pixels, and span from 0 to 360
# degress
m.setMeter(100, 100, 85, 0, 360)

# 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)

# Set angular arc, major tick and minor tick line widths to 2 pixels.
m.setLineWidth(2, 2, 2)

# Add a blue (9999ff) ring between radii 88 - 90 as decoration
m.addRing(88, 90, 0x9999ff)

# Set 0 - 60 as green (00AA00) zone, 60 - 80 as yellow (CCCC00) zone, and 80 - 100 as
# red (AA0000) zone
m.addZone(0, 60, 0x00aa00)
m.addZone(60, 80, 0xcccc00)
m.addZone(80, 100, 0xaa0000)

# Add a text label centered at (100, 70) with 12 pts Arial Bold font
m.addText(100, 70, "PSI", "arialbd.ttf", 12, TextColor, Center)

# Add a semi-transparent blue (806666FF) pointer    using the default shape
m.addPointer(25, 0x806666ffL, 0x6666ff)

# Add a semi-transparent red (80FF6666) pointer using the arrow shape
m.addPointer(9, 0x80ff6666L, 0xff6666).setShape(ArrowPointer2)

# Add a semi-transparent yellow (80FFFF66) pointer using another arrow shape
m.addPointer(51, 0x80ffff66L, 0xffff66).setShape(ArrowPointer)

# Add a semi-transparent green (8066FF66) pointer using the line shape
m.addPointer(72, 0x8066ff66L, 0x66ff66).setShape(LinePointer)

# Add a semi-transparent grey (80CCCCCC) pointer using the pencil shape
m.addPointer(85, 0x80ccccccL, 0xcccccc).setShape(PencilPointer)

# output the chart
print "Content-type: image/png\n"
binaryPrint(m.makeChart2(PNG))