3D-Tortendiagramm mit Werten aus webEdition-Seite erstellen



Das folgende Beispiel zeigt Ihnen, wie Sie ein 3D-Tortendiagramm mit Werten aus einer webEdition-Seite erstellen.

Sie geben dabei dem Radakteur die Möglichkeit zur Eingabe beliebig vieler Werte für die Tortenstücke und den dazugehörigen Prozentangaben. Die Farbe der Tortenstücke kann der Redakteur auswählen. Dabei wird die vom Redakteur ausgewählte Farbe als Farbe für das größte Tortenstück verwendet. Je kleiner die Tortenstücke werden, desto heller werden sie. Zu jedem Tortenstück wird eine Beschriftung (Legende) angezeigt.

Das 3D-Tortendiagramm (Grafik) wird mit Hilfe der [[http://code.google.com/apis/chart/|Google Chart API]] erzeugt.

Screenshot - Ausgabe



{{:de:webedition:code-examples:chart-with-values-from-a-webedition-page:3d-tortendiagramm-mit-werten-aus-webedition-seite-erstellen-ausgabe.jpg|}}

Demo



* [[http://documentation-we.webedition.de/200807221606209772/index.html|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:ifEditmode>
<!--
Dieses CSS-Definitionen dienen dazu, Formatierung innerhalb
der Ansicht "Bearbeiten" für den Redakteur durchzuführen.
-->
<style type="text/css">
.editmode {
color: #FF0000;
font-family: arial;
font-size: 12px;
}

div.editmode-list {
margin: 5px 0 5px 0;
}

div.editmode-list > table {
float: left;
margin-right: 10px;
}
</style>
</we:ifEditmode>
<we:ifNotEditmode>
<style type="text/css">
html {
font-family: arial;
font-size: .8em;
color: #000000;
}

a {
color: #000000;
}
</style>
</we:ifNotEditmode>
</head>
<body>

<!--
Dieser Bereich ist nur für den Redakteur innerhalb
der Dokumentenansicht Bearbeiten sichtbar.
-->
<we:ifEditmode>
<div class="editmode-list">
<we:block name="Data">
<span class="editmode">Was: </span>
<we:input type="text" name="What" size="20"/>
<span class="editmode">Wieviel: </span>
<we:input type="text" name="HowMuch" size="5"/>%
<br style="clear: both;" />
</we:block>
<br style="clear: both;" />
</div>
<table>
<tr>
<td class="editmode">Farbe der Tortenstücke:</td>
<td><we:colorChooser name="PieColor" width="20" height="16"/></td>
</tr>
<tr>
<td class="editmode">Breite der Grafik:</td>
<td>
<we:select name="Width" size="1">
<option>100</option>
<option>150</option>
<option>200</option>
<option>250</option>
<option>300</option>
<option>350</option>
<option>400</option>
<option>450</option>
<option>500</option>
<option>550</option>
<option>600</option>
<option>650</option>
<option>700</option>
</we:select>
Pixels
</td>
</tr>
</table>
</we:ifEditmode>

<!-- Dieser Bereich ist nicht in der Dokumentenansicht Bearbeiten sichtbar. -->
<we:ifNotEditmode>

<!-- Prozentwerte für die Größe der Tortenstücke -->
<?php $GLOBALS['chd'] = (string) ''; ?>
<we:block name="Data">
<we:setVar to="global" nameto="HowMuch" from="block" namefrom="HowMuch" typefrom="text"/>
<?php \$GLOBALS['chd'] .= \$GLOBALS['HowMuch']; ?>
<we:ifNotPosition type="block" position="last" reference="Data">
<?php \$GLOBALS['chd'] .= ','; ?>
</we:ifNotPosition>
</we:block>

<!-- Beschriftung (Legende) der Tortenstücke -->
<?php $GLOBALS['chl'] = (string) ''; ?>
<we:block name="Data">
<we:setVar to="global" nameto="What" from="block" namefrom="What" typefrom="text"/>
<?php \$GLOBALS['chl'] .= urlencode(\$GLOBALS['What']); ?>
<we:ifNotPosition type="block" position="last" reference="Data">
<?php \$GLOBALS['chl'] .= '|'; ?>
</we:ifNotPosition>
</we:block>

<!-- Ausgewählte Farbe der Tortenstücke in eine globale PHP-Variable speichern -->
<we:setVar to="global" nameto="PieColor" from="top" namefrom="PieColor"/>
<!-- Führendes #-Zeichen entfernen -->
<?php $GLOBALS['PieColor'] = substr($GLOBALS['PieColor'], 1); ?>

<!-- Ausgewählte Breite in eine globale PHP-Variable speichern -->
<we:setVar to="global" nameto="Width" from="top" namefrom="Width"/>

<p>
<!-- Tortendiagramm ausgeben -->
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:<we:var type="global" name="chd"/>&chs=<we:var type="global" name="Width"/>x200&chl=<we:var type="global" name="chl"/>&chco=<we:var type="global" name="PieColor"/>" alt="" />
</p>

</we:ifNotEditmode>

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

Screenshot - Eingabe



{{:de:webedition:code-examples:chart-with-values-from-a-webedition-page:3d-tortendiagramm-mit-werten-aus-webedition-seite-erstellen-eingabe.gif|}}

Weiterführende Informationen



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