Ankündigung

Einklappen
Keine Ankündigung bisher.

Gibt es ein "gutes" Tool für Linien Grafiken?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Gibt es ein "gutes" Tool für Linien Grafiken?

    Hallo,

    ich bin frisch in der PHP Ecke. Habe den ESP8266 als neues Spielzeug entdeckt. Mach da viel mit Sensoren herum.
    Nun geht es ans auswerten von den Daten.

    Dazu benötige ich eben Linien Diagramme. Aber! Ich suche eine Lösung, welche lokal funtioniert. Also nichts, wo man irgend welche Daten erst an Google und Co senden muss, damit etwas aufbereitet wird. Auch möchte ich keine Tools aus solchen Quellen nutzen.

    Gibt es da Alternativen? Am liebsten wäre mir eine Lösung, die nicht kommerziell ist. So wie JpGraph.

    Bin für jeden Tipp dankbar.

  • #2
    Wonach hast Du gesucht?
    Außerdem hat das weniger mit PHP als mit JavaScript zu tun.

    [MOD: verschoben von PHP-Einsteiger]
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

    Kommentar


    • #3
      Manchmal sieht man den Wald vor lauter Bäumen nicht.
      Über Chart.js bin ich in der Tat mal gestolpert, hab es mir aber nicht genau angeschaut.

      Diesen Fehler werde ich umgehend beheben. Danke für den Tipp!

      Kommentar


      • #4
        Wenn man sieht wie einfach SVG ist wird es wohl nicht schwierig sein, sein Chart per PHP und SVG zu bauen.

        HTML-Code:
        <!DOCTYPE html>
        <html lang=de>
          <meta charset=UTF-8>
          <title>Document</title>
        
            <style>
             .lineChartAxis{
              stroke:#444;
              stroke-width:4;
              stroke-linecap: round;
            }
            .lineChartXYAxis{
              stroke:#aaa;
              stroke-width:1;
              stroke-linecap: round;
              stroke-dasharray: .5,7.5;
            }
            .lineChartYTextAxis{
              font-family:"Calibri", sans-serif;
              fill: ##000;
              text-anchor:end;
              alignment-baseline:middle;
              font-size:18px;
        
            }
            .lineChartXTextAxis{
              font-family:"Calibri", sans-serif;
              text-anchor:middle;
              alignment-baseline:middle;
              font-size:18px;
              fill: ##000;
            }
            .lineChartPoint{
              stroke:#000;
              fill:#f00;
            }
        
            .lineChartLine {
              stroke:#000;
              stroke-width:8;
              stroke-linecap: round;
            }
           </style>
        
        <svg  viewBox="0 0 600 400">
          <path class="lineChartAxis" d="M50,350 h510 M50,350 v-310 "/>
          <path class="lineChartXYAxis" d="M40,50 h520 M40,100 h520 M40,150 h520 M40,200 h520 M40,250 h520 M40,300 h520"/>
          <path class="lineChartXYAxis" d="M150,360 v-320 M250,360 v-320 M350,360 v-320 M450,360 v-320 M550,360 v-320"/>
          <text class="lineChartYTextAxis" x=35 y=50>300</text>
          <text class="lineChartYTextAxis" x=35 y=100>290</text>
          <text class="lineChartYTextAxis" x=35 y=150>280</text>
          <text class="lineChartYTextAxis" x=35 y=200>270</text>
          <text class="lineChartYTextAxis" x=35 y=250>260</text>
          <text class="lineChartYTextAxis" x=35 y=300>250</text>
        
          <text class="lineChartXTextAxis" x=150 y=375>MP 1</text>
          <text class="lineChartXTextAxis" x=250 y=375>MP 2</text>
          <text class="lineChartXTextAxis" x=350 y=375>MP 3</text>
          <text class="lineChartXTextAxis" x=450 y=375>MP 4</text>
          <text class="lineChartXTextAxis" x=550 y=375>MP 5</text>
        
          <line class="lineChartLine" x1="50" y1="300" x2="150" y2="220"/>
          <line class="lineChartLine" x1="150" y1="220" x2="250" y2="125"/>
          <line class="lineChartLine" x1="250" y1="125" x2="350" y2="75"/>
          <line class="lineChartLine" x1="350" y1="75" x2="450" y2="100"/>
          <line class="lineChartLine" x1="450" y1="100" x2="550" y2="155"/>
        
          <circle class="lineChartPoint" cx="50" cy="300" r="6" />
          <circle class="lineChartPoint" cx="150" cy="220" r="6" />
          <circle class="lineChartPoint" cx="250" cy="125" r="6" />
          <circle class="lineChartPoint" cx="350" cy="75" r="6" />
          <circle class="lineChartPoint" cx="450" cy="100" r="6" />
          <circle class="lineChartPoint" cx="550" cy="155" r="6" />
        </svg>
        https://jsfiddle.net/qar5609w/

        Kommentar


        • #5
          Kommt darauf an wie du die ausgeben und erstellen möchtest. Als Bild geht das mit gdlib. ein Beispiel für ein Kreisdiagramm wäre https://www.schattenbaum.net/php/kre...ten_farben.php
          In dem Fall würdest du mit PHP auf dem Server die Diagramme als Bilder erstellen. Jede Änderung der Daten wäre ein neu gezeichnetes Bild.

          Dann kannst du die Diagramme auch als SVG Grafik erzeugen, schau mal hier: https://de.wikipedia.org/wiki/Datei:...m-Beispiel.svg
          Das wäre eine Ausgabe ähnlich HTML und lässt sich auch so bearbeiten.

          Und dann halt als Alternative mit Javascript auf dem Client(Browser), da werden die Daten dann mit vom Server geschickt und Javascript oder eine Bibliothek, wie das von dir genannte JPgraph rendert dir die Grafik daraus.

          Wenn du noch neu bist und keine Vorstellung hast erzeuge erst mal die Daten für die X/Y/-Achsen aus der Datenbank. Danach probierst du ein wenig rum, was dir besser gefällt. Die Bibliotheken von Javascript zur Erzeugung von Diagrammen können da so einiges.

          EDIT
          Uupps, da war ich wohl spät dran.

          Kommentar


          • #6
            esp8266 und php ?
            https://de.wikipedia.org/wiki/ESP8266


            bei den meisten howtos, welche die anschlüsse/sensoren etc pp erklären, sind recht gute scripts zur graphischen darstellung der datenbankeinträge welche meist auf einem raspi liegen bei.

            der andere lustige weg scheint highcharts mit einem async webserver for esp8266
            https://github.com/me-no-dev/ESPAsyncWebServer
            https://www.highcharts.com/demo
            wie bspw.
            https://randomnerdtutorials.com/esp3...rt-web-server/

            Kommentar


            • #7
              Zitat von tomBuilder Beitrag anzeigen
              esp8266 und php ?
              https://de.wikipedia.org/wiki/ESP8266


              bei den meisten howtos, welche die anschlüsse/sensoren etc pp erklären, sind recht gute scripts zur graphischen darstellung der datenbankeinträge welche meist auf einem raspi liegen bei.

              der andere lustige weg scheint highcharts mit einem async webserver for esp8266
              https://github.com/me-no-dev/ESPAsyncWebServer
              https://www.highcharts.com/demo
              wie bspw.
              https://randomnerdtutorials.com/esp3...rt-web-server/
              Ich suche eben eine lokale Lösung. Und keine , wo ich das Internet zur Darstellung brauche.

              Kommentar


              • #8
                Zitat von ESPJunkie Beitrag anzeigen

                Ich suche eben eine lokale Lösung. Und keine , wo ich das Internet zur Darstellung brauche.
                Ich sehe nicht, inwiefern du das Internet zur Darstellung brauchst.
                Würdest Du wohl auch nicht, hättest Du Dich mit den Links beschäftigt.
                macht nichts, mach eben eine lokale lösung mit Hilfe von php auf dem esp8266.
                bin raus.

                Kommentar


                • #9
                  Zitat von protestix Beitrag anzeigen
                  Kommt darauf an wie du die ausgeben und erstellen möchtest. Als Bild geht das mit gdlib. ein Beispiel für ein Kreisdiagramm wäre https://www.schattenbaum.net/php/kre...ten_farben.php
                  In dem Fall würdest du mit PHP auf dem Server die Diagramme als Bilder erstellen. Jede Änderung der Daten wäre ein neu gezeichnetes Bild.

                  Dann kannst du die Diagramme auch als SVG Grafik erzeugen, schau mal hier: https://de.wikipedia.org/wiki/Datei:...m-Beispiel.svg
                  Das wäre eine Ausgabe ähnlich HTML und lässt sich auch so bearbeiten.

                  Und dann halt als Alternative mit Javascript auf dem Client(Browser), da werden die Daten dann mit vom Server geschickt und Javascript oder eine Bibliothek, wie das von dir genannte JPgraph rendert dir die Grafik daraus.

                  Wenn du noch neu bist und keine Vorstellung hast erzeuge erst mal die Daten für die X/Y/-Achsen aus der Datenbank. Danach probierst du ein wenig rum, was dir besser gefällt. Die Bibliotheken von Javascript zur Erzeugung von Diagrammen können da so einiges.

                  EDIT
                  Uupps, da war ich wohl spät dran.
                  Gaaanz so neu bin ich auch nicht. Mache schon ewig mit EDV rum. Habe meine Daten auch schon meine SQL Daten mit JPgraph in einer Liniengrafik am laufen.
                  Bloß passt die Skalierung der X Achse nicht. In X ist die Zeit (aus einem timestamp Datenbankfeld). Und die Beschriftung der Achse passt einfach nicht zu den Daten.
                  Hilfe hierfür ist nirgends zu finden.

                  Darum suche ich eine andere Lösung, bei der mir evtl. beim einen oder anderen Problemchen geholfen werden kann.

                  Das ganze soll halt, so wie oben bereits erwähnt, ohne Internet Anbindung funktionieren.

                  Das mit der SVG Grafik Geschichte muss ich mir noch in Ruhe anschauen, ob es für mich in Frage kommt.

                  Bei der https://www.chartjs.org/ Lösung von Arne Drews habe ich gerade das Problem, dass ich keine Anleitung finde, wie ich mir das chart.js lokal kompilieren kann. Das einzige was ich momentan finde ist:
                  Code:
                   
                   npm install chart.js --save
                  Was ist aber ein NPM-Projektverzeichnis? Ich denke mal, dass ich das gar nicht haben möchte. Das ist irgend etwas mit einem Node Server?!?

                  Mal sehen was ich noch an Infos finde zu dem Thema.

                  Kommentar


                  • #10
                    Dygraphs finde ich relativ einfach --> http://dygraphs.com/

                    Ein Beispiel --> https://administrator.de/wissen/kleine-einführung-open-source-javascript-chart-bibliothek-dygraphs-264852.html

                    Kommentar


                    • #11
                      Länger auseinandergesetzt hatte ich mich mit JpGraph. Hier hat es mit dem timestamp einfach nicht so funktioniert wie gewünscht.
                      Chart.js war dann die nächste Wahl. Hier bin ich daran gescheitert, dass man das Script über das Internet laden müsste. Für die lokale Benutzung hätte ich eine repository clonen müssen. Habe aber keine Anleitung dazu gefunden. Bei anderen mir hier empfohlenen Lösungen hatte ich ähnliche Probleme.

                      Lösungen, wo ich vonder Pike auf alles selber hätte Coden müssen, waren mir zu aufwändig. Dygraphs habe ich mir noch gar nicht angesehen.

                      Mit den Schlagworten "MySql, timestamp, timeline" hatte ich schon weiter gesucht und bin an ZingChart geraten.

                      Bei einer lokalen, privaten Anwendung ist ZingChart unkompliziert und leicht verständlich und legal.

                      Da habe ich eine Beispieldatei gefunden , bei der ich eine Datenbank Abfrage eingepflegt habe. Meine Daten habe ich dann für das Chart aufbereitet.
                      Dann hab ich das timestamp Feld der X-Achse zugewiesen und die Werte der Sensoren der Y-Achse. Und es hat ganz einfach und komfortabel funktioniert.

                      Bestimmt hat es mit den anderen Lösungen nicht funktioniert, weil ich mich zu doof angestellt habe. Aber was soll's. Jetzt habe ich das was ich gesucht habe und es funktioniert!

                      Ich mag mich für die vielen Tips trotzdem recht herzlich bedanken.

                      Kommentar

                      Lädt...
                      X