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 Besucher­gutscheine

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 Austeller­eintritte

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>