Create interactive seat chart for event tickets

by seatsio

HTML

<script src="https://cdn.seatsio.net/chart.js"></script>

    
    <div id="chart"></div>

CSS

#chart {
	height: 500px;
}

JavaScript

var currentSelections = {
            '1-adult': 0,
            '2-adult': 0,
            '1-child': 0,
            '2-child': 0,
        };

        // Separate pricing configuration that will be updated
        var dynamicPricing = {
            prices: [
                {
                    'category': 1, 
                    'ticketTypes': [
                        {'ticketType': 'adult', 'price': 30, 'label': 'For adults', 'description': 'Includes hot meal and a drink'},
                        {'ticketType': 'child', 'price': 20, 'label': 'For children', 'description': 'Includes burger and fries'}
                    ]
                },
                {
                    'category': 2, 
                    'ticketTypes': [
                        {'ticketType': 'adult', 'price': 40, 'label': 'For adults', 'description': 'Includes hot meal and a drink'},
                        {'ticketType': 'child', 'price': 30, 'label': 'For children', 'description': 'Includes burger and fries'}
                    ]
                },
                {'category': 3, 'price': 50}
            ],
            priceFormatter: function(price) { return '$' + price; }
        };

        function isTicketTypeAvailable(category, ticketType) {
            var key = category + '-' + ticketType;
            var currentCount = currentSelections[key] || 0;
            
            // Check against maxSelectedObjects limits
            var maxLimits = [
                { 
                    category: 1, 
                    ticketTypes: [
                        { ticketType: 'adult', quantity: 2 },
                        { ticketType: 'child', quantity: 2 }
                    ]
                },
                { 
                    category: 2, 
                    ticketTypes: [
                        { ticketType: 'adult', quantity: 2 },
                        { ticketType: 'child', quantity: 1 }
                    ]
    ...