The Seats Renderer allows you to change behaviour and appearance of floor plans by means of callback functions that you can implement yourself. An example is objectColor() which allows you to dynamically change the color of a seat, like so:
<div id="chart"></div>
<script type="text/javascript" src="https://cdn.seatsio.net/chart.js"></script>
<script>
var chart = new seatsio.SeatingChart({
divId: "chart",
publicKey: "publicDemoKey",
event: "smallTheatreEvent2",
objectColor: function(object, defaultColor) {
return "#82CAFA";
}
}).render();
</script>
You need to make sure, though, that your implementation of these callbacks is as fast as possible, or else the rendering performance will suffer, and suffer hard.
Why is this important?
objectColor() and other callbacks are invoked for each object on a chart, in each redraw cycle. Let's say you've created a chart with 10.000 seats. This means that objectColor() is invoked 10.000 times when rendering the chart.
And 10.000 times when panning.
And 10.000 times when zooming.
You get the point: that's a whole lot of invocations.
It's crucial to implement these callbacks in a blazingly-fast way, or otherwise the chart will feel sluggish to ticket buyers.
This means, amongst other things, that means not using slow methods on arrays.
Which Callbacks?
Currently, these are the callbacks that are being called for each and every seat:
The Bad Way (Captain Slow)
Suppose you're using extraConfig to pass in an array of seats:
new seatsio.SeatingChart({
extraConfig: {
blueSeats: ['A-1', 'A-2', ... , 'A-1000']
}
});A naive approach to use that array in objectColr would be:
new seatsio.SeatingChart({
objectColor: (object, defaultColor, extraConfig) => {
if(extraConfig.blueSeats.indexOf(object.label) !== -1) {
return "blue";
} else {
return defaultColor;
}
},
extraConfig: {
blueSeats: ['A-1', 'A-2', ... , 'A-1000']
}
});
indexOf traverses the array every time objectColor is invoked. The bigger the array, the slower it becomes. A performance nightmare. Luckily there's a better way: passing in the seat labels as object keys instead of as array elements.
The Good Way (Fast & Furious)
Array.indexOf is a slow operation, which becomes slower as the size of the array increases.
A much faster alternative is to pass the seat labels as keys of a plain-old JavaScript object. Key lookups are very fast in JavaScript:
new seatsio.SeatingChart({
objectColor: (object, defaultColor, extraConfig) => {
if(extraConfig.blueSeats[object.label]) {
return "blue";
} else {
return defaultColor;
}
},
extraConfig: {
blueSeats: { 'A-1': true, 'A-2': true, ... , 'A-1000': true}
}
});