amCharts gegevens uit PHP bestand laden


amcharts logophp logo

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

Wat heb je nodig?:

1) amCharts

Ik heb het bestand “samples/angularGauge.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 gauge wordt standaard gevuld met willekeurige data en ziet er zo uit:

amcharts gauge speedometer

Hoe werkt het?

Bijna onderaan in het script zie je staan  setInterval(randomValue, 2000);  dit roept een functie (om de 2 seconden) aan dat iets verder onder in het bestand staat:

De waarde word weergegeven met  arrow.setValue(value);

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 “angularGauge.html” wordt “angularGauge.php” anders wordt het script niet door de PHP compiler gehaald door de webserver, en dus ook niet geladen.

2) Verwijderen van de standaard chartdata gegevens:

Verwijder deze regel:  setInterval(randomValue, 2000);  en verwijder de gehele functie  randomValue()

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

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

5) Nu gaan we een Javascript variabele koppelen aan de PHP variabele met de regel:

6) Om nu de wijzer op de juiste waarde te laten zetten, voeg de volgende regel toe ONDER  chart.write("chartdiv");

Het resultaat zal er zo uit zien:

amcharts gauge speedometer php waarde

Aanpassen meter

1) De titel van de webpagina aanpassen:  <title>amCharts examples</title>

2) Titel van de meter is aan te passen door deze regel aan te passen:  chart.addTitle("Speedometer");

3) De tekst in het midden-onder is aan te passen door deze regel aan te passen:  axis.setBottomText("0 km/h");

4) Om de ‘banden’ en kleuren aan te passen, kun je deze wijzigen of toevoegen (vergeet dan niet door te tellen):

en voeg deze toe aan deze lijst:  axis.bands = [band1, band2, band3];

De code voor het uitlezen van een waarde uit een PHP bestand met amCharts is nu bijvoorbeeld:

Het resultaat ziet er dan zo uit!

amcharts gauge speedometer php voorbeeld

Top