PHP MySQL Json Google Charts

zaterdag 24 september 2016 17:12

Acties:

0 Henk 'm!

Topicstarter

Ik heb sinds kort een slimme meter in huis en wil graag de gegevens daarvan middels grafieken inzichtelijk maken.
Na enig stoeiwerk is het gelukt om de gegevens in een MySQL-database op te slaan.
Nu is de volgende stap uiteraard om deze gegevens middels PHP weer uit te lezen en deze wil ik graag omzetten naar Google Charts grafieken.

Ik heb een script gevonden waarmee ik de data op kan halen en in een tabel / array kan stoppen.

PHP:

<?php
$pdo=new PDO("mysql:dbname=P1db;host=192.168.2.127","p1db","dbp1");
$statement=$pdo->prepare("SELECT Day(DateTime) AS Day, FORMAT(((MAX(AfgenomenT1) - MIN(AfgenomenT1)) + (MAX(AfgenomenT2) - Min(AfgenomenT2))),3, 'nl_NL') as TotaalAfgenomen FROM P1db.P1uitlezen GROUP BY Day ORDER BY DateTime ASC LIMIT 31");
$statement->execute();
$results=$statement->fetchAll(PDO::FETCH_ASSOC);
$json=json_encode($results);
echo json_encode($results);
?>

Dit geeft als resultaat het volgende:

[{"Day":"12","TotaalAfgenomen":"1,196"},{"Day":"13","TotaalAfgenomen":"18,233"},{"Day":"14","TotaalAfgenomen":"12,746"},{"Day":"15","TotaalAfgenomen":"9,962"},{"Day":"16","TotaalAfgenomen":"11,337"},{"Day":"17","TotaalAfgenomen":"15,528"},{"Day":"18","TotaalAfgenomen":"14,950"},{"Day":"19","TotaalAfgenomen":"10,415"},{"Day":"20","TotaalAfgenomen":"10,534"},{"Day":"21","TotaalAfgenomen":"9,503"},{"Day":"22","TotaalAfgenomen":"11,034"},{"Day":"23","TotaalAfgenomen":"10,114"},{"Day":"24","TotaalAfgenomen":"7,322"}]

Vervolgens wil ik deze data aan aan onderstaande html-code voeren, echter daar gaat het mis (denk ik tenminste).

