googlechart digramm erstellen mit php

Christian283 · Feb 20th 2018

Guten Abend Maker,

Ich bin Dabei einen Kleine Datenlogger zu entwickeln und möchte die Daten auch visualisieren.

Zur Visualisierung der Daten benutze ich ein Java Script von Google-Chart in dem ich dynamisch mit php die Daten aus einer SQL Datenbank laden möchte.

Nun zu meinem Problem, ich möchte die Daten für bestimmte Eingabeparameter Ausgeben, also wenn ich z.b. das Datum in der Eingabe änder soll er das Script erneut mit den geänderten Variabel ausführen.

Die Ausgabe des Scripts und die Visualisierung funktionieren super nur das ganze mit dem ändern des Datums und das aktualisieren funktioniert nicht so wie ich es mir vorgestellt habe.

Ich habe es wie hier in Zeile 1-5 / 42-44 dargestellt probiert, aber das klappt mit der Mischung der Programmiersprachen wohl nicht. Vielleicht weis einer von euch eine Lösung dazu oder kann mir Helfen.

Ich bedanke mich schonmal für all die die mir Helfen wollen

PHP

<?php
if(isset($_POST['$dayinput']))

    {  
?>

        <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Zeit', 'String 1'],

                <?php
                $sql = "SELECT * FROM PVA WHERE Date='$dayinput'";
                if ($ergebnis = mysqli_query($db, $sql)) {
                while ($zeile = mysqli_fetch_object($ergebnis))
                {

                    echo "['";
                    echo   htmlspecialchars($zeile->Time);
                    echo "',";
                    echo   htmlspecialchars($zeile->Wert). "],";

                }
                ?>
            ]);

            var options = {
                title: 'Wechselrichter - DC-Strom',
                curveType: 'function',
                legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('Tabellen'));

            chart.draw(data, options);
        }

       </script>
<?php
}
?>

Display More

holgerble · Feb 20th 2018

Vielleicht hilft Dir dieses kleine Programm.... als Hilfe für Deine Idee

http://www.albrechtreiber.de/datalogging.html

doing · Feb 20th 2018

Ich mache die Abfrage der Daten aus der Datenbank im Moment so

SQL

...
AND time > DATE_SUB(NOW(), INTERVAL ".$range.")
...

wobei $range dann z.B. DAY, WEEK, MONTH sein kann. Die Spalte time in der Tabelle hat den Typ datetime und enthält Datum und Uhrzeit zum Datensatz.

Davon abgesehen finde ich es sehr unsauber alles zusammen zu packen - wieso lagerst du die DB Abfrage und Rückgabe nicht aus und nutzt Ajax?

Christian283 · Feb 20th 2018

Quote from holgerble

Vielleicht hilft Dir dieses kleine Programm.... als Hilfe für Deine Idee

http://www.albrechtreiber.de/datalogging.html

Danke für die Idee, ich habe aber an meinem Raspberry, Microcontroller mit eigenen Stromwandlern, ich möchte das ganze mal von vorne bis hinten selber erforschen. Daher kommt das System für mich nicht in Betracht

Quote from doing
Ich mache die Abfrage der Daten aus der Datenbank im Moment so
SQL
...
AND time > DATE_SUB(NOW(), INTERVAL ".$range.")
...
wobei $range dann z.B. DAY, WEEK, MONTH sein kann. Die Spalte time in der Tabelle hat den Typ datetime und enthält Datum und Uhrzeit zum Datensatz.

Davon abgesehen finde ich es sehr unsauber alles zusammen zu packen - wieso lagerst du die DB Abfrage und Rückgabe nicht aus und nutzt Ajax?

Mein Problem ist nicht die Datenausgabe aus der Datenbank das Funktioniert gut, mein Problem ist es das Java Script neu zu laden sobald ich '$dayinput' verändere.

Ich bin bisher noch nicht dahinter gekommen Programmteile auszulagern. Ich schreibe momentan alles in phpstorm, jede Seite die ich programmiere hat auch eine Seite in phpstorm

Ich muss dazu sagen das ich mit meinen Programmiertechniken noch sehr weit am Anfang stehe, ich bin ehr der Elektrotechniker

doing · Feb 20th 2018

Dann mach es doch mit Ajax und hol dir die Daten alle X Sekunden neu aus der DB.

JavaScript

