Grafieken maken met PHP en MySQL

Soms kan het handig zijn om grafieken te maken die worden gegenereerd vanuit de database. In deze PHP tutorial ga ik uitleggen hoe dat bereikt kan worden, met behulp van verschillende hulpmiddelen

PHPGraphLib

In het eerste voorbeeld ga ik gebruik maken van PHPGraphLib. Dit is een gratis bibliotheek voor PHP. Om deze bibliotheek te gebruiken, dien je deze eerst te downloaden en vervolgens weer te uploaden naar je webserver. Vervolgens dien je deze weer in te voegen om gebruik te kunnen maken van de functies. Dat doe je zo:

  1. // Uiteraard dien je grafieken aan te passen wanneer het bestand op jou computer niet zo heet.
  2. include('/grafieken/phpgraphlib.php');

Omdat de bibliotheek een class, dient deze zo aangeroepen te worden:

  1. $graph = new PHPGraphLib(650,200, $filename);

De eerste 2 waardes (650 en 200) geven de breedte en hoogte maten aan. De laatste parameter is optioneel. Hier kan eventueel een bestandsnaam worden opgegeven. Wanneer dat het geval is zal de gemaakte afbeelding worden opgeslagen. Het is ook mogelijk om de afbeelding rechtstreeks in de browser te tonen, maar hier zal ik later op terug komen.

Een grafiek maken

Om een grafiek op de simpelste manier te maken zijn slechts 5 regels code nodig:

  1. require('../graph/phpgraphlib.php');
  2. $data = array(10, 12, 15, 11, 14, 19, 5, 16);
  3. $graph = new PHPGraphLib(650,200);
  4. $graph->addData($data);
  5. $graph->createGraph();

Deze code zal de volgende grafiek opleveren:

Een simpel voorbeeld hoe een grafiek eruit kan komen te zien

  1. // Het bibliotheek bestand invoegen
  2. require('grafieken/phpgraphlib.php');
  3. // Deze data wordt op het scherm getoond, dit gaat later vervangen worden door MySQL data
  4. $data = array(10, 12, 15, 11, 14, 19, 5, 16);
  5. // Het aanmaken van het grafiek object.
  6. $graph = new PHPGraphLib(650,200);
  7. // Met deze functie wordt de data aan de grafiek toegevoegd.
  8. $graph->addData($data);
  9. // Maak de grafiek aan. Afhankelijk of er een bestandslocatie is opgegeven wordt het bestand getoond of weggeschreven.
  10. $graph->createGraph();

Grafiek data uit de database halen

Nu wordt het een stukje lastiger, nu gaan wij proberen om data uit de database te halen en hier een grafiek van de maken. Dit gebeurt op bijna dezelfde manier als het hierboven genoemde voorbeeld, met als groot verschil dat de data variabele gevuld gaat worden met data uit de database. In dit voorbeeld maak ik gebruik van een tabel die er zo uit ziet:

  1. CREATE TABLE `googlepos_pr`.`dailyViews` (
  2. `date` DATE NOT NULL ,
  3. `views` INT( 10 ) NOT NULL
  4. ) ENGINE = MYISAM ;

Voor het gemak ga ik er vanuit dat er in deze tabel eenmaal per dag een aantal wordt hoeveel bezoekers die dat er zijn. De MySQL query zal er dan als volgt uit zien:

  1. SELECT date, views FROM dailyViews order by date asc

Let vooral op dat er op de datum gesorteerd wordt. Deze is namelijk niet altijd oplopend, waardoor je ongeldige resultaten krijgt. De volgende stap is nu op deze data om te zetten in data die gebruikt kan worden in de grafiek. Dat kan als volgt:

  1. $sql = sprintf("SELECT date, views FROM dailyViews order by date asc");
  2.  
  3. $data = array();
  4. $query = mysql_query($sql) or die (mysql_error());
  5. while($row = mysql_fetch_array($query)) {
  6.         $data[ $row['date'] ] = $row['views'];
  7. }

Wanneer $data met print_r wordt uitgelezen, zal deze er ongeveer zo uitzien:

  1. (
  2.     [2010-10-24] => 250
  3.     [2010-10-25] => 431
  4.     [2010-10-26] => 503
  5.     [2010-10-27] => 348
  6.     [2010-10-28] => 234
  7.     [2010-10-29] => 559
  8.     [2010-10-30] => 490
  9.     [2010-10-31] => 600
  10. )

Wanneer dit wordt verwerkt in bovenstaand voorbeeld zal dat er ongeveer zo uitzien:

Dit is een voorbeeld hoe een grafiek eruit zou kunnen zien wanneer deze uit de database wordt gehaald.

