Spenden-Barometer: Einfaches Balkendiagramm in Contao realisieren

Hallo,

ich würde gern ein einfaches Spenden-Barometer in einem Contao-Artikel einbinden. Das sollte ein Balkendiagramm sein, das die Spendenhöhe, die bereits erzielt wurde, anzeigt. Optimal wäre, wenn ich dazu nur im Backend den Spendenbetrag eingeben muss, und das Diagramm den Betrag übernimmt. Gibt es dazu eine passende Erweiterung? Oder kann Contao das sogar ohne Erweiterung?

Ich hab mir mal Highcharts angesehen, allerdings ist das viel zu komplex und umfangreich, da ich ja wirklich nur diesen einen Balken mit der Spendenhöhe brauche, und keine detaillierten Diagramme.

Sollte ganz einfach aufgebaut sein - in etwa so:
Anhang 15918

Vielen Dank für eure Vorschläge!
thevelocity

Datawrapper erzeugt recht einfach schöne Charts die man sehr leicht per HTML einbinden kann. Großartig ein Modul dafür programmieren ist etwas übertrieben denke ich mal.

Ich habe einen Fortschrittsbalken auf meiner Homepage mit einem simplen DIV gelöst.

HTML-Code:

---

<div id="fsb_last">
                        <div class="leer">
                          <div class="voll"></div>
                        </div>
                </div>

---

#fsb_last hat als Hintergrundbild den leeren Balken.
Die Klasse .voll hat den vollen Balken, stelle ich die Breite da z.B. auf 30% ist der Balken zu 30% voll.

Ich würde sowas mit einem Rocksolid Custom Element machen. Im element kann man dann den Spendenbetrag aktualisieren und im Template rechnest du dir dann aus, wie hoch der Balken sein muss und setzt die Höhe als CSS Eigenschaft (prozentual oder absolut). Rest ist CSS.

Vielen Dank für eure Vorschläge! Hab mich nun doch für Highcharts entschieden - ist gar nicht so komplex, wie es auf den ersten Blick wirkt.

Jetzt habe ich aus einem der Charts das Spendenbarometer gebastelt. Das ist jetzt eine HTML-Datei mit ein paar eingebeundenen JS-Dateien:
http://www.fh-ap.com/div/charts/exam...solid/karl.htm

Jetzt stellt sich die Frage, wie ich das am besten in einen Contao-Artikel einbaue, sodass ich die Werte der Variablen auch im Backend bequem aktualisieren kann. Am einfachsten wäre natürlich ein Iframe mit einem HTML-Element einzubinden, aber dann müsste ich jedesmal wieder an den Quelltext der HTML-Datei ran, um die Variablenwerte anzupassen.

Wie würdet ihr das am besten lösen?

Hat vielleicht doch jemand noch eine Idee? Ich stehe hier nämlich nach wie vor an. Vielen Dank!

Man kann einfach eines der Custom-Elements Erweiterungen nehmen und sich damit ein eigenes Element bauen.

Das sind mir die bekannten Erweiterungen:

• dma_elementgenerator
• rocksolid-custom-elements
• pct-custom-elements

Du könntest Deinen Highcharts JS Code so umschreiben, daß der anzuzeigende Wert aus einem HTML-Element geholt wird (z.B. eine Tabelle mit einer Zelle). Dieses HTML bindest Du auch auf der Seite ein, machst es per CSS unsichtbar. Damit hast Du im Fronten die gleiche Optik und im Backend ein Inhaltselement, das Du mit conto bearbeiten kannst um so "einfacher" den Wert zu aktualisieren.

Schick ist natürlich anders. Besser wäre wohl ein eigenes Modul zu schreiben, das ein Eingabefeld für den aktuellen Spendenstand vorsieht und damit dann den HTML+JS-Code für Highcharts erzeugt (also das, was Du momentan noch von Hand machst).

Edit: zu langsam. Das was webstar schreibt wäre dann wohl die "ohne programmieren" Variante vom eigenen Modul

Ich würde auch nach wie vor eine Lösung mit rocksolid-custom-elements vorschlagen. Aber ohne Highcharts, einfach mit HTML und CSS und von mir aus ein wenig JavaSCript, wenn man etwas animieren will (und CSS3 Animationen nicht ausreichen).