Highcharts gegevens uit PHP bestand laden


highcharts logo
php logo

Ik maak gebruik van deze handleiding om gegevens vanuit een PHP bestand te laden in een Javascript die een PIE weergeeft.

Wat heb je nodig?:

1) Highcharts 4.x

Ik heb het bestand “examples/pie-basic/index.html” uit de bibliotheek genomen als voorbeeld voor het uitlezen van een variabele uit een PHP bestand.

Standaard ziet het bestand er zo uit:

De pie wordt standaard gevuld met data en ziet er zo uit:

highcharts pie basic standaard

Hoe werkt het?

Highcharts werkt met JSON data, bijna onderaan in het script zie je staan  data:  , hierachter staat een een JSON string:

Ps. je kan het “uitstekende” pie puntje ook weghalen, de code ziet er dan zo uit:

Gegevens uit PHP bestand laden

1) Omdat we gegevens uit een PHP bestand laden moet je de extensie van het HTML bestand veranderen in PHP, dus “index.html” wordt “index.php” anders wordt het script niet door de PHP compiler gehaald door de webserver, en dus ook niet geladen.

2) Maak een PHP bestand aan genaamd “phpscript.php” met de inhoud:

3) Je kan nu het PHP bestand inladen door in de HEAD te zetten:  <?php include 'phpscript.php' ?>

4) Daarna kan de JSON string geladen worden (variabele uit het PHP script) met:

Ps. De JSON String is dan:  [["Aantal 01",200],["Aantal 02",125],["Aantal 03",75]]

Je kan het altijd controleren door een debug regel toe te passen:
document.write(<?php echo json_encode($jsondata); ?>);

Wat vreemd is, is dat de string 2x als JSON verwerkt moet worden, in het PHP bestand en dan weer in het Javascript, haal je 1 van de twee weg dan werkt het niet…

Het resultaat zal er zo uit zien:

highcharts pie basic php gegevens

Aanpassen pie

Titel aanpassen
Je kan de titel van de grafiek aanpassen met de regel:  text: 'TITEL'

Aantallen weergeven in plaats van percentage
Je kan ook de aantallen aangeven in plaats van de percentage, verander deze lijn:
format: '<b>{point.name}</b>: {point.percentage:.1f} %',

in:
format: '<b>{point.name}</b>: {point.y}',

dit moet je dan ook doen voor de tooltip:
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

in:
pointFormat: '{series.name}: <b>{point.y}</b>'

Het resultaat:
highcharts pie basic php gegevens getallen