PHP Tutorials, PHP lernen, PHP Forum, PHP Community and more ... MyWebsolution.de!

Sidebar

Home News Tutorials Workshops Tipps Artikel Gästebuch Sitemap Pascal Landau

Suche

Members

Forum Login Registrierung

Statistik

Statistikbereich
Jetzt1
Heute354
Gestern331
Gesamt2311170

Besucherstatistik - Graphische Auswertung ohne Graphikfunktionen

Autor Flitze
Klicks 78536
Rating für Besucherstatistik
  8 von 10
Bewertungen47
Stand 24.06.2010
Keywords:
Besucherstatistik Tutorial, Besucher zählen, Benutzerstatistik, Counter, User auf der Homepage zählen, Daten, Auswertung, keine Graphikfunktionen

Amazon: PHP 5.3 und MySQL 5.1
Breadcrumb:
Tutorials » Besucherstatistik » Besucherstatistik - Graphische Auswertung ohne Graphikfunktionen
Seite : 1 2 3 4 5 Bewerten
Article Wizard - deutscher Article Spinner

Graphische Auswertung ohne Graphikfunktionen

[ADSENSE_LINE]
Ich betone das ohne deshalb, weil mich bereits mehrfach Leute angeschrieben haben und wissen wollten, wie ich meine Statistik erstelle, weil sie deren Funktionalität für ausreichend halten und sich nich in eine neue Thematik (-> Graphikfunktionen) einarbeiten wollen. Mein Diagramm basiert allein auf HTML-Elementen und ist somit auf keine Zusatzmodule angewiesen.

Beispiel:
Balkendiagramm Beispiel
(Zum Vergrößern bitte auf das Bild klicken)

Grundsätzlicher Aufbau:
Balkendiagramm in HTML-Code
(Zum Vergrößern bitte auf das Bild klicken)

Der Rahmen bzw. die einzelnen Stellen sind also die Zellen einer Tabelle, während die einzelnen Balken jeweils durch ein DIV-Element mit einer bestimmten Höhe und Breite dargestellt werden. Höhe und Breite ergeben sich aus den auszuwertenden Daten. Konkret sind das die folgenden:

Name
-> Name des Diagramms (z.B. Januar 2008)
-> wird von uns festgelegt
-> Datentyp STRING

Hoehe
-> Gesamthöhe des Diagramms (also der Tabelle) in Pixel
-> wird von uns festgelegt
-> Datentyp INT

Breite
-> Gesamtbreite des Diagramms (also der Tabelle) in Pixel
-> wird von uns festgelegt
-> Datentyp INT

maximale Höhe des höchsten Balkens
-> Höhe eines DIV-Elements das als 'Balken' fungiert in Pixel
-> wird von uns festgelegt
-> Datentyp INT

Anzahl der Stellen des Diagramms
-> ergibt sich aus der Anzahl der betrachteten Datensätze (im Januar z.B. 31)
-> Stelle = X-Wert in einem Koordinatensystem
-> Datentyp Array

Anzahl der Werte des Diagramms
-> ergibt sich aus der Anzahl der betrachteten Datensätze (im Januar z.B. 31)
-> Wert = Y-Wert in einem Koordinatensystem
-> in unserem Fall die Anzahl der Besucher des betreffenden Tages/Monats/Jahres
-> Datentyp Array

In Quellcode umgesetzt sieht das so aus:

PHP:
<?php
    $diagramme 
= array():
    
$diagramme['Tag'] = array();
    
$diagramme['Tag']['Name'] = "";
    
$diagramme['Tag']['Hoehe'] = 300;
    
$diagramme['Tag']['Breite'] = 580;
    
$diagramme['Tag']['Balken'] = 190;
    
$diagramme['Tag']['Stellen'] = array();
    
$diagramme['Tag']['Werte'] = array();
?>


Ich erstelle ein Array $diagramme, weil ich am Ende des Tutorials drei verschiedene Diagramme anzeige (alle Tage des gewählten Monats, alle Monate des gewählten Jahres, alle Jahre seit Beginn der Datenspeicherung), die aber alle den gleichen Aufbau haben. Also lasse ich $diagramme später in einer foreach-Schleife durchlaufen und muss den Code nur einmal notieren.

Damit der User veschiedene Diagramme auswählen kann, muss ich eine Eingabemaske - sprich ein Formular - erstellen. Dazu kann ich das im vorigen Kapitel beschriebene Formualr samt Fehlerprüfung verwenden. Die Variablen $tag, $monat und $jahr stehen mir also zur Verfügung. Wie man oben sieht, habe ich für $diagramme['Tag']['Name'], $diagramme['Tag']['Stellen'] und $diagramme['Tag']['Werte'] noch keine Werte eingetragen. Das hole ich nun nach:

PHP:
<?php
    
// Name z.B. Januar 2008
    
$diagramme['Tag']['Name'] = $Monatsnamen[$monat]." ".$jahr;
    
// $stellen bezeichnet die X-Werte des Diagramms
    // als Standard wird 31 festgelegt
    
$stellen 31;
    
// Wurde als Monat April (4), Juni (6), 
    // September (9) oder November (11)gewählt,
    // wird die Anzahl der Stellen auf 30 begrenzt
    
if(in_array($monat, array(4,6,9,11)))
        
$stellen 30;
    
// Wurde der Februar (2) gewählt, wird geprüft,
    // ob es sich beim gewählten Jahr um ein Schaltjahr handelt 
    
elseif($monat == 2){
        if(
$jahr%4==0)
            
$stellen 29;
        else
            
$stellen 28;
    }
    
// Für jeden Tag wird der entsprechende Counter ausgelesen
    
for($i=1$i<=$stellen$i++){
        
$sql "SELECT
                     Anzahl
                FROM
                     Counter
                WHERE
                     YEAR(Datum) = '"
.$jahr."' AND
                     MONTH(Datum) = '"
.$monat."' AND
                     DAYOFMONTH(Datum) = '"
.$i."'
               "
;
        
$result mysql_query($sql);
        
$row mysql_fetch_assoc($result);
        
// Sollte kein Counter für einen Tag gefunden werden,
        // ist $row['Anzahl'] NULL und wird durch den Cast-Operator
        // (int) zu 0, so dass nur INT's vorliegen.
        
$diagramme['Tag']['Werte'][] = (int)$row['Anzahl'];
        
$diagramme['Tag']['Stellen'][] = $i;
    }
?>


Die Kommentare sind m.E. als Erklärung eigentlich recht eindeutig. Erst wird geprüft, wie viele Datensätze (abhängig vom gewählten Datum) ausgelesen werden müssen. Danach werden die entsprechenden Counter des gewählten Monats aus der Datenbank geholt, deren Anzahl dann einem Wert im Diagramm entspricht. Die Beschriftung zu diesem Wert, also die Stelle, ist einfach der Tag des Monats numerisch ausgedrückt.

Nachdem nun alle Daten vorhanden sind, können wir zur Ausgabe schreiten, die da wie folgt aussieht:

PHP:
<?php
    
// Jedes Diagramm (Tag/Monat/Jahr) erzeugen
    
foreach($diagramme as $diagramm => $daten){

        
// Maximalwert aus den Daten ermitteln, der Maximalwert
        // bekommt später die zuvor angegebene maximale Balkenhöhe in px
        
$maximalwert max($daten['Werte'])!=0?max($daten['Werte']):1;

        
// Verhältnis aller Daten zum Maximalwert berechnen
        // Jeder Wert erhält dann als Höhe einen Bruchteil der 
        // maximalen Balkenhöhe
        
$verhaeltnis = array();
        foreach(
$daten['Werte'] as $key => $wert)
            
$verhaeltnis[$key] = $wert/$maximalwert;
        
        
// Tabelle erzeugen
        
echo "<table cellpadding=\"1\" style=\"width:".$daten['Breite']."px; height:".$daten['Hoehe']."px; text-align:center; background-color:#aaa; border:solid 1px black; font-size:10px; margin:10px auto\">\n";
        
// Diagrammname ausgeben
        
echo " <tr>\n".
             
"  <td colspan=\"".count($daten['Werte'])."\" style=\"height:20px;\">\n".
             
$daten['Name']."\n".
             
"  </td>\n".
             
" </tr>\n";

        echo 
" <tr>\n";
        
// Werte - also Balken - ausgeben
        
foreach($verhaeltnis as $key => $wert){
             
// Breite einer Zelle berechnen,
             // Ein Balken ist halb so breit wie eine Zelle,
             // deshalb das '/2'
             
echo "  <td style=\"vertical-align:bottom; height:200px; width:".floor($daten['Breite']/count($daten['Werte']))."px;\">";
                  
"   <div style=\"margin:auto; background-color:red; height:".floor($balken*$wert)."px; width:".floor(($daten['Breite']/2)/count($daten['Werte']))."px\" title=\"".$daten['Werte'][$key]."\">";
                  
"&nbsp;";
                  
"   </div>";
                  
"  </td>\n";
        }
        echo 
" </tr>\n";

        echo 
" <tr>\n";
        
// Stellen - also Balkenzuordnung - ausgeben
        
foreach($daten['Stelle'] as $stelle){
             echo 
"  <td style=\"vertical-align:middle; border:solid 1px black; border-width:1px 1px 0px 1px; height:80px;\">";
             echo 
$stelle;
             echo 
"  </td>\n";
        }

        echo 
" </tr>\n";
        echo 
"</table>\n";
    }