Het resultaat van deze code komt er dan zo uit te zien:

  1. $sql = sprintf("SELECT date, views FROM dailyViews order by date asc");
  2.  
  3. $data = array();
  4. $query = mysql_query($sql) or die (mysql_error());
  5. while($row = mysql_fetch_array($query)) {
  6.         $data[ $row['date'] ] = $row['views'];
  7. }
  8.  
  9. $graph = new PHPGraphLib(650,200);
  10. $graph->addData($data);
  11. $graph->createGraph();

Meerdere data toevoegen

Het is ook mogelijk om meerdere data naast elkaar te vergelijken, bijvoorbeeld de bezoekers van deze week en van vorige week. Dat kan eenvoudig door nogmaals addData toe te voegen:

  1. $graph->addData($data);
  2. $graph->addData($data1);
  3. $graph->addData($data2);

Dit geeft de volgende grafiek als resultaat:

Meerdere grafieken in een grafiek verwerkt

Grafiek opmaken

Dit is een erg kale grafiek. Daarom zijn er een aantal manieren op hier wat meer opmaakt aan toe te voegen. Zo kan er bijvoorbeeld een titel boven de grafiek worden geplaatst:

  1. $graph->setTitle("Bezoekers per dag");

De kleur aanpassen naar rood:

  1. $graph->setBarColor('255,0,0');

Liever een verloop in de kleur? Maak dan gebruik van een gradient.

  1. $graph->setGradient('red', 'maroon');

Ook kan de kleur van de tekst langs de grafiek gewijzigd worden:

  1. $graph->setTextColor('gray');

Liever geen staaf grafiek maar een lijn grafiek? Dat kan ook:

  1. $graph->setBars(false);
  2. $graph->setLine(true);

Het resultaat hiervan kan er zo uitzien:

Voorbeeld van een lijn grafiek
Gekleurde staaf grafiek

Grafieken maken met Google Chart

Een ander alternatief is Google Chart. Hiervoor is de beschikking over PHP niet nodig, dit kan namelijk gebruikt worden vanaf elke willekeurige locatie of website. De grafiek kan namelijk aangeroepen worden vanaf een URL, die een plaatje teruggeeft. Op deze manier kan de grafiek als volgt ingevoegd worden:

  1. <img src="http://chart.apis.google.com/chart?chxt=y&chbh=a&chs=300x225&cht=bvg&chco=A2C180,3D7930&chd=t:10,50,60,80,40,60,30|50,60,100,40,20,40,30&chtt=Vertical+bar+chart" width="300" height="225" alt="Vertical bar chart" />

Dit levert het volgende resultaat op:

Vertical bar chart

Sinds kort heeft Google een wizard beschikbaar waarmee eenvoudig zelf een grafiek gemaakt kan worden. Deze kan gevonden worden op http://imagecharteditor.appspot.com/. Ik ga echter een voorbeeld maken waarbij deze gegevens uit de database gehaald worden.

In dit voorbeeld ga ik weer uit van eerder genoemde tabel waarbij dagelijks het aantal bezoekers wordt opgeslagen. Ik ga deze eerst in een array wegschrijven om vervolgens weer aan elkaar te plakken met behulp van implode.

  1. $sql = sprintf("SELECT date, views FROM dailyViews order by date asc");
  2.  
  3. $data = array();
  4. $query = mysql_query($sql) or die (mysql_error());
  5. while($row = mysql_fetch_array($query)) {
  6.         $data[ $row['date'] ] = $row['views'];
  7. }
  8. $data = implode(',', $data);
  9. // Mogelijk resultaat: 531,432,523,325

Ik maak gebruik van implode omdat dit ervoor zorgt dat de data niet met een , (komma) eindigt. De rest van de code ziet er dan zo uit:

  1. $imgSRC = 'http://chart.apis.google.com/chart?chxt=y&chbh=a&chs=300x225&cht=bvg&chco=A2C180&chds=0,600&chd=t:' . $data . '&chtt=Bezoekers+per+dag';
  2. echo '<img src="' . $imgSRC . '" />';

Slot

Er zijn een heleboel verschillende soorten grafiek bibliotheken, en ik maak hier gebruik van slechts één van de velen. Elke bibliotheek heeft zo zijn voor- en nadelen. Allemaal hebben ze een leercurve, maar de ene een grotere dan de andere. Zo is het bij de Google Chart een handige wizard waarmee iedereen eenvoudig grafieken kan maken. Het nadeel van de Google Chart is weer dat je hierbij afhankelijk bent van Google, en deze geen beveiligde verbinding (SSL) ondersteunt.

Als bijlage heb ik de voorbeelden uit deze tutorial bijgevoegd.

BijlageGrootte
grafieken.zip13 KB