Anti-aliasing in JpGraph
From version 1.2 JpGraph supports drawing of anti-aliased lines. There
are a few caveats in order to use this which is discussed in this
section.
Sidebar
Note that anti-alising will not be used for either horizontal,
vertical or 45 degree lines since they are by their nature are sampled
at adequate rate.
Enabling anti-aliased lines
Anti-aliased lines are enabled by calling the method
SetAntiAliasing()
in the
Image class
in the script where you want to use anti-aliasing.
The anti-aliasing for lines works by "smoothing" out the edges on the
line by using a progressive scale of colors interpolated between the
background color and the line color.
Sidenote:
The algorithm used for anti-aliasing of lines is quite simple.
It would be possible to
achieve even better result by doing some real 2D signal
processing. However, doing real time 2D signal
processing on a HTTP server would be madness so I deliberately kept it
simple. To achieve best visual result always use a dark line color on
a light background.
An example will show that this, quite simple algorithm, gives a
reasonable good result. The figures below shows a radar plot
with and without anti-aliasing.
Figure 1: Spiderplot without anti-aliasing [src] |
Figure 2: Spiderplot with anti-aliasing [src] |
One thing you need to keep in mind when deciding to use
anti-aliasing is that it could have potentially a
dramatic effect on the time it takes to generate the
image. Line drawing with anti-aliasing turned on is
roughly 8 times slower than the normal line drawing
so treat this feature wisely.
Furthermore there are a couple of "gotchas" you should
be aware of when using anti-aliasing.
- Anti-aliased lines uses up more of the available
color-palette. The exact number of colors used is dependent on the
line-angle, a near horizontal or near vertical line uses more colors
(number of lines with different angles uses more colors). Hence it
might not be possible to use anti-aliasing with color-gradient fill
since the number of available colors in the palette might not be
enough. A normal palette can keep around 256 colors. This means that
you are advised to use a truecolor image when using anti-aliasing.
- Anti-aliasing does not work very well together with background
images since it assumes a the same solid color on each side of the
line. Doing a more advanced anti-aliasing algorithm would simple
take to much processing power.
- Anti-aliased lines will ignore the line width specified. They will
always have a width of roughly 1.
Adjusting brightness and contrast for images and backgrounds
It is often desirable to have a background image look a little bit
"washed" out so it doesn't take the concentration away from the actual
graph. There are basically two ways of accomplish this
- Prepare the image with an external images editor to adjust the
level of brightnes and contrasty to a desirable level
- Use JpGraph:s built int adjustment for contrast, brightness and
color saturation.
To adjust the background image call
The levels for both brightness and constrast are real numbers in the range [-1, 1]
You can choose to adjust for example just the background image or you
might also choose to adjust the whole image.
To change the background image just use the method
Graph::AdjBackgroundImage()
to specify a suitable value. Let's show some example on what we
can do with this. The following example have been generated by using
the small utility "adjimg.php" which you can find in the "utils/"
directory.

Brightness=0, contrast=0, saturation = -1 (Original image)
|

Brightness=0, contrast=0, saturation = -1 (Black & White image)
|

Brightness=0.3, contrast=-0.3, saturation=0
|

Brightness=0.4, contrast=-0.7, saturation=0
|

Brightness=0.4, contrast=-0.7, saturation=-1
|

Brightness=0, contrast=0, saturation=1
|
Timing the generation of graphs
During development and optimization it can be very handy to have the
actual time it took to generate the image as a footnote.
The following example shows the usage of this feature
Figure 3: Timing of a graph [src]
To enable this feature you can proceed in two ways.
- You can either set the global define BRAND_TIMIING (in
jpgraph.php) to true. This will add the timing string to all graphs
generated.
- .. or you can enable it for a specific graph by setting the
global variable $gJpgBrandTiming as in
$gJpgBrandTiming=true;
in the beginning of the script.
If you like you might also change the
way the timing is formatted by setting the string defined by
BRAND_TIMING_FORMAT (in jpgraph.php). This string represents a
standard printf() format string.
Sidenote: JpGraph contains a utility class called
JpgTimer which you can use
yourself should you need ms timing of part of your own code. The API
is really simple. The class supports multiple running timers and you
start a timer simply by calling the Push() method. This will start a
new timer and put it on the top of the timer stack. To stop the timer,
pop it from the stack and return the timing value simply call Pop().
Adding pattern bands to X-Y graphs