base example

by seatsio

HTML

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

CSS

#chart {
	height: 500px;
}

JavaScript

var chart = new seatsio.SeatingChart({
        divId: "chart",
        publicKey: "publicDemoKey",
        event: "smallTheatreEvent",
      	pricing: [
            {
                category: 'Ground Floor',
                ticketTypes: [
                	{'ticketType': 'adult', 'price': 8},
                	{'ticketType': 'child', 'price': 12}
            		]
            },
          	{
                category: 'Balcony',
                ticketTypes: [
                	{'ticketType': 'adult', 'price': 8},
                	{'ticketType': 'child', 'price': 12}
            		]
            },
          	{
                category: 'Wheelchair',
                ticketTypes: [
                	{'ticketType': 'adult', 'price': 8},
                	{'ticketType': 'child', 'price': 12}
            		]
            }
        ],
        holdOnSelect: true,
        onObjectSelected: (object, ticketType) => {
        	console.log(object);
          console.log(ticketType);
        }
    }).render();