Wie erstelle ich ein Energieflussdiagramm mit HTML, Javascript (jQuery) oder PHP?

Hallo, ich würde gerne wissen, ob es eine Art Library oder ähnliches gibt, um ein Energieflussdiagramm zu erstellen. Ich hänge ein Bild an, um meine Vorstellung zu verdeutlichen.

Hintergrund ist, dass ich eine PV-Anlage auslese und diese Daten gerne Darstellen würde. Das wäre einmal die aktuelle Erzeugung, dann der Verbrauch und letztlich der Bezug. Die Daten lese ich regelmäßig aus, mir geht es derzeit nur um die Darstellung, möglichst wie auf dem Bild zu sehen, die am besten animiert sein soll.

Vielen Dank für eure Anregungen / Hilfe

pv-daten energiefluss - (HTML, PHP, JavaScript)

1 Antwort

RakonDark

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

21.09.2016, 23:51

Das ist mit normalen HTML5 und Canvas pur schnell gemacht,

brauchst du das als archive bilder kannst du das auch mit php ein bild produzieren .

es fragt sich wie schnell der update sein soll und der verwendungszweck .

RakonDark

22.09.2016, 11:05

Wird dann alles mit Javascript gemacht. Und ein PHP was die Daten liefert.

Treolandix

Beitragsersteller

22.09.2016, 10:06

Es geht nur um die aktuelle Anzeige, die Werte werden alle 15 Sekunden aktualisiert. Ich schaue mir das Canvas-Element mal an, danke

Ähnliche Beiträge

JQuery in JavaScript Converter?

Hey Leute,

ich möchte gerne meinen jQuery-Code in JavaScript umwandeln. Mir ist klar, dass jQuery auch JavaScript ist, das halt nur eine Library benötigt. Gibt es so etwas wie einen jQuery-to-JavaScript-Converter?

Ich möchte halt diesen Code umwandeln:

