Welkom op de vernieuwde website van AlphamegaHosting.com!

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!

Zoek

Doe mee! Word ook WebsiteSupporter!

Ontvang gratis elke week een verbetersuggestie voor je website, inclusief speciaal stappenplan om je site succesvol te maken.

Klik hier om je in te schrijven!

Domeinnaam-check

Domeinnamen v.a. € 1,- p/m. Check of jouw ideale domeinnaam nog vrij is:

www.

Even onthouden

Volgende stap >>

Moet er iets aan je site gebeuren?

En heb je zelf geen tijd, geen zin of geen idee hoe je het moet aanpakken? Laat ons website-klusteam het voor je oplossen!

Klik hier voor meer info. 

Thema van de week:

Hallo Google! Welkom op mijn website!

De scripts van Google die regelmatig langskomen om je site te indexeren zijn natuurlijk ook 'bezoekers' die je het naar de zin moet maken. In het artikel van deze week leer je hoe je die 'crawlers' de juiste info kunt meegeven.

Klik hier voor het artikel.

Maak een site in 15 min.

Klik hier om onze nieuwe SwiftySiteDesigner online uit te proberen en maak in 5 tot 10 minuten een nieuw website-ontwerp.

Snelkeuze menu

First Class hosting-pakket
Swiftysite
Domeinnamen
Product Overzicht
Direct Bestellen
Veel Gestelde Vragen

Informatie

Hopelijk vind je alle informatie die je nodig hebt op deze website. Heb je nog vragen? Klik hier om een bericht te sturen of bel tijdens kantoor-uren met 040-2085353 (NL) of 011/547498 (B).

First Class Hosting

Ervaar de voordelen van ons populairste hostingpakket. Klik hier om te ontdekken welke voordelen het gratis meegeleverde starterspakket te bieden heeft...

Ben jij een startende ondernemer?

Dan hebben wij een handig gratis ebook om je op weg te helpen met je online presentatie.

Klik hier om het gratis te downloaden.

Alphamega Hosting heeft een unieke garantie!
Privacy Contact Sitemap Copyright 2012 Alphamega Hosting B.V.