Piwik-Statistik mit statischen Grafiken in der Webseite einbinden
Ich wollte meine Statistik-Anzeige auf meiner Startseite etwas anders haben und die Grafiken von PIWIK [01] einbinden. Es gibt verschiedene APIs [02] zum Holen von Daten - als XML, JSON oder Grafik [03]. Aber die Grafiken sollten nicht mitsamt der URL der PIWIK-Api eingebunden sein - ich wollte die Grafiken holen, cachen und die gecachten Bilder einbinden.
Das Ergebnis auf der Webseite sieht dann so aus:
Konfiguration
Zunächst einmal die Basis-Daten als Konfiguration: Für die eigene Verwendung sind die Parameter anzupassen. Die Variablennamen sollten einleuchtend sein:
// anpassen $sPiwikToken = "419f6099c81111fdb6ae65..."; $iPiwikSiteId = 7; // Bildgroesse und Farbe $iImageWidth = 500; $iImageHeight = 200; $sBarColor = "887799"; // Domain und Pfad zu Piwik anpassen $sBaseUrl = "http://[www.deine-domain.de/piwik]/index.php?module=API&method=ImageGraph.get" . "&idSite=$iPiwikSiteId&apiModule=[MODULE]&apiAction=[ACTION]" . "&period=range&date=last[DAYS]" . "&token_auth=$sPiwikToken" . "&width=$iImageWidth&height=$iImageHeight&colors=$sBarColor";
Man sieht in der $sBaseUrl einige Platzhalter für Modul, Action und Anzahl Tage.
Ich definiere ein weiteres Array, was für je eine Statistik-Grafik die Platzhalter besitzt als auch Beschreibungstexte.
$aImages = array(
array('module' => 'UserCountry',
'action' => 'getCountry',
'label' => 'Herkunft der Besucher',
'descr' => 'Übersicht der Herkunftsländer der Besucher meiner Webseite. Bots von Suchmaschinen '
. 'sind in dieser Liste ausgeschlossen.'
),
array('module' => 'UserSettings', 'action' => 'getBrowser', 'label' => 'Webbrowser meiner Besucher',
'descr' => 'Welche Webbrowser werden verwendet? Die Anzeige fasst alle Versionsnummern zusammen.'
),
);
Wenn man weitere Grafiken holen möchte, muss man die Report-API konsultieren, welche Dinge man so alles per GET Parameter apiModule und apiAction einholen kann.
Nicht verschweigen will ich, dass es neben den horizontalen Baklen auch vertikale Balken oder Torten-Grafiken gibt. Die $sBaseUrl als auch das $aImages müsste um das Handling des Parameters graphType erweitert werden.
Auch die Anzahl Tage kann durch Zeiträume ersetzen.
Aber ich wollte das Beispiel nicht zuuu kompliziert werden lassen.
Also zurück zu meinen Code-Schnipseln…
Über dieses Array kann ich nun also loopen und die API-URL zusammenbauen.
Holen der Daten und Ausgabe
Nach dem Holen der Grafik kommt diese einmal in den Cache [04] und es wird der HTML-Code zusammengesetzt, um die Grafik einzubinden.
Als Grafiksource verwende ich die Daten selbst (data:image). Um es direkt im HTML Code einbinden zu können, werden die Bilddaten mit der PHP-Funktion base64_encode() umgewandelt [05].
$sHtml='';
$iDays=7;
$iTtl = 60 * 60 * 4; // cache ueberdauert 4 Stunden
// loop ueber alle $aImages-Elemente
foreach ($aImages as $aImage) {
$myCache = new AhCache("stats", "img-" . $aImage['action'].$iDays);
if ($myCache->isExpired()) {
// API-URL zusammenbauen
$sUrl = $sBaseUrl;
$sUrl = str_replace("[DAYS]", $iDays, $sUrl);
$sUrl = str_replace("[MODULE]", $aImage['module'], $sUrl);
$sUrl = str_replace("[ACTION]", $aImage['action'], $sUrl);
// Grafik holen und cachen
$sImagedata = file_get_contents($sUrl);
$myCache->write($sImagedata, $iTtl);
} else {
// Cach ist neu genug
$sImagedata = $myCache->read();
}
// Ausgabe zusammenbauen
$sHtml.='<h4>' . $aImage['label'] . '</h4>'
. $aImage['descr'] . '<br><br>'
. '<img src="data:image/' . $filetype . ';base64,' . base64_encode($sImagedata) . '" '
. 'class="lightboxed-image" '
. 'title="' . $aImage['descr'] . '" '
. '><br><br>';
}
// Ausgabe
echo $sHtml;
Obiger Coderumpf ist noch ein klein wenig um den Loop über mehrere Tage erweitert worden …
Weiterführende Links: