Skip to main content

Renderer methods

new seatsio.SeatingChart({...}).render(); returns a seating chart object with some methods you can access for use in your application.

var chart = new seatsio.SeatingChart({...}).render();
console.log(chart);

You can invoke these methods in two ways:

  • Directly on the seatsio.SeatingChart object you created. This is recommended if you want to invoke one of these methods to react to a user action.
var chart = new seatsio.SeatingChart({...}).render();
$('#myButton').on('click', () => {
chart.clearSelection();
});
  • Or on the object that's passed to the onChartRendered callback, which you can provide in your chart config. This is the way to go when you want to invoke one of these methods right after the floor plan was fully loaded, and without any user action.
new seatsio.SeatingChart({
...,
onChartRendered: chart => {
chart.clearSelection();
},
...
}).render();
Tip

These methods will only work after a chart is fully rendered. That means this won't work:

var chart = new seatsio.SeatingChart({...}).render();
chart.clearSelection(); // WON'T WORK

That's because the render() method may still be doing a number of async operations in the background.

All methods

Rendering & lifecycle

MethodDescription
chart.render()Renders the chart and returns the chart object.
chart.rerender()Re-renders the chart to apply configuration changes (clears the current selection).
chart.changeConfig()Updates the chart configuration on the fly (colors, pricing, channels, …).
chart.destroy()Removes the chart from the page and cleans up.

Selection

MethodDescription
chart.trySelectObjects()Selects objects, prompting for missing info (e.g. ticket type) when needed.
chart.doSelectObjects()Selects objects without prompting; fails if required info is missing.
chart.deselectObjects()Deselects the given objects.
chart.clearSelection()Deselects all currently selected objects.
chart.listSelectedObjects()Returns the currently selected objects.
chart.holdBestAvailable()Holds the best available objects matching the given criteria.

Categories

MethodDescription
chart.selectCategories()Selects all selectable objects in the given categories.
chart.deselectCategories()Deselects all objects in the given categories.
chart.listCategories()Returns the chart's categories.

Sessions

MethodDescription
chart.startNewSession()Starts a fresh session with a new hold token, clearing the current selection.

View & navigation

MethodDescription
chart.resetView()Resets zoom and pan to the initial view.
chart.zoomToObjects()Zooms to the given objects.
chart.zoomToSelectedObjects()Zooms to the currently selected objects.
chart.zoomToFilteredCategories()Zooms to the currently filtered categories.
chart.zoomToSection()Zooms to the given section.
chart.goToFloor()Switches to a specific floor (multi-floor charts).
chart.goToAllFloorsView()Switches to the all-floors overview (multi-floor charts).

Highlighting

MethodDescription
chart.pulse()Starts a pulsing animation on the given objects.
chart.unpulse()Stops the pulsing animation.

Spotlight

MethodDescription
chart.setSpotlightObjects()Spotlights the given objects, dimming everything else (replaces any current spotlight).
chart.setSpotlightOnSelection()Spotlights the currently selected objects.
chart.clearSpotlightObjects()Clears the spotlight and exits the spotlight view.

Lookup

MethodDescription
chart.findObject()Finds an object by label; rejects if it doesn't exist.
chart.listZones()Returns the chart's zones.

Reporting

MethodDescription
chart.getReportBySelectability()Returns a report of the chart's objects grouped by selectability.
chart.getReportBySelectabilityGroupedBy()As above, additionally grouped by another property.
Properties

The rendered chart also exposes two read-only properties: chart.holdToken (documented under Selection) and chart.selectedObjects (documented under Selection).