?>


Zuerst wird die oben angesprochene foreach-Schleife durchlaufen. In dieser wird mit der Funktion max() zuerst der größte Wert der Datensätze ermittelt. Danach wird das Verhältnis aller Werte zu diesem Wert berechnet. Dazu ist die folgende Schleife zuständig:

PHP:
<?php
        
// Verhältnis aller Daten zum Maximalwert berechnen
        // Jeder Wert erhält dann als Höhe einen Bruchteil der 
        // maximalen Balkenhöhe
        
$verhaeltnis = array();
        foreach(
$daten['Werte'] as $key => $wert)
            
$verhaeltnis[$key] = $wert/$maximalwert;
?>


Danach wird der Diagrammname ausgegeben. Das colspan sorgt dafür, dass der Name schön mittig zentriert ist und alle Zellen, die nachfolgend die Balken enthalten, gleich groß sind.

Im Anschluss daran werden die Balken selbst erzeugt. Dabei ist folgendes zu beachten:

Jeder Balken befindet sich in einer Tabellenzelle. Die Breite der Zelle ergibt sich aus der Gesamtbreite $diagramme['Tag']['Breite'] der Tabelle und der Anzahl der Datensätze, die ich mit count() ermittele. Ein Balken hat wiederum die halbe Breite einer Zelle. Die Balkenbreite ist dabei von mir so festgelegt, theoretisch könnte ein Balken auch die ganze Zelle oder nur ein Drittel der Zelle ausfüllen. Die Höhe eines Balkens ergibt sich aus der Höhe des höchsten Balkens und des Verhältnisses zum Maximalwert. Da der Maximalwert selbst einen Anteil von 100% hat, ist er logischer Weise genau so groß wie von uns zuvor definiert (im obigen Beispiel 190px [190*100%]). Die restlichen Balken sind gemäß ihrer Werte verkleinert (z.B [190*87%], [190*59%], etc...). Um sicherzustellen, dass auch ein Balken angezeigt wird, enthält jeder Balken ein geschütztes Leerzeichen &nbsp;. Der entsprechende Quellcode für diesen Bereich ist:

PHP:
<?php
        
echo " <tr>\n";
        
// Werte - also Balken - ausgeben
        
foreach($verhaeltnis as $key => $wert){
             
// Breite einer Zelle berechnen,
             // Ein Balken ist halb so breit wie eine Zelle,
             // deshalb das '/2'
             
echo "  <td style=\"vertical-align:bottom; height:200px; width:".floor($daten['Breite']/count($daten['Werte']))."px;\">";
                  
"   <div style=\"margin:auto; background-color:red; height:".floor($balken*$wert)."px; width:".floor(($daten['Breite']/2)/count($daten['Werte']))."px\" title=\"".$daten['Werte'][$key]."\">";
                  
"&nbsp;";
                  
"   </div>";
                  
"  </td>\n";
        }
        echo 
" </tr>\n";
?>


Zur Ausgabe der Stellen muss ich glaub ich nix großartig sagen... Es wird eine neue Zeile erzeugt und die jeweilige Stelle wird ausgegeben. Dieses Diagramm lässt sich auch mit einer Klasse erzeugen. Wer sich für OOP interessiert kann sich meine Diagrammklasse mal zu Gemüte führen

Die Ausgabe bleibt auch bei den Diagrammen für Monate und Jahre die gleiche. Allein die 'Konfiguration', also der Name und das Auslesen der Werte ändert sich. Gesamtbreite und -höhe sowie Balkenhöhe behalte ich bei.

Konfiguration des Monatsdiagramms



PHP:
<?php
    $diagramme 
= array():
    
$diagramme['Monat'] = array();
    
$diagramme['Monat']['Name'] = "";
    
$diagramme['Monat']['Hoehe'] = 300;
    
$diagramme['Monat']['Breite'] = 580;
    
$diagramme['Monat']['Balken'] = 190;
    
$diagramme['Monat']['Stellen'] = array();
    
$diagramme['Monat']['Werte'] = array();

    
$diagramme['Monat']['Name'] = $jahr;
    for(
$i=1$i<=12$i++){
        
$sql "SELECT
                    SUM(Anzahl)
                FROM
                    Counter
                WHERE
                    YEAR(Datum) = '"
.$jahr."' AND
                    MONTH(Datum) = '"
.$i."'
               "
;
        
$result mysql_query($sql);
        
$diagramme['Monat']['Werte'][] = (int)mysql_result($result0);
        
$diagramme['Monat']['Stellen'][] = "<img src=\"bilder/monatsnamen/".$i.".jpg\" alt=\"".$Monatsnamen[$i]."\">\n";
    }
?>


Achtung, als Beschriftung der X-Achse habe ich Bilder der Monatsnamen erzeugt, die die Monatsnamen von unten nach oben statt von rechts nach links schreiben. Dadurch zieht sich das Diagramm nicht unnötig in die Breite und alle Zellen sind weiterhin gleich groß. Wer jetzt nicht genau weiß, was ich meine, der möge sich in meiner Statistik das Monatsdiagramm ansehen ;) Als Dateinamen vergebe ich übrigens 1 für Januar, 2 für Februar, 3 für März, etc.. Das mache ich eigentlich nur wegen dem März, weil ich in Dateinamen keine deutschen Umlaute benutzen möchte.

Konfiguration des Jahresdiagramms



PHP:
<?php
    $diagramme 
= array():
    
$diagramme['Jahr'] = array();
    
$diagramme['Jahr']['Name'] = "";
    
$diagramme['Jahr']['Hoehe'] = 300;
    
$diagramme['Jahr']['Breite'] = 580;
    
$diagramme['Jahr']['Balken'] = 190;
    
$diagramme['Jahr']['Stellen'] = array();
    
$diagramme['Jahr']['Werte'] = array();

    
$diagramme['Jahr']['Name'] = "";
    for(
$i=2006$i<=2008$i++){
        
$sql "SELECT
                     SUM(Anzahl)
                FROM
                     Counter
                WHERE
                     YEAR(Datum) = '"
.$i."'
               "
;
        
$result mysql_query($sql);
        
$diagramme['Jahr']['Werte'][] = (int)mysql_result($result0);
        
$diagramme['Jahr']['Stellen'][] = $i;
    }
?>


Nix neues dabei... Damit sind wir auch schon fertig mit unseren Diagrammen. Viel Spaß damit :D

Zurück zur vorigen Seite:
Besucherstatistik - Ausgabe der Daten in tabellarischer Form
Bewerten

»» Zurück zum Menu

Suchmaschinenoptimierung

Suchmaschinenoptimierung (SEO - Search Engine Optimization)

Ranking

Tutorials (13)

8.6
8.4
8

Workshops (3)

8.8
8.7
7.6

Tipps (12)

7.2
6.7
6.5

Artikel (32)

8.4
8
7.2

RSS Feeds

Full Feed Tutorials Workshops Tipps Artikel

Twitter

Follow me on Twitter

Partner & Links


Valid HTML 4.01 Transitional
Valid CSS
nach oben

Diese Seiten unterstützen MyWebsolution:
 
© MyWebsolution.de
2006-2024