HTML:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
      
    function drawChart() {
      var jsonData = $.ajax({
          url: "http://192.168.2.127/includes/DagelijksVerbruikLaatsteMaand.php",
          dataType: "json",
          async: true
          }).responseText;
          
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

      chart.draw(data, {width: 600, height: 400});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Ik heb zelf al verschillende websites met voorbeelden geprobeerd, echter ik krijg het niet voor elkaar om de data in het juiste formaat aan te leveren zodat er een mooie grafiek van gemaakt kan worden.

Iemand hier die me in de juiste richting kan sturen?

zaterdag 24 september 2016 17:54

Acties:

0 Henk 'm!

HollowGamer

Wat gaat er precies mis? Wordt het niet goed weergegeven?
Check ook de console/netwerk tab of alles goed werkt (CTRL+SHIFT+i) in FF/Chrome.

zaterdag 24 september 2016 18:10

Acties:

0 Henk 'm!

cOOlrUnnINgs

Topicstarter

Het probleem is dat er helemaal niets getoond wordt. Krijg een melding "table has no columns".
Probleem lijkt dus te zijn dat de tabel die opgehaald wordt uit MySQL niet in het juiste (json-)formaat wordt aangeboden, echter ik kan nergens vinden of en hoe je eventueel een formaat mee kan geven aan deze json-data.

Nog even wat verder gekeken, maar lijtk erop dat de data niet door/aan Google Charts opgehaald/aangeleverd kan worden. Issue opgelost.

Maar helaas nog steeds geen grafiek

[ Voor 22% gewijzigd door cOOlrUnnINgs op 24-09-2016 18:19 ]

zaterdag 24 september 2016 18:19

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Al gewoon eens de documentatie gelezen?
Het kan prima wat jij wil; read all about it

[ Voor 27% gewijzigd door RobIII op 24-09-2016 18:20 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

zaterdag 24 september 2016 18:27

Acties:

0 Henk 'm!

EngineerCoding

RobIII schreef op zaterdag 24 september 2016 @ 18:19:
Al gewoon eens de documentatie gelezen?
Het kan prima wat jij wil; read all about it

Om even aan te vullen op dit verhaal (wat blijkt uit de doos):
Het komt erop neer dat het JSON format niet goed is, oftewel Google charts kan niet met de gegenereerde JSON om. Overigens in de php roep je twee keer json_encode aan wat natuurlijk niet efficiënt is.

[ Voor 5% gewijzigd door EngineerCoding op 24-09-2016 18:28 . Reden: Duidelijker maken en type ]

zaterdag 24 september 2016 18:30

Acties:

0 Henk 'm!

HollowGamer

EngineerCoding schreef op zaterdag 24 september 2016 @ 18:27:
[...]

Het komt erop neer dat het JSON format niet goed is, oftewel Google charts kan niet met de gegenereerde JSON om. Overigens in de pap roep je twee keer json_encode aan wat natuurlijk niet efficiënt is.

Dat was mij helemaal niet opgevallen.

Inderdaad gewoon een echo json_encode..

Maak je geen gebruik van een framework?
Ook al is het niet verplicht, kies ik toch altijd voor een JS content-type en (CSRF) validatie zodat niemand 'mijn' data zomaar kan stelen/misbruiken.

zaterdag 24 september 2016 18:41

Acties:

0 Henk 'm!

cOOlrUnnINgs

Topicstarter

RobIII schreef op zaterdag 24 september 2016 @ 18:19:
Al gewoon eens de documentatie gelezen?
Het kan prima wat jij wil; read all about it

Daar ben ik zeker wel doorheen gelopen, echter kijk ik waarschijnlijk ergens overheen waardoor het niet werkt, vandaar hier mijn vraag.
Nieuwe "ogen" zien misschien wat ik zelf over het hoofd zie.

EngineerCoding schreef op zaterdag 24 september 2016 @ 18:27:
[...]

Om even aan te vullen op dit verhaal (wat blijkt uit de doos):
Het komt erop neer dat het JSON format niet goed is, oftewel Google charts kan niet met de gegenereerde JSON om. Overigens in de php roep je twee keer json_encode aan wat natuurlijk niet efficiënt is.

Goed gezien, die had ik dus over het hoofd gezien.

HollowGamer schreef op zaterdag 24 september 2016 @ 18:30:
[...]

Dat was mij helemaal niet opgevallen.
Inderdaad gewoon een echo json_encode..

Maak je geen gebruik van een framework?
Ook al is het niet verplicht, kies ik toch altijd voor een JS content-type en (CSRF) validatie zodat niemand 'mijn' data zomaar kan stelen/misbruiken.

Nee, ik was eerst begonnen met het laten tonen van een simpele grafiek.
Als dat eenmaal gelukt is, dan zien we daarna wel weer verder.
Welk framework adviseer je?

zaterdag 24 september 2016 18:47

Acties:

0 Henk 'm!

HollowGamer

cOOlrUnnINgs schreef op zaterdag 24 september 2016 @ 18:41:
Nee, ik was eerst begonnen met het laten tonen van een simpele grafiek.
Als dat eenmaal gelukt is, dan zien we daarna wel weer verder.
Welk framework adviseer je?

Een heel framework is misschien wat overdreven, zeker als het alleen voor thuis is.
Inderdaad eerst maar even kijken of het lukt.
Heb je de console al gecheckt?

zaterdag 24 september 2016 18:52

Acties:

0 Henk 'm!

cOOlrUnnINgs

Topicstarter

HollowGamer schreef op zaterdag 24 september 2016 @ 18:47:
[...]

Een heel framework is misschien wat overdreven, zeker als het alleen voor thuis is.
Inderdaad eerst maar even kijken of het lukt.
Heb je de console al gecheckt?

Daar zie ik alleen de volgende melding staan, maar dat zegt me dus echt helemaal niets:

Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. See https://www.chromestatus.com/features/4668884095336448 for more details.

zaterdag 24 september 2016 19:12

Acties:

0 Henk 'm!

Gropah

Admin Softe Goederen

Oompa-Loompa 💩

Wellicht staat er geen data in jsonData op het moment dat je de call naar Google Charts? Dit zou komen omdat je ajax request async is. Het is opzich wel beter om het async te houden, dan om het synchronous te maken, maar ik zou je aanraden om er zoiets als hier onder aan de pagina van te maken.

Vraag

Alle reacties