Votingergebnisseite mit 3D-Tortendiagramm 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
* Prozentuale Angabe der abgegebenen Stimmen für die einzelnen Antworten eines Votings

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

Screenshot



{{:de:webedition:code-examples:voting:votingergebnisseite-mit-3d-tortendiagramm-erstellen-1.jpg|}}

Demo



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

Quellcode



<code>
<!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 6 gespeichert wurden -->
<we:votingList name="Overview" groupid="6">
<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: Text -->
<!-- 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
$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
?>

<br /><br />
<!-- Tortendiagramm-Grafik ausgeben -->
<!-- Hinweis: Bei längeren Antworten muss die Breite (Parameter "chs", Breite x Höhe) der Grafik vergrößert werden. -->
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:<?php echo $str_chd; ?>&chs=450x200&chl=<?php echo $str_chl; ?>" alt="" width="450" height="200" />

</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