setInterval(function() {
    $.ajax({ url: 'deine/url/zur/datei.php?parameter=blubber',
        type: 'get',
        success: function(code) {
            var data = new google.visualization.DataTable(code);
            var options = {
                ...
            };
            var chart = new google.visualization.LineChart(document.getElementById('deinDiv'));
            chart.draw(data, options);
    });            
}, 60000);

Display More

holgerble · Feb 20th 2018

Du solltest auch nicht den WR damit abfragen.....

aber es ist ein ezSunnyLog.php

enthalten... mit Eingabemöglichkeit fürs Datum...

Christian283 · Feb 20th 2018

Quote from doing

Dann mach es doch mit Ajax und hol dir die Daten alle X Sekunden neu aus der DB.

JavaScript

setInterval(function() {
    $.ajax({ url: 'deine/url/zur/datei.php?parameter=blubber',
        type: 'get',
        success: function(code) {
            var data = new google.visualization.DataTable(code);
            var options = {
                ...
            };
            var chart = new google.visualization.LineChart(document.getElementById('deinDiv'));
            chart.draw(data, options);
    });            
}, 60000);

Display More

Die Funktion kenne ich noch nicht ich lese mich da mal ein bisschen schlau und probiere es damit aus vielen dank doing !

Christian283 · Feb 20th 2018

Quote from holgerble

Du solltest auch nicht den WR damit abfragen.....

aber es ist ein ezSunnyLog.php

enthalten... mit Eingabemöglichkeit fürs Datum...

Achso Da hab ich wohl zu vorschnell geurteilt, ich schau da gleich nochmal rein. Vielen danke holgerble

Christian283 · Feb 20th 2018

Jetzt wo ich die .php aus dem Programm gesehen habe wird mir so einiges klar

ich programmiere die ganze zeit normales html und füge ab und an ein php block ein statt die html seiten alle mit echo einzufügen

So lernt man^^ Vielen dank Leute!!! Das hat mich wirklich sehr weiter gebracht!

Hier damit sich alle mal amüsieren können

PHP

<?php
$db = mysqli_connect("localhost", "root", "Sonne123")
or die ("Falsche Login Daten(MYSQL");

mysqli_select_db ($db, "SolarSQL")
or die("Es konnte keine Verbindung zur Datenbank hergestellt werden.");

$dayinput = "2018-02-11";

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PMS</title>

    <link href="style.css" type="text/css" rel="stylesheet">

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>




    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Zeit', 'String 1'],

                <?php
                $sql = "SELECT * FROM PVA WHERE Date='$dayinput'";
                if ($ergebnis = mysqli_query($db, $sql)) {
                while ($zeile = mysqli_fetch_object($ergebnis))

                {

                    echo "['";
                    echo   htmlspecialchars($zeile->Time);
                    echo "',";
                    echo   htmlspecialchars($zeile->Wert). "],";

                }
                ?>
            ]);

            var options = {
                title: 'Wechselrichter - DC-Strom',
                curveType: 'function',
                legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('Tabellen'));

            chart.draw(data, options);
        }

    </script>


</head>


<body>

<div id="Inhalt">

    <div id="Banner">
        <a>Photovoltaik-Monitoring-System</a>
        <div id="Logo">
            <a href="index.php">
                <img src="Logopsm.png">
            </a>
        </div>
    </div>



    <div id="Navigation">

        <div id="Platzhalter1"></div>


        <h3>Navigation</h3><br>

        <a href="index.php">Übersicht</a><br><br>

        <h4>Anlage</h4>
        <a href="Info.php">Informationen</a><br><br><br>

        <h4>Wechselrichter</h4>
        <a href="DC-Strom.php">DC-Strom</a><br><br><br>







    </div>
    <div id="Platzhalter"></div>


    <div id="Datum">
        <form action="DC-Strom.php" method="post">
            <label for="dayinput">
                Tag (yyyy-mm-dd):
                <input id="date" name="dayinput">
                <input type="submit" value="ok">
            </label>

        </form>

    </div>


    <div id="Tabellen">
    </div>

    <?php

    if (isset($_POST['dayinput']))
    {
        $dayinput = $_POST['dayinput'];
        echo $dayinput;
    }


    if ($db = mysqli_connect("localhost", "root", "Sonne123", "SolarSQL"))

    {
        $sql = "SELECT * FROM PVA WHERE Date='$dayinput'";
        if ($ergebnis = mysqli_query($db, $sql)) {


            while ($zeile = mysqli_fetch_object($ergebnis))
            {

                echo  htmlspecialchars   ($zeile->Time) ;
                echo  htmlspecialchars   ($zeile->Wert) . "<br>";
            }



        }

        mysqli_close($db);
    }
    else
    {
        echo "Fehler!";
    }

    }
    ?>






</div>







</body>
</html>

Display More

doing · Feb 20th 2018

Quote from Christian283

ich programmiere die ganze zeit normales html und füge ab und an ein php block ein statt die html seiten alle mit echo einzufügen

Wer sagt, dass du das musst? Vom Stil mal abgesehen geht beides...

Christian283 · Feb 21st 2018

Quote from doing

Wer sagt, dass du das musst? Vom Stil mal abgesehen geht beides...

Es sah logischer und unkomplizierter aus

Tags