Highcharts gegevens uit MySQL database halen (PHP script)


highcharts logo
php logo

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

Wat heb je nodig?:

1) HighCharts 4.x

Ik heb het bestand “examples/area-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 area 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:

Gegevens uit een MySQL database laden (mbv PHP)

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.

LET OP: Onderstaand script is een voorbeeld!!, MySQL gegevens en variabelen staat er niet allemaal in!

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:

Je kan het altijd controleren door een debug regel toe te passen:

document.write(<?php echo json_encode($jsondata1); ?>);

Het resultaat zal er zo uit zien:

highcharts area basic php gegevens enkel

Aanpassen van de AREA grafiek

Titel aanpassen
Je kan de titel van de grafiek aanpassen met de regel:

Subtitel aanpassen
Je kan de subtitel van de grafiek aanpassen met de regel:

Gewone waarden weergeven in de labels
Je kan de labels aanpassen met de regel:

Label zijkant aanpassen
Je kan de label aan de zijkant aanpassen met de regel:

Tooltip aanpassen
Je kan de tooltip aanpassen met de regel:

Meerdere gegevens laden in de grafiek

Om meerdere gegevens in de grafiek weer te laten geven moet je een (nieuwe) 2e array bouwen.

In het bestand phpscript.php zijn deze toevoegingen nodig (de oude array laat ik staan voor de duidelijkheid):

1) Selecteer de 2e gegevensreeks uit de database:

2) Zet het resultaat van de gegevens in een array:

3) Converteer de array naar een JSON formaat:

In het bestand index.php zijn deze toevoegingen nodig (de oude array laat ik staan voor de duidelijkheid):

1) Verwerk de 2e gegevensreeks uit de JSON string:

Het resultaat:

highcharts area basic php gegevens

Top