<script>
  $(document).ready(function () {
    $('#call').on("input", function () {
      tmpval = $(this).val();

      if (tmpval == '') {
        $('#key').removeClass('lglan');
      }
      else {
        $('#key').addClass('lglan');
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $('#receive').on("input", function () {
      tmpval = $(this).val();

      if (tmpval == '') {
        $('#key2').removeClass('lglan');
      }
      else {
        $('#key2').addClass('lglan');
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $('#call').on("input", function () {
      tmpval = $(this).val();

      if (tmpval == '') {
        $('#vm').removeClass(' esy ');
        $('#vm').addClass(' odn ');
      }
      else {
        $('#vm').addClass(' esy ');
        $('#vm').removeClass(' odn ');
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $("#change").focusin(function () {
      $("#change").addClass("dri2");
    })
    $("#change").focusout(function () {
      $("#change").removeClass("dri2");
      $("#change2").focusin(function () {
        $("#change2").addClass("dri2");
      })
      $("#change2").focusout(function () {
        $("#change2").removeClass("dri2");
      })
    })
  });
</script>
<script>
  $(document).ready(function () {
    $('#call').on("input", function () {
      tmpval = $(this).val();

      if (tmpval == '') {
        $("#vm").attr("disabled", "disabled");
        $("#vm").removeAttr("enabled", "enabled");
      }
      else {
        $('#vm').attr("enabled", "enabled");
        $("#vm").removeAttr("disabled", "disabled");
      }
    });
  });
</script>
<script>
  $(document).ready(function() {
    $('#receive').on("input", function() {
      let currentValue = $(this).val();

      if (!currentValue.length) {
        $('#toggle').html('');
      }
      else {
        $('#toggle').html('<a id="click" class="lock" href="javascript:;"><?php echo $show ?></a>');
      }
    });
    $(document).on("click", "#click", function() {
      let text = $(this).text();

      if (text === "<?php echo $show ?>") {
        $(this).text("<?php echo $hide ?>");
        $("#receive").attr("type", "text");
      }
      else {
        $(this).text("<?php echo $show ?>");
        $("#receive").attr("type", "password");
      }
    });
  });
</script>

Wenn jemand etwas weiß, wäre es cool, mich zu unterstützen. 😉

...zum Beitrag

JavaScript bzw JQuery; Array auslesen und nach Variablen mit gleichem Wert suchen?

Hallo zusammen

Wie könnte ich in JavaScript bzw. Jquery ein Array auslesen und kontrollieren, ob ein Wert mehr als zwei mal vorkommt? (Ich mache dies für ein Kartenspiel, bei dem es nur jeweils zwei gleiche Karten geben kann). Gibt es für das irgendendeinen kokreten Befehl?

Vielen Dank im Voraus! (:

...zum Beitrag

Kann Javascript meine Daten geschweige denn meine IP auslesen?

Hallo, kann Java bzw Javascript und Cookies meine IP oder irgendwelche Daten und Information von mir auslesen wenn ja welche?

...zum Beitrag

Javascript (JQuery) in PHP einbinden?

Schönen guten Abend liebe Community,

also ich kann mich seit Ostern dieses Jahres als glücklicher Programmieranfänger bezeichnen. So habe ich mit HTML und CSS begonnen und mich dann über Javascript(JQuery) und Python auch mal an PHP getraut, da ich meine Web-Developement 'Skills' auch mal im Back-End erweitern wollte. Jetzt stoße ich aber ziemlich früh an ein Problem, bei dem ich einfach nicht dahinter Blicke. Meine Intention ist es dabei Javascript (vorallen Dingen JQuery) in PHP mit einzubeziehen. Dafür habe ich mithilfe von XAMPP einen lokalen Server gehostet, auf dem auch alles wunderbar funktioniert. Selbst CSS habe ich nach etwas 'Mehrrerei' zum Laufen gebracht. Jetzt scheitert es aber leider an JQuery. Ich habe das bislang wie im Bild erkenntlich so versucht, meine JQuery Datei mit in den Ordner zu ziehen. Diese dann im Head Bereich zu verlinken und ein Javascript-Script zu erstellen. Wenn ich dort nun jedoch JQuery Code hineinschreibe, wird dieser im Browser nicht ausgeführt.

Nun meine Frage....warum funktioniert das Ganze nicht, bzw. was habe ich falsch gemacht?

Danke schon einmal für alle Antworten!

...zum Beitrag

Wie programmiere ich am besten den Multiplayer meines Browsergames?

Ich Programmiere momentan ein Browserspiel, welches auf HTML und Javascript basiert.

Meine erste Idee für den Multiplayer war, dass im Hintergrund des Benutzers eine Seite aufgerufen wird um die daten zu senden (jquery $.send) und mittels XMLHttpRequest zu empfangen.(Mit beiden wurden PHP seiten aufgerufen, welche die Daten speichern oder auslesen)

Das ganze hat auch funktioniert, nur sowohl beim speichern der Daten in der MySql Datenbank als auch beim speichern der daten in simplen txt Dateien, ist der Server nicht mit 60 bearbeitungen in der sekunde klargekommen (30 mal daten senden und 30 mal empfangen) Das ganze hat sich dadurch bemerkbar gemacht, dass die seite, welche die Koordinaten aller Spieler anzeigen sollte, nicht mehr geladen hat, sobald das Spiel offen war und somit die 60 bearbeitungen pro sekunde auf dem Server verursacht hat.

Mein Ziel ist es, wie schon oben zu sehen, ein nicht auf Host basierenden Multiplayer zu erstellen.

Der server soll also einfach nur die Koordinaten aller Spieler empfangen speichern und ausgeben. (Pro spieler 60 pro sekunde)

Ist dies überhaupt möglich oder sollte man eine andere Methode verwenden.

...zum Beitrag

Muss man intelligent sein, um als Webdeveloper zu arbeiten?

Also mehr als Abitur-Niveau? Mindestens IQ 110?

• Web Technologies:

ASP.NET MVC, .NET Core and Web Services

• Desktop Technologies:

Windows Forms Application, WPF, UWP, and Windows Services,

• Client Side Web Technologies and Frameworks:

HTML, CSS, Bootstrap, JavaScript, jQuery and AJAX

• Mobile Application Development Framework:

Xamarin

• Database and ORM:

MS SQL Server, Entity Framework and LINQ

• Third party library integration:

Google API, Social Media API Integration

...zum Beitrag

Wie kann man mit Javascript Daten von anderen Webseiten auslesen?

Guten Tag,

Ich bin gerade dabei eine Webseite zuschreiben und möchte es den Nutzern möglichst komfortabel machen. Damit nicht alles ständig nachgeguckt werden muss, soll meine Webseite die Daten mit denen einer anderen automatisch abgleichen. Dies sollte schnell, sicher und zuverlässig funktionieren.

Wie kann ich das nun machen, dass die Daten automatisch und in echtzeit abgeglichen werden und ersetzt werden. Mit Javascript könnte ich die Daten auf der lokalen Webseite abgleichen und ersetzen. Ich weiß aber nicht, wie ich diese auf exterenen Webseiten abgleiche.

Vielen Dank. Mit freundlichen Grüßen ~Felix193

...zum Beitrag

Möglichkeit Daten mittels JavaScript dauerhaft zu speichern?

Ich kann Daten mit Hilfe von JavaScript auslesen und ändern. Das ist soweit alles klar. Ich kann sie aber offenbar nicht dauerhaft im Dokument sichern. Ich möchte beispielsweise die Schriftgröße (Css) auslesen, ändern und dauerhaft sichern, sodass die neue Regel auch nach dem erneuten Laden in allen Clients angewendet wird. Serverseitig geht's mit PHP sicher locker von der Hand, aber sollte nach Möglichkeit nur JavaScript zum Einsatz kommen.

Besteht hier eine elegante Möglichkeit?

Vielen Dank im Voraus :)!

...zum Beitrag

Was sind Library Ordner in macOS?

der iMac hat unter Macintosh HD eine Ordner "Library" (~1GB) und dann hat noch jeder seinen eigenen Library-Ordner (~20GB).

Was wird darin gespeichert? (und wer? Programme? System?)
Kann man was kaputt machen, wenn man was raus löscht?
Füllt sich dieser Ordner nach dem Erstellen eines neuen Benutzers langsam selbst wieder?

Meine BackUp-Lösung sieht momentan folgendermaßen aus: Ich gehe in meinen Benutzer-Ordner und kopiere alle darin enthaltenen Ordner wie Dokumente, Musik, Downloads, Schreibtisch usw. auf eine externe Festplatte. Soll ich hierbei den Library-Ordner mitnehmen? (Ich tue es nicht) (Programme sichere ich nicht mit, die würde ich alle neu installieren.)

Falls mein Rechner irgendwann mal kaputt ist/ich ihn neu aufsetzte, erstelle ich mir ganz normal einen neuen Benutzer und ziehe dann alle Daten von BackUpVolume/Benutzer/Benutzer1/Dokumente nach MacintoshHD/Benutzer/BenutzerNEU/Dokumente schließlich ist dieser Ordner, wie auch Musik, Filme etc. bereits angelegt.

Ebenso wäre ein Library-Ordner angelegt; füllt sich dieser selbstständig? Oder hätte ich ihn beim "BackUp"-Erstellen mitnehmen müssen?

...zum Beitrag

json Daten in JavaScript auslesen und an html Elemente weiterleiten?

Hi,

mehr schlecht als recht arbeite ich mich gerade durch json und habe tatsächlich mittlerweile herausfunden, dass man zum Laden einer json-Datei ohne jQuery folgenden Ansatz zu brauchen scheint:

function loadJSON(callback) {var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'data.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
        callback(xobj.responseText);
      }
};
xobj.send(null);  
}

Wie ich damit dann allerdings Objekte und values auslese und weiterleite, ist mir schleierhaft.

Hier ist erst einmal der json Code

{"employees":
    [
        {
            "firstName": "John", 
            "lastName": "Doe"
        },
        {
            "firstName":"Anna", 
            "lastName":"Smith"
        },
        {
            "firstName":"Peter", 
            "lastName":"Jones"
        }
    ]
}

Meine Idee war ja etwas wie document.getElementbyID oder halt byClassName, um den Content im DOM zu verteilen. Aber irgendwas scheint mir zu fehlen.

Pseudocode mäßig wäre halt sowas schön: getElementbyID('title').data(firstName[0]) Irgendwie so halt ...

Was ich bisher gefunden habe, waren nur Kurzeinleitungen, wie ich den Code in der Konsole ausspucke, js Arrays erstelle (warum auch immer die Leute das in einem json Tutorial als Lösung anbieten) oder html Elemente in JavaScript mit dem json Inhalt erstelle. Wie gesagt, würde ich jedoch gerne den json Inhalt an meine bereits existierenden html Elemente weitergeben.

ps. Wenn ihr dazu eine jade-Lösung habt, wäre das natürlich noch um so prickelnder.

...zum Beitrag

Wie kann man mit C# Daten Aus einer HTML-Seite im Netz auslesen und in eine neue Benutzeroberfläche integrieren?

Ich möchte mit C# (UWP) eine neue Benutzeroberfläche für ein HTML-Portal erstellen. Gibt es irgend eine Möglichkeit, dass zu machen?

...zum Beitrag

Uhr als animierte Grafik erstellen?

Angenommen, ich möchte auf einer Webseite die laufende Zeit anzeigen, könnte man das mit einer animierten Grafik erzeugen?

Als erste Übung ein Sekundenzeiger, der vor einerm Zifferblatt 60x neu platziert wird. Und dann von vorne. Gibt es so ein Beispiel, das ich mit Gimp studieren kann?

Habe mich mit animierten Grafiken nur sehr oberflächlich befasst. Das wären wohl 61 Ebenen.

~~~~~~~~~

Nachtrag: Bei youtu.be gab es eine analoge Uhr als Sinnbild eines Kommentators. Da die Uhrzeit ungefähr stimmte, wurde ich aufmerksam. Aber sie bewegte sich nicht.

Deshalb meine Frage nach einer animierten Grafik *.gif oder *.svg.

Auf eigenen Seiten kann ich mit Javascript und / oder iframe arbeiten, auf Fremdseiten nicht.

...zum Beitrag

Variablen auslesen aus dem Internet Arduino Ethernet?

Guten Tag, ich habe eine Webseite erstellt für mein Arduino Ethernet Projekt und jetzt möchte ich, dass die Daten vom Slider, also die Position zum Arduino gesendet wird, aber leider habe ich keine Ahnung wie ich das anstellen soll.

Ich habe HTML und css Erfahrung um die Webseite zu erstellen und JavaScript mit der ist die Daten auslesen kann und in eine Variable verpacken kann, nur das rübersenden zum Arduino/ Auslesen da müsste mir jemand helfen wenn es geht.

Material: -Arduino mega -Ethnernet Modul

Danke im vorraus LG Joé

...zum Beitrag

JS variablen in Html ausgeben, wobei die Javascript Datei eigenständig ist?

Wir bräuchten eine Lösung um unsere durch eine API generierten Daten auf unserer HTML Seite auszugeben.

Wir haben zum Beispiel ein let test = "Irgendwas" in der JS Datei und wir wollen den String in der HTML Datei ausgeben bzw auf der Website anzeigen lasse. Also es wird keine JQuery verwendet und die Daten liegen einfach als String vor.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen