Votingergebnisseite mit Balkendiagramm als Grafik erstellen



Das folgende Beispiel zeigt Ihnen, wie Sie eine Liste aller Votings erstellen. Dabei werden folgende Werte ausgegeben:

* Name des Votings
* Erstellungsdatum
* Liste alle Antworten
* Anzahl der abgegebenen Stimmen für das Voting
* Anzahl der abgegebenen Stimmen für die einzelnen Antworten eines Votings
* Prozentuale Angabe der abgegebenen Stimmen für die einzelnen Antworten eines Votings

Die abgegebenen Stimmen werden für jedes Voting als Balkendiagramm (Grafik) dargestellt. Das Balkendiagramm (Grafik) wird mit Hilfe der [[http://code.google.com/apis/chart/|Google Chart API]] erzeugt.

Screenshot



{{:de:webedition:code-examples:voting:votingergebnisseite-mit-balkendiagramm-als-grafik-erstellen-1.jpg|}}

Demo



* [[http://documentation-we.webedition.de/200807081511511161/index.php|Online-Demo öffnen]]

Quellcode



<code html>
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<we:title></we:title>
<we:description/>
<we:keywords/>
<we:charset defined="UTF-8">UTF-8</we:charset>
<we:ifNotEditmode>
<style type="text/css">
html {
font-family: arial;
font-size: .8em;
color: #000000;
}

a {
color: #000000;
}

/* ---------- VOTING-ERGEBNISLISTE ---------- */

ul.voting-result {
margin: 0;
padding: 0;
}

ul.voting-result li {
margin: 0 0 10px 0;
padding: 10px 10px 0 10px;
list-style: none;
border: 1px solid #CCCCCC;
}

/* ---------- /VOTING-ERGEBNISLISTE ---------- */
</style>
</we:ifNotEditmode>
</head>
<body>

<h1>Votings</h1>

<!-- Liste aller Votings die im Ordner mit der ID 14 gespeichert wurden -->
<we:votingList name="Overview" groupid="14">
<ul class="voting-result">
<!-- Schleife der Votings -->
<we:repeat>
<li>
<strong>
<we:votingField name="question" type="text"/>
</strong>
<br />
<em>
Umfrage vom <we:votingField name="date" type="text" format="d.m.Y"/>
mit <we:votingField name="result" type="total"/> abgegebenen Stimmen
</em>

<!-- Schleife der Antworten eines Votings - hier: Legende der y-Achse -->
<!-- Alles von we:answers bis /we:answers muss in einer Zeile stehen! -->
<?php ob_start(); ?>
<we:answers><we:votingField name="answer" type="text"/>|</we:answers>
<?php
$str_chl = (string) trim(ob_get_contents());
ob_end_clean();
$str_chl = substr($str_chl, 0, -1); // letzte | entfernen
/* ---------- REIHENFOLGE UMKEHREN ---------- */
$arr_chl = (array) explode('|', $str_chl);
$arr_chl = array_reverse($arr_chl);
$str_chl = implode('|', $arr_chl);
/* ---------- /REIHENFOLGE UMKEHREN ---------- */
$str_chl = urlencode($str_chl); // URL-kodieren
?>

<!-- Schleife der Antworten eines Votings - hier: Prozentangabe -->
<!-- Alles von we:answers bis /we:answers muss in einer Zeile stehen! -->
<?php ob_start(); ?>
<we:answers><we:votingField name="result" type="percent"/>,</we:answers>
<?php
$str_chd = (string) trim(ob_get_contents());
ob_end_clean();
$str_chd = substr($str_chd, 0, -1); // letztes Komma entfernen
?>

<!-- Schleife der Antworten eines Votings - hier: Text für Balken -->
<!-- Alles von we:answers bis /we:answers muss in einer Zeile stehen! -->
<?php
$i_counter = (int) 0;
ob_start();
?>
<we:answers>t++<we:votingField name="result" type="count"/>+Stimmen+=+<we:votingField name="result" type="percent"/><?php echo urlencode('%'); ?>,000000,0,<?php echo $i_counter++; ?>,10|</we:answers>
<?php
$str_chm = (string) trim(ob_get_contents());
ob_end_clean();
$str_chm = substr($str_chm, 0, -1); // letzte | entfernen
?>

<?php
// Höhe der Grafik errechnen
$i_height = 40 * $i_counter;
?>

<br />
<!-- Balkendiagramm-Grafik ausgeben -->
<!-- Hinweis: Bei längeren Antworten sollte die Breite (Parameter "chs", Breite x Höhe) der Grafik vergrößert werden. -->
<?php
echo '<img src="http://chart.apis.google.com/chart?cht=bhs&chs=400x', $i_height, '&chd=t:', $str_chd, '&chxt=x,y&chxl=0:|0%|25%|50%|75%|100%|1:|', $str_chl, '&chm=', $str_chm, '" alt="" width="400" height="', $i_height, '" />';
?>

</li>
</we:repeat>
</ul>
</we:votingList>

</body>
</html>
</code>

Weiterführende Informationen



* [[http://code.google.com/apis/chart/|Google Chart API]]
powered by webEdition CMS