Archiv der Kategorie: Coding

Excel via WordPress an morris.js

Von hinten durch die Brust ins Auge. Unter WordPress Excel mit zwei Plugins und JavaScript an morris.js als Diagramme.

Vor kurzem gab es eine Anfrage, ob es möglich wäre, zwei Excel-Tabellen in WordPress zu importieren und so aufzubereiten, dass morris.js sie als Diagramme darstellen kann. Ein Unternehmen habe das bisher eingesetzt, wolle auf WordPress umziehen und das auch weiterhin verwenden.

Nun, morris.js ist von 2015 und es gibt kein WordPress-Plugin. Weiterhin benötigt morris.js die Diagrammdaten als JSON-Objekte, die “als solches” jedoch nicht aus Excel exportiert und in WordPress importiert werden können.

Im folgenden wird ein Lösungweg beschrieben, bei dem 1) die Excel-Datei als CSV importiert wird, um 2) als versteckte HTML-Tabelle abgelegt zu werden, damit 3) Javascript sie als JSON auslesen und an morris.js übergeben kann.

1) Excel-Daten als CSV importieren

Dazu wird in WordPress das Plugin TablePress benötigt. Weiterhin müssen die Excel-Dateien im CSV-Format gespeichert sein. Der Import ist mit TablePress einfach.

Im TablePress-Plugin muss pro Tabelle die Option “DataTable nutzen” ausgeschaltet werden, um später die ganze Tabelle zu erhalten.

Ist der Import einmal erfolgt, können die Daten auch in TablePress gepflegt werden. Ein neuer Import wäre ein höherer Aufwand, falls nur wenige Änderungen erfolgen.

2) Versteckte HTML-Tabelle / Diagramm

Auf der Seite, die die gewünschten Diagramme beinhalten soll, werden die folgenden Tags in einem HTML-Block eingetragen. Es gibt eine Aufteilung in 7 (morris-week), 30 (morris-month) und 365 (morris-year) Tage:

<div id="morris-week" class="morris-chart"></div>
<div id="morris-month" class="morris-chart"></div>
<div id="morris-year" class="morris-chart"></div>

Die gewünschten Daten werden als “[table id=xx]” (aus dem Plugin TablePress) zugeordnet, was in einen weiteren HTML-Block geschrieben wird. TablePress gibt hier die HTML-Tabelle aus, die unsichtbar bleiben wird.

3) Als JSON an morris.js übergeben

Im HFCM-Plugin werden zwei Einträge erstellt, einer für den Header:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.4.3/morris.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.4.3/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<style>
/* verstecke Tabelle */
.tablepress {display:none}
</style>

Ein zweiter Eintrag für den Footer:

<script>
[Hier den Quellcode von tablecatcher.min.js per copy&paste eintragen]
</script>

Beide HCFM-Einträge werden mit der Seite connected, die unter Punkt 2) die HTML-Blöcke und Datentabelle erhalten hat.

Wird die Seite nun aufgerufen, passiert folgendes:

  • TablePress liefert die HTML-Tabelle, die aber unsichtbar bleibt.
  • tablecatcher.min.js liest diese Tabelle aus und erzeugt daraus ein JSON-Objekt.
  • Jede Zeile wird analysiert und mit Hilfe von moment.js in weitere JSON-Objekte für Woche/Monat/Jahr gesplittet.
  • Werte wie „Durschschnitt Vorwoche” etc. werden berechnet.
  • Die JSON-Objekte werden an morris.js übergeben und die Diagramme gezeichnet.

Die Kernroutine basiert auf diesem Beispiel: https://jsbin.com/ENiCaHIv/3/edit?html,js,output
Live-Version: https://via-energy.de/preisentwicklung-heizoel/
Auf github findet sich Beispiel-Code

MySQL-Dumps, GPG, SFTP-Download, MySQL-Import

Alles ohne manuelle Passworteingabe, „ready for cronjob“

Wer MySQL nutzt, möchte den Dump vielleicht mit einem Passwort verschlüsseln und zugleich komprimieren.

Weiterhin soll mysqldump in einem cronjob laufen, wobei das Passwort nicht eingeben werden kann.

Desweiteren soll auf einer lokalen Maschine der verschlüsselte Dump heruntergeladen und in MySQL importiert werden können – und das genauso ohne Passworteingabe.

Wie das funktioniert, wird im folgenden beschrieben. Nebenbei gibt es ein paar Hinweise.

MySQL-Dumps, GPG, SFTP-Download, MySQL-Import weiterlesen

Simple 2-Klick-Lösung für Drittanbieter-Content

„Fremder Content“ oder Drittanbieter-Inhalte sind Code-Snippets wie z.B. Facebook-Like oder YouTube-Videos, die in die eigene Site eingebunden werden können, um dann dort gezeigt zu werden.

Eine 2-Klick-Lösung ist dabei ein Mechanismus, der den fremden Inhalt erst nach einem Klick anzeigt, um dann das „Gefällt mir“ zu klicken oder den Video starten zu können.

Simple 2-Klick-Lösung für Drittanbieter-Content weiterlesen

Passwort versteckt oder lesbar eingeben

Es begegnet einem in immer mehr Login-Formularen: Die Möglichkeit, das Passwort auf Klartext (lesbar) umschalten zu können um damit die Eingabe direkt zu kontrollieren. Für die Übertragungssicherheit spielt es keine Rolle – und in den meisten Fällen schaut einem auch niemand über die Schulter.

Die Lösung ist in wenigen Zeilen jQuery umgesetzt.
Passwort versteckt oder lesbar eingeben weiterlesen

Neue CSS- und Javascript-Dateien sofort vom Server

Bei sich stetig entwickelnden Projekten ändern sich ebenso stetig auch die CSS- und Javascript-Dateien. Sie beinhalten neues Layout und Funktionen und sollen möglichst sofort zur Verfügung stehen.

Zugleich sollen diese Dateien aber möglichst lange (i.d.R. werden vier Wochen eingestellt) im Cache des Browsers liegen, um nicht bei jedem Seitenaufruf die teilweise über 100 Kb großen Dateien vom Server zu laden.

Ändern sich CSS- oder Javascript-Dateien, müssen sie jedoch sofort vom Server geladen werden und dürfen nicht mehr aus dem Browser-Cache kommen.

Es gibt drei Wege, das umzusetzen.

Neue CSS- und Javascript-Dateien sofort vom Server weiterlesen