Contents Previous Next

4.6 Working with fonts in JpGraph

JpGraph supports both a set of built in bit-mapped fonts as well as True Type Fonts. For scale values on axis it is strongly recommended that you just use the built in bitmap fonts for the simple reason that they are, for most people, easier to read (they are also quicker to render). Try to use TTF only for headlines and perhaps the title for a graph and it's axis. By default the TTF will be drawn with anti-aliasing turned on.

In many of the example you can see examples of both TrueType and BitMap fonts.

There are a number of subtle differences in the way builtin fonts and TrueType fonts are rendered to the screen. However, JpGraph, abstracts away 99.9% of the differences so it will be, for the user, completely transparent to switch between the different fonts.

4.6.1 Installing TrueType fonts

Since Internally TrueType fonts are rendered by locating a font specification file you must install the accompanying TrueType fonts in directory of your choice. You must then tell JpGraph where these fonts may be found by specifying the font-path in the FONT_PATH define (in jpg-config.inc). Please note that this must be the absolute file path and not relative to the htdocs directory. By default the path is set to
 
DEFINE("TTF_DIR","/usr/local/fonts/ttf/");

Since JpGraph must be able to tell the difference between the italic and bold versions of the same font family a standard naming convention is used to name the files. The available fonts are also defined by DEFINES and hence you can't just copy your own TTF files to the directory and expect it to work. At the moment there is no "easy" way to add new fonts but to make some (small) mods to the code. However this is expected to change in future version of JpGraph.

4.6.2 Verifying that the TTF fonts work

In order to get TTF fonts working with JpGraph you should first check that the following pure GD scripts work correctly. Please adjust the font path according to your installation.
 
DEFINE("TTF_DIR","/usr/X11R6/lib/X11/fonts/truetype/");

$im = imagecreatetruecolor (400, 100);
$black = imagecolorallocate ($im, 0, 0, 0);
$white = imagecolorallocate ($im, 255, 255, 255);

imagerectangle($im,0,0,399,99,$black);
imagefilledrectangle($im,0,0,399,99,$white);

imagettftext ($im, 30, 0, 10, 40, $black, TTF_DIR."arial.ttf", "Hello World!");

header ("Content-type: image/png");
imagepng ($im);

The above script assumes you have the GD2 library and will create an image with the classical "Hello World!" text printed in black.

4.6.3 Specifying fonts

All graph objects that uses text allows you to specify the font to be used by calling the SetFont() method and specifying three parameters
  1. Font family, Specified with a FF_ define
  2. Font style, Specified with a FS_ define
  3. Font size, Numeric value (only used for TTF fonts)
For the builtin fonts the third, size, parameter is ignored since the size is fixed for the three builtin fonts. The available font families and the corresponding name (in JpGraph 1.7) are listed in the table below.

Font familyTypeNote
FF_FONT0Builtin fontA very small font, only one style
FF_FONT1Builtin fontA medium sized font
FF_FONT2Builtin fontThe largest bit mapped font
FF_ARIALTTF fontArial font
FF_VERDANATTF fontVerdana font
FF_COURIERTTF fontFix pitched courier
FF_BOOKTTF fontBookman
FF_COMICTTF fontComic sans
FF_TIMESTTF fontTimes New Roman
FF_GEORGIATTF fontGeorgia
FF_TREBUCHETTF fontTrebuche
FF_VERATTF fontGnome Vera font, Available from http://www.gnome.org/fonts/
FF_VERAMONOTTF fontGnome Vera Mono font, Available from http://www.gnome.org/fonts/
FF_VERASERIFTTF fontGnome Vera Serif font, Available from http://www.gnome.org/fonts/
FF_CHINESETTF fontInstalled chinese font
FF_SIMSUNTTF fontInstalled chinese font
FF_BIG5TTF fontInstalled chinese BIG5 font (needs iconv())

Please note that not all font families support all styles. The figure below illustrates each of the available font families and what styles you may use.



Figure 1: Illustration of some of the available fonts in JpGraph [src]

We finally show some example of valid font specifications
 

$graph->title->SetFont(FF_FONT2);
$graph->title->SetFont(FF_FONT2,FS_BOLD);
$graph->title->SetFont(FF_ARIAL);
$graph->title->SetFont(FF_ARIAL,FS_BOLD,24);

4.6.4 Adding additional fonts to JpGraph

Note: This information is only given here for very advanced users. No free support will be given in the case you run into difficulties trying to add new fonts. At the moment adding new fonts require code modifications as outlined below.

In order to add you favorite fonts there are three steps you need to follow :

  1. Define a new "FF_" constant naming your font family with a suitable high index number
  2. Get the TTF file(s) and add it to your font directory. You need separate files for each of the styles you want to support. You then need to add the file names of the font as definitions in the class TTF. Use the previous defined "FF_" name as index in the font specification array.

4.7 Understanding text alignment in JpGraph

For everyday use of JpGraph understanding of the alignment of text strings in not necessary. However, if you like to add arbitrary strings to the graph (with Graph::AddText()) or when working directly on a canvas it will help understand this.

Text is added to a graph with the creation of a Text() object. And the alignment is specified with Text::Align() Text alignment might actually be a misguiding name. What you specify is rather the anchor point for the text, i.e. when you specify that a text should be positioned at position (x,y) how is that coordinate to be interpretated.

The image below shows a text string aligned in the 9 possible combinations. In the image the red crosses indicate what coordinate that text string was positioned at. The alignment used for each of the cases is shown below.



Figure 2: Specifying alignment (anchor-point) for text strings [src]

Contents Previous Next