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 Google Chart API (https://developers.google.com/chart) erzeugt.
Screenshot - Ausgabe
Quellcode
<html>
<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>
</we:block>
<br>
</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="https://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>Screenshot - Eingabe
