Kategorien
Webdesign

MYSQL und PHP: Diagramme im Eigenbau

Statistiken grafisch darzustellen, das ist immer eine feine Sache. Diagramme sind anschaulicher und sparen Platz. Egal, ob es um Besucherzahlen, Hits, Views, oder Umfrageergebnisse geht, die Einsatzmöglichkeiten sind vielfältig. Im vorliegenden Fall sind die…

von Berthold Krayer

Statistiken grafisch darzustellen, das ist immer eine feine Sache. Diagramme sind anschaulicher und sparen Platz. Egal, ob es um Besucherzahlen, Hits, Views, oder Umfrageergebnisse geht, die Einsatzmöglichkeiten sind vielfältig.

Im vorliegenden Fall sind die Daten Besucherzahlen eines eigenen Counters und in einer Datenbank abgespeichert. Das entsprechende Datum liegt im Timestamp-Format vor. Im Quellcode sind weitere Schleifen möglich, aus Gründen der Verständlichkeit werden sie in den Beispielen weggelassen.

Screenshot

 <? 
      $zeit = time();
    $monat = date("m",$zeit);
    $tag = date("d",$zeit);
    $jahr = date("Y",$zeit);
      /* tag7 ist der heutige Tag */
    $tag7 = mktime(0,0,0,$monat,$tag,$jahr);
    $tag6 = $tag7-86400;
    $tag5 = $tag6-86400; 
    $tag4 = $tag5-86400; 
    $tag3 = $tag4-86400; 
    $tag2 = $tag3-86400; 
    $tag1 = $tag2-86400; 
      $wochentage = array("So","Mo","Di","Mi",
    "Do","Fr","Sa");

    ?>

Wir haben nun die Zeitstempel der letzten 7 Tage und ein Array mit den Abkürzungen für Wochentage in deutscher Sprache. Den Variablen $tag1 bis $tag7 ist der richtige Wochentag aus dem Array $wochentage noch nicht zugeordnet. Genau dort, wo die Beschriftung des Wochentages im Diagramm auftauchen soll, wird folgender Code notiert:

      <?php echo $wochentage[date("w",$tag1)]; ?>

Die Tabelle ‚besucher‘ der Datenbank wird nach den Besucherzahlen(‚zaehler‘) der letzten sieben Tage (ORDER by datum desc) abgefragt, und in ein Array ($ergeb) gespeichert. Die require-Anweisung lädt die Datei datenbankanbindung.php, in welcher das Passwort, der Benutzername und der Pfad zur Mysql-Datenbank abgespeichert sind.

      <?
       require ("datenbankanbindung.php");
    $abfrage = "SELECT zaehler FROM besucher ORDER by datum desc LIMIT 0,7";

    $ergebnis = mysql_query($abfrage);
    $x = mysql_num_rows($ergebnis); 
    for ($i = 0 ; $i < $x ; $i++) 
    { 
    $ergeb[$i] = mysql_fetch_array($ergebnis); 
    } 
    mysql_free_result($ergebnis);
    mysql_close();
       ?>

1) Balkendiagramm, mit waagerechten Balken

Screenshot

Die Weite der Balken ergibt sich aus dem Zählerstand.
Bei Besucherzahlen von 30 bis 50 am Tag wird die tatsächliche Zahl mit dem Faktor 4 multipliziert – wie im Beispiel. Bei sehr vielen Besuchern pro Tag, muss mit einem Faktor dividiert werden, um die Balkenlänge in einem gewissen Rahmen zu halten.

      <?
    $x_tag7 = $ergeb[0]['zaehler']*4;
    $x_tag6 = $ergeb[1]['zaehler']*4;
    $x_tag5 = $ergeb[2]['zaehler']*4;
    $x_tag4 = $ergeb[3]['zaehler']*4;
    $x_tag3 = $ergeb[4]['zaehler']*4;
    $x_tag2 = $ergeb[5]['zaehler']*4;
    $x_tag1 = $ergeb[6]['zaehler']*4;
    ?>

Die Variablen $x_tag1 bis $x_tag7 werden wie folgt in die Style-Anweisungen des HTML-Code eingetragen:

      <div style="position:absolute;left:80px;top:20px;width:<?php
    echo $x_tag1; ?>px;height:10px;background-color:red;"></div>

    <div style="position:absolute;left:80px;top:40px;width:<?php echo
    $x_tag2; ?>px;height:10px;background-color:red;"></div> 
    <div style="position:absolute;left:80px;top:60px;width:<?php echo
    $x_tag3; ?>px;height:10px;background-color:red;"></div> 
    <div style="position:absolute;left:80px;top:80px;width:<?php echo
    $x_tag4; ?>px;height:10px;background-color:red;"></div> 
    <div style="position:absolute;left:80px;top:100px;width:<?php echo
    $x_tag5; ?>px;height:10px;background-color:red;"></div> 
    <div style="position:absolute;left:80px;top:120px;width:<?php echo
    $x_tag6; ?>px;height:10px;background-color:red;"></div> 
    <div style="position:absolute;left:80px;top:140px;width:<?php echo
    $x_tag7; ?>px;height:10px;background-color:red;"></div> 

Zur Beschriftung des Diagramms mit den Wochentagen wird der bereits angesprochene PHP-Schnipsel eingefügt:

       <div style="position:absolute;left:20px;top:20px;"><?php
    echo $wochentage[date("w",$tag1)]; ?></div> 
    <div style="position:absolute;left:20px;top:40px;"><?php
    echo $wochentage[date("w",$tag2)]; ?></div> 
    <div style="position:absolute;left:20px;top:60px;"><?php
    echo $wochentage[date("w",$tag3)]; ?></div>
    <div style="position:absolute;left:20px;top:80px;"><?php
    echo $wochentage[date("w",$tag4)]; ?></div>
    <div style="position:absolute;left:20px;top:100px;"><?php
    echo $wochentage[date("w",$tag5)]; ?></div>
    <div style="position:absolute;left:20px;top:120px;"><?php
    echo $wochentage[date("w",$tag6)]; ?></div>
    <div style="position:absolute;left:20px;top:140px;"><?php
    echo $wochentage[date("w",$tag7)]; ?></div>

Nun fehlen noch die Besucherzahlen am rechten Ende des Diagramms, hier kommt das Array $ergeb zum Zuge:

       <div style="position:absolute;left:280px;top:20px;"><?php
    echo $ergeb[6]['zaehler'] ?></div> 
    <div style="position:absolute;left:280px;top:40px;"><?php
    echo $ergeb[5]['zaehler'] ?></div> 
    <div style="position:absolute;left:280px;top:60px;"><?php
    echo $ergeb[4]['zaehler'] ?></div>
    <div style="position:absolute;left:280px;top:80px;"><?php
    echo $ergeb[3]['zaehler'] ?></div>
    <div style="position:absolute;left:280px;top:100px;"><?php
    echo $ergeb[2]['zaehler'] ?></div>
    <div style="position:absolute;left:280px;top:120px;"><?php
    echo $ergeb[1]['zaehler'] ?></div>
    <div style="position:absolute;left:280px;top:140px;"><?php
    echo $ergeb[0]['zaehler'] ?></div> 

2) Diagramm mit senkrechten Balken

Screenshot

X-Achse

       <span style="position:absolute;left:41px;top:180px;
    z-index:1;width:340px;"><sup><hr size=1></sup></span>

Der Bezugswert ist hier 180 Pixel als maximaler Abstand vom oberen Bildschirmrand = Lage der X-Achse. Die Teilabstände auf der Y-Achse betragen 4 Pixel. Damit lässt sich diese Formel aufstellen:

      $y_tag7 = 180-( $ergeb[0]['zaehler']*4);
      <?
    $y_tag7 = 180-( $ergeb[0]['zaehler']*4);
    $y_tag6 = 180-( $ergeb[1]['zaehler']*4);
    $y_tag5 = 180-( $ergeb[2]['zaehler']*4);
    $y_tag4 = 180-( $ergeb[3]['zaehler']*4);
    $y_tag3 = 180-( $ergeb[4]['zaehler']*4);
    $y_tag2 = 180-( $ergeb[5]['zaehler']*4);
    $y_tag1 = 180-( $ergeb[6]['zaehler']*4);
    ?>

Die Variablen $y_tag1 bis $y_tag7 werden an 2 Stellen in die style-Anweisungen eingefügt. Als Abstand zum oberen Bildschirmrand (top) und zur Berechnung der Höhe (height) der einzelnen Balken:

       <div style="position:absolute;left:79px;top:<?php echo
    $y_tag1; ?>px;width:5px;height:<?php echo 192-$y_tag1; ?>px;z-index:0;background-color:red;"></div>

    <div style="position:absolute;left:119px;top:<?php echo $y_tag2;
    ?>px;width:5px;height:<?php echo 192-$y_tag2; ?>px;z-index:0;background-color:red;"></div>

    <div style="position:absolute;left:159px;top:<?php echo $y_tag3;
    ?>px;width:5px;height:<?php echo 192-$y_tag3; ?>px;z-index:0;background-color:red;"></div>

    <div style="position:absolute;left:199px;top:<?php echo $y_tag4;
    ?>px;width:5px;height:<?php echo 192-$y_tag4; ?>px;z-index:0;background-color:red;"></div>

    <div style="position:absolute;left:239px;top:<?php echo $y_tag5;
    ?>px;width:5px;height:<?php echo 192-$y_tag5; ?>px;z-index:0;background-color:red;"></div>

    <div style="position:absolute;left:279px;top:<?php echo $y_tag6;
    ?>px;width:5px;height:<?php echo 192-$y_tag6; ?>px;z-index:0;background-color:red;"></div>

    <div style="position:absolute;left:319px;top:<?php echo $y_tag7;
    ?>px;width:5px;height:<?php echo 192-$y_tag7; ?>px;z-index:1;background-color:red;"></div>
    

Position + Beschriftung mit Wochentagen

      <span style="position:absolute;left:77px;top:200px;font-size:10px;">
    <?php echo $wochentage[date("w",$tag1)]; ?></span>
    <span style="position:absolute;left:117px;top:200px;font-size:10px;">
    <?php echo $wochentage[date("w",$tag2)]; ?></span>
    <span style="position:absolute;left:157px;top:200px;font-size:10px;">
    <?php echo $wochentage[date("w",$tag3)]; ?></span>
    <span style="position:absolute;left:197px;top:200px;font-size:10px;">
    <?php echo $wochentage[date("w",$tag4)]; ?></span>
    <span style="position:absolute;left:237px;top:200px;font-size:10px;">
    <?php echo $wochentage[date("w",$tag5)]; ?></span>
    <span style="position:absolute;left:277px;top:200px;font-size:10px;">
    <?php echo $wochentage[date("w",$tag6)]; ?></span>
    <span style="position:absolute;left:319px;top:200px;font-size:10px;">
    <?php echo $wochentage[date("w",$tag7)]; ?></span>

Optional kann auch hier noch eine Y-Achse eingezeichnet werden. Wer es lieber mag, kann auch das Bild eines Koordinatensystems in den Hintergrund legen.

Y-Achse

      <span style="position:absolute;left:40px;top:12px;z-index:1;border-right:1px
    solid black;height:180px;"></span> 

Teilstriche Y-Achse

       <span style="position:absolute;left:40px;top:20px;
    z-index:1;font-size:15px;">-</span>
    <span style="position:absolute;left:40px;top:60px;
    z-index:1;font-size:15px;">-</span>
    <span style="position:absolute;left:40px;top:100px;
    z-index:1;font-size:15px;">-</span>
    <span style="position:absolute;left:40px;top:140px;
    z-index:1;font-size:15px;">-</span>

Beschriftung Y-Achse

       <span style="position:absolute;left:20px;top:25px;
    z-index:1;font-size:10px;">40</span>
    <span style="position:absolute;left:20px;top:65px;
    z-index:1;font-size:10px;">30</span>
    <span style="position:absolute;left:20px;top:105px;
    z-index:1;font-size:10px;">20</span>
    <span style="position:absolute;left:20px;top:145px;
    z-index:1;font-size:10px;">10</span>

3) Punktdiagramm

Screenshot

Hier kommen wieder die Variablen $y_tag1 bis $y_tag7 an die Reihe, um die Position der Punkte im Diagramm festzulegen:

      <div style="position:absolute;left:79px;top:
    <?php echo $y_tag1; ?>px;font-size:25px;color:red;">&middot;</div>

    <div style="position:absolute;left:119px;top:
    <?php echo $y_tag2; ?>px;font-size:25px;color:red;">&middot;</div>

    <div style="position:absolute;left:159px;top:
    <?php echo $y_tag3; ?>px;font-size:25px;color:red;">&middot;</div>

    <div style="position:absolute;left:199px;top:
    <?php echo $y_tag4; ?>px;font-size:25px;color:red;">&middot;</div>

    <div style="position:absolute;left:239px;top:
    <?php echo $y_tag5; ?>px;font-size:25px;color:red;">&middot;</div>

    <div style="position:absolute;left:279px;top:
    <?php echo $y_tag6; ?>px;font-size:25px;color:red;">&middot;</div>

    <div style="position:absolute;left:319px;top:
    <?php echo $y_tag7; ?>px;font-size:25px;color:red;">&middot;</div>

Der Quellcode für die X-Achse, die Y-Achse und die Beschriftung mit den Wochentagen kann aus dem Beispiel zum Balkendiagramm mit senkrechten Balken abgelesen werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.