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