Zo maak je mooie grafieken voor op je website
Henry Tang |
2008-10-08 |
Hulpmiddelen en software
Laatst was ik bezig met het onderzoeken van een programma dat website-statistieken verzamelt. Ik was onder de indruk van de mooie grafieken die het programma maakt en ik dacht: zoiets wil ik ook op mijn website hebben! Na enig speurwerk bleek dat de grafieken gemaakt zijn met behulp van het open source-programma Open Flash Chart.
Het ondersteunt allerlei type grafieken zoals staaf- en taartdiagrammen. Het mooie is dat ze al met een paar regels PHP-code gemaakt kunnen worden. (Naast PHP worden ook Java, Perl, Python, Ruby en .Net ondersteund!)
Waarom is dat zo bijzonder? Nou, een grafiek op je website kan heel verhelderend werken voor je bezoekers. Alleen valt het zeker niet mee om op een simpele manier een grafiek te maken die er echt goed uitziet. En met Open Flash Chart kun je dat voor elkaar krijgen.
We gaan hier als voorbeeld de volgende grafiek maken:
Als eerste: ga naar http://teethgrinder.co.uk/open-flash-chart/download.php en download de laatste versie van de software. Pak het zip-bestand uit en gebruik een ftp-programma om de uitgepakte bestanden naar je hostingaccount te uploaden. Staat je hostingaccount bij Alphamega, dan upload je naar de map 'httpdocs'. Het is niet nodig om alle bestanden over te zetten. Wat je in ieder geval nodig hebt:
- de map 'php-ofc-library' en de bijbehorende inhoud (hierin zitten de php-bibliotheek-functies)
- het bestand 'open-flash-chart.swf'
We gaan nu 2 php-bestanden maken. Het eerste bestand zorgt voor de html-code die de grafiek toont. Daarin wordt het tweede bestand aangeroepen. Het tweede php-bestand genereert de data van de grafiek.
Het eerste bestand moet het volgende bevatten:
<html>
<head>
</head>
<body>
<?php
// hier worden de benodigde functies geladen
include_once 'php-ofc-library/open_flash_chart_object.php';
// grafiek maken. Let op dat het data-bestand op de locatie /chart-data.php
moet komen te staan
open_flash_chart_object( 500, 250, 'http://'. $_SERVER['SERVER_NAME']
.'/chart-data.php', false );
?>
</body>
</html>
Maak dit bestand in een teksteditor zoals Kladblok of Context en geef het de naam 'demo.php'.
Het tweede bestand noem je 'chart-data.php' en daarin zet je de volgende code:
<?php
// genereer random data
srand((double)microtime()*1000000);
$max = 50;
$data = array();
for( $i=0; $i<12; $i++ )
{
$data[] = rand(0,$max);
}
// bibliotheek aanroepen
include_once( 'php-ofc-library/open-flash-chart.php' );
$g = new graph();
// titel zetten
$g->title( 'Verkoopcijfers '. date("Y"), '{font-size: 26px;}' );
$g->set_data( $data );
// labels zetten
$g->set_x_labels(
array('Jan','Feb','Maa','Apr','Mei','Jun','Jul','Aug','Sep','Okt','Nov','Dec'
) );
// max Y waarde
$g->set_y_max( 60 );
// label om ieder 20 (0,20,40,60)
$g->y_label_steps( 6 );
// data tonen
echo $g->render();
?>
Upload deze twee bestanden naar je hostingaccount en roep vervolgens de url aan in je browser: http://jouwdomeinnaam/demo.php. Daarbij vervang je 'jouwdomeinnaam' door de domeinnaam van jouw hostingaccount. That's all!
Meer informatie en meer voorbeelden zijn op de website van Open Flash Chart te vinden. Veel plezier met het maken van grafieken!
