# Bar-Charts

## 3-Fach & Einzel Barchart

Die Barcharts werden auf dem Dashboard eingesetzt um vergebene und benutzte Tickets zu visualisieren. Die Charts teilen sich auf zwei Dashboard-Karten auf, die je nach Fenstergrösse neben- oder untereinander stehen.

Die Daten für die Charts sind in HTML-Tabellen hinterlegt, diese werden per JavaScript ausgewertet und dann durch den Graphen ersetzt.

Benutzt auf 04.dashboard.html. Benötigt jQuery-Plugin 'chart-single-stacked-bar.js' & 'chart-three-bars.js'.

## Meine Besuchergutscheine

Gutscheinliste anzeigen

### Gesamt

Vergeben | 70
Registriert | 58
Genutzt | 51
Kostenfrei | 30
Kostenpflichtig | 21

### Dauerkarten

Vergeben | 22
Registriert | 18
Genutzt | 18
Kostenfrei | 18
Kostenpflichtig | 0

### Tageskarten

Vergeben | 48
Registriert | 40
Genutzt | 33
Kostenfrei | 30
Kostenpflichtig | 3

Besucher einladen

## Meine Austellereintritte

Eintrittsliste anzeigen

Sie haben bereits für 5 Besucher Tickets vergeben, die Sie zu 30 Tageseintritten berechtigen.

### Austellereintritte

Tageseintritte | 30
Genutzt | 24
Kostenfrei | 20
Kostenpflichtig | 4

Tickets erstellen

    <!-- src/frontend/templates/modules/dashboard-cards.twig -->
    <div class="columns is-desktop dashboard is-clearfix">

    <!-- src/frontend/templates/modules/dashboard-card.twig -->
    <div class="dashboard-card column is-half-desktop">

        <div class="header">
            <h2>
                Meine Besucher&shy;gutscheine

                <sub>
                    <a href="06.01.info-gutschein.html" class="open-overlay"><span class="icon icon-info color-event color-event-darker-hover"> </span></a>
                </sub>

            </h2>

                <p>
                    <a href="06.gutschein-listing.html" class="color-event color-event-darker-hover"><span class="icon icon-arrow-right"></span> Gutscheinliste anzeigen</a>
                </p>

        </div>

        <div class="dashboard-graph chart-three-bars">

                <div class="graph-data-table">
                    <h3>Gesamt</h3>
                    <table>
                        <tbody>

                                <tr data-color-class="color-bar-4" data-bg-color-class="bg-color-bar-4">
                                    <th>Vergeben</th>
                                    <td>70</td>
                                </tr>

                                <tr data-color-class="color-bar-3" data-bg-color-class="bg-color-bar-3">
                                    <th>Registriert</th>
                                    <td>58</td>
                                </tr>

                                <tr data-color-class="color-bar-2" data-bg-color-class="bg-color-bar-2" data-is-compound="true">
                                    <th>Genutzt</th>
                                    <td>51</td>
                                </tr>

                                    <tr data-color-class="color-bar-1" data-bg-color-class="bg-color-bar-1" data-parent="Genutzt">
                                        <th>Kostenfrei</th>
                                        <td>30</td>
                                    </tr>

                                    <tr data-color-class="color-bar-2" data-bg-color-class="bg-color-bar-2" data-parent="Genutzt">
                                        <th>Kostenpflichtig</th>
                                        <td>21</td>
                                    </tr>

                        </tbody>
                    </table>
                </div>

                <div class="graph-data-table">
                    <h3>Dauerkarten</h3>
                    <table>
                        <tbody>

                                <tr data-color-class="color-bar-4" data-bg-color-class="bg-color-bar-4">
                                    <th>Vergeben</th>
                                    <td>22</td>
                                </tr>

                                <tr data-color-class="color-bar-3" data-bg-color-class="bg-color-bar-3">
                                    <th>Registriert</th>
                                    <td>18</td>
                                </tr>

                                <tr data-color-class="color-bar-2" data-bg-color-class="bg-color-bar-2" data-is-compound="true">
                                    <th>Genutzt</th>
                                    <td>18</td>
                                </tr>

                                    <tr data-color-class="color-bar-1" data-bg-color-class="bg-color-bar-1" data-parent="Genutzt">
                                        <th>Kostenfrei</th>
                                        <td>18</td>
                                    </tr>

                                    <tr data-color-class="color-bar-2" data-bg-color-class="bg-color-bar-2" data-parent="Genutzt">
                                        <th>Kostenpflichtig</th>
                                        <td>0</td>
                                    </tr>

                        </tbody>
                    </table>
                </div>

                <div class="graph-data-table">
                    <h3>Tageskarten</h3>
                    <table>
                        <tbody>

                                <tr data-color-class="color-bar-4" data-bg-color-class="bg-color-bar-4">
                                    <th>Vergeben</th>
                                    <td>48</td>
                                </tr>

                                <tr data-color-class="color-bar-3" data-bg-color-class="bg-color-bar-3">
                                    <th>Registriert</th>
                                    <td>40</td>
                                </tr>

                                <tr data-color-class="color-bar-2" data-bg-color-class="bg-color-bar-2" data-is-compound="true">
                                    <th>Genutzt</th>
                                    <td>33</td>
                                </tr>

                                    <tr data-color-class="color-bar-1" data-bg-color-class="bg-color-bar-1" data-parent="Genutzt">
                                        <th>Kostenfrei</th>
                                        <td>30</td>
                                    </tr>

                                    <tr data-color-class="color-bar-2" data-bg-color-class="bg-color-bar-2" data-parent="Genutzt">
                                        <th>Kostenpflichtig</th>
                                        <td>3</td>
                                    </tr>

                        </tbody>
                    </table>
                </div>

        </div>

            <div class="cta-wrapper">

    <!-- src/frontend/templates/elements/buttons/button-brand.twig -->

    <a href="05.besuchergutscheine-onboarding.html" class="button button-brand bg-color-event bg-color-event-darker-hover">

            <span class="icon icon-user"> </span>

            <span>Besucher einladen</span>

    </a>

            </div>

    </div>

    <!-- src/frontend/templates/modules/dashboard-card.twig -->
    <div class="dashboard-card column is-half-desktop">

        <div class="header">
            <h2>
                Meine Austeller&shy;eintritte

                <sub>
                    <a href="08.02.info-ticket.html" class="open-overlay"><span class="icon icon-info color-event color-event-darker-hover"> </span></a>
                </sub>

            </h2>

                <p>
                    <a href="08.ticket-listing.html" class="color-event color-event-darker-hover"><span class="icon icon-arrow-right"></span> Eintrittsliste anzeigen</a>
                </p>

                <p class="text">
                    Sie haben bereits für <strong>5 Besucher</strong> Tickets vergeben, die Sie zu <strong>30 Tageseintritten</strong> berechtigen.
                </p>

        </div>

        <div class="dashboard-graph chart-stacked-bar">

                <div class="graph-data-table">
                    <h3>Austellereintritte</h3>
                    <table>
                        <tbody>

                                <tr data-color-class="color-bar-grey" data-bg-color-class="bg-color-bar-grey">
                                    <th>Tageseintritte</th>
                                    <td>30</td>
                                </tr>

                                <tr data-color-class="color-bar-2" data-bg-color-class="bg-color-bar-2" data-is-compound="true">
                                    <th>Genutzt</th>
                                    <td>24</td>
                                </tr>

                                    <tr data-color-class="color-bar-1" data-bg-color-class="bg-color-bar-1" data-parent="Genutzt">
                                        <th>Kostenfrei</th>
                                        <td>20</td>
                                    </tr>

                                    <tr data-color-class="color-bar-2" data-bg-color-class="bg-color-bar-2" data-parent="Genutzt">
                                        <th>Kostenpflichtig</th>
                                        <td>4</td>
                                    </tr>

                        </tbody>
                    </table>
                </div>

        </div>

            <div class="cta-wrapper">

    <!-- src/frontend/templates/elements/buttons/button-brand.twig -->

    <a href="09.ticket-erstellen-auswahl.html" class="button button-brand bg-color-event bg-color-event-darker-hover open-overlay overlay-gray">

            <span class="icon icon-ticket-tilted"> </span>

            <span>Tickets erstellen</span>

    </a>

            </div>

    </div>

    </div>