3min

De omgeving opzetten

Een script heeft altijd een reeks van opzet variabelen om te verwerken. Belangrijk om te weten in dit geval is de eigenschappen van de grafiek, dimensies en dat soort zaken. Een kort lijstje:

  • Hoe breed en hoe hoog mag het plaatje worden?
  • Hoe groot moet de rand zijn?
  • Welk TTF font moet worden gebruikt?
  • Welke kleuren worden toegepast?
  • Wat zijn de gegevens?

De eerste instellingen zullen niet moeilijk zijn. Een afmeting wordt gewoon in pixels gegeven en kan simpel in een normale variabele worden opgeslagen. In dit geval definieer ik de breedte, de hoogte en de randen links, rechts, onder en boven.

Bij het font kan niet zoals in een tekstverwerker gewoon worden gekozen voor Verdana of Tahoma. In dit geval heb je het echte TTF bestand nodig. Deze kun je vaak je de font-map van je besturingssysteem halen. In dit geval gebruik ik Verdana.

De instellingen van de kleuren zijn wat lastiger. Het hangt erg af hoe aanpasbaar het moet zijn. In dit geval maak ik gewoon gebruik van de functie imagecolorallocate. Er kon ook worden gekozen voor een flexibelere variant waar bij van uit HEX waarde (b.v. CCFF00) wordt gelezen. Aan jouw de keus om een van de twee te gebruiken. De gegevens worden in een array opgeslagen. De keynaam is de waarde die onderin komt te staan (bij de x-as). De waarde van elke element is de waarde in dat punt.

In dit geval wordt een statistische grafiek gemaakt. Dat betekent dat elk punt even ver van elkaar af ligt in de grafiek en tekst kan bevatten zoals ‘januari’. Een wiskundige grafiek heeft echter een ingewikkeldere instelling. Daar bij moeten de assen altijd met zelfde afstand in waarde worden opgedeeld. In Excel ook wel vaak een ‘Spreiding’ genoemd. De waardes worden op de x-as geplaatst afhankelijk van hun waarde.

Om de begin definities op te orde te krijgen, wordt de volgende PHP code gebruikt.

PHP Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
 
// De array met alle gegevens.
$gegevens = array(
	'Jan' => 30,
	'Feb' => 23,
	'Mar' => 40,
	'Apr' => 38,
	'May' => 50,
	'Jun' => 65,
	'Jul' => 79,
	'Aug' => 81,
	'Sep' => 58,
	'Oct' => 43,
	'Nov' => 36,
	'Dec' => 32
);
 
// De afmetingen van de grafiek (het geheel)
$breedte = 450;
$hoogte = 300;
 
// De grootte van de randen.
$rand_links = 40;
$rand_boven = 15;
$rand_rechts = 12;
$rand_onder = 40;
 
// Het gebruikte lettertype. Deze moet in dezelfde map als het php script staan.
$font = "verdana.TTF";
 
// Maak het object aan voor het plaatje.
$graph = imagecreatetruecolor($breedte, $hoogte);
 
// Definieer standaard kleuren.
$white = imagecolorallocate($graph,255,255,255);
$black = imagecolorallocate($graph,0,0,0);
$line = imagecolorallocate($graph,255,0,0);
$rand_vlak = imagecolorallocate($graph,230,230,230);
$border = imagecolorallocate($graph, 140, 50, 50);
$raster = imagecolorallocate($graph, 230,230,230); 
 
// Vul de achtergrond op naar wit.
imagefill($graph, 0,0, $white);
?>

In deze code wordt ook direct het GD object al geïnitialiseerd en opgevuld met een witte kleur zodat er een schone basis is om op te werken. Om de grafiek te tekenen is het nodig om van achter naar voren te werken. Dat wil zeggen dat de lagen die boven op komen als laatst komen.

Table of contents