base example

by seatsio

HTML

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

<button id="inc" onclick="dec()">-</button>
<span id="numSelected">0</span>
<button id="dec" onclick="inc()">+</button>

<script>
var chart = new seatsio.SeatingChart({
	divId: "chart",
	publicKey: "publicDemoKey",
	event: "smallTheatreEvent",
	onObjectSelected: ga => {
		document.getElementById('numSelected').innerText = ga.numSelected;
	},
	onObjectDeselected: ga => {
		document.getElementById('numSelected').innerText = ga.numSelected;
	}
}).render();

function dec() {
	chart.deselectObjects(['General Admission']);
}

function inc() {
	chart.selectObjects(['General Admission']);
}
</script>

CSS

#chart {
	height: 500px;
}