Balkendiagramm mit Werten aus webEdition-Seite erstellen



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

Sie geben dabei dem Radakteur die Möglichkeit zur Eingabe beliebig vieler Werte für die y-Achse und den dazugehörigen Prozentangaben für die x-Achse. Die Farbe der Balken kann der Redakteur auswählen.

Das Balkendiagramm (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:balkendiagramm-mit-werten-aus-webedition-seite-erstellen-ausgabe.gif|}}

Demo



* [[http://documentation-we.webedition.de/200807181306117820/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">Balkenfarbe:</td>
<td><we:colorChooser name="BarColor" width="20" height="16"/></td>
</tr>
</table>
</we:ifEditmode>

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

<!-- Zahlenwerte für die Breite der Balken -->
<?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>

<!-- Legende der y-Achse -->
<?php $GLOBALS['chxl'] = array(); ?>
<we:block name="Data">
<we:setVar to="global" nameto="What" from="block" namefrom="What" typefrom="text"/>
<?php \$GLOBALS['chxl'][] = \$GLOBALS['What']; ?>
</we:block>
<?php
$GLOBALS['chxl'] = array_reverse($GLOBALS['chxl']);
$GLOBALS['chxl'] = urlencode(implode('|',$GLOBALS['chxl']));
?>

<!-- Beschriftung an den Balken -->
<?php
$GLOBALS['position'] = (int) 0;
$GLOBALS['chm'] = (string) '';
?>
<we:block name="Data">
<we:setVar to="global" nameto="HowMuch" from="block" namefrom="HowMuch" typefrom="text"/>
<?php \$GLOBALS['chm'] .= 't++'.\$GLOBALS['HowMuch'].urlencode('%').',000000,0,'.\$GLOBALS['position'].',10'; ?>
<we:ifNotPosition type="block" position="last" reference="Data">
<?php \$GLOBALS['chm'] .= '|'; ?>
</we:ifNotPosition>
<?php \$GLOBALS['position']++; ?>
</we:block>

<?php
// Höhe der Grafik errechnen
$GLOBALS['i_height'] = 33 * $GLOBALS['position'];
?>

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

<p>
<!-- Balkendiagramm ausgeben -->
<img src="http://chart.apis.google.com/chart?cht=bhs&chs=400x<we:var type="global" name="i_height"/>&chd=t:<we:var type="global" name="chd"/>&chxt=x,y&chxl=0:|0%|25%|50%|75%|100%|1:|<we:var type="global" name="chxl"/>&chm=<we:var type="global" name="chm"/>&chco=<we:var type="global" name="BarColor"/>" alt="" />
</p>

</we:ifNotEditmode>

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

Screenshot - Eingabe



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

Weiterführende Informationen



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