Getting started with a chart with sections and the chart scanner

Following on from our article on creating a simple chart, now let's turn to look at how to create a more complicated chart - one that features sections - and how we can use the reference chart scanner to do some of the heavy lifting.

Unlike the chart we created in the other example, this chart will feature sections. A section can be thought of as a chart within a chart, allowing for easy navigation in large charts. Seats (or tables, or general admission areas, or...) within a section have the label format <section label>-<row label>-<seat label>, which is important to know for later.

If you want to follow along with this guide, you can download the reference chart used in this example.

To start, log in to https://app.seats.io and click on "New seating chart".

Here, you can choose what kind of chart you want to create, in this case "Sections and floors".
​

The first screen you will see after choosing your floor type allows you to upload a reference chart. While it is highly recommended to use a reference chart to base your chart on, to give a more accurate representation of the venue, if we're going to use the chart scanner it is essential!
​

You can either drag a chart onto the upload area, or click the upload area to open a file dialog. Once you have specified the chart, you're all set to go.
​

The first question at this point is - what got scanned? The simple answer is - nothing! Because the chart contains sections, scanning will occur when you define those sections.

After clicking on "Continue to the designer", we're presented with a canvas showing the reference chart. At this point, the seating chart itself is empty but we do have a map to show what needs to be done.
​

Zooming out to see the whole chart better, we can get started with creating a section. Select the "Rectangular section tool" to begin this process.

We're going to focus primarily on "Orchestra center" - all other sections are treated in exactly the same way, and differ only in shape and number of seats. Using the section tool, draw a section that covers all the seats.
​

If you want the section to follow the exact lines of the reference chart, take a look at how to draw curves in sections - for this example though, we're going to focus on the basics and avoid getting too much into the weeds.

Selecting the section, let's give it a name that makes sense for the chart - "Orchestra center" is what the chart says, so it's the obvious choice.
​

All objects inside this section will now have the name Orchestra center-<row label>-<seat label>.
​

Now, it's time to scan. Either double-click the section, or click on "Edit contents" in the top right corner. This will open the section for editing, and also start up the scanner.
​

Clicking on next, we will be presented with a portion of the reference chart matching the location of the section.
​

To help the scanner identify seats, the chart must be zoomed in/out until one seat matches the circle of the cursor.
​

Once you're satisfied with sizing, one click starts the scanning process. This is slightly complicated in this example by the background text, so not every seat is going to be detected. You can see below both the results of the scanning, and also the gaps where seats have not been detected.
​

To address this, we can add in extra seats (or remove unnecessary ones, although that isn't needed in this case) by clicking on where a seat should be. In the image below, you can a line coming out of the side of the seat we're adding, connecting it to the adjacent seat. Click to add it, and the chart will be scanned again.
​

The scanner has now picked up every seat in the original block, but it's missed the three rows in the back. Click on one of the grey seats, and the scanner will again do its thing.

All seats in the section have now been detected - it's always worth double-checking - and we can click on "Done". We're now shown the results of the scanning. Note that we're still in the section, as can be seen in the top left corner, where it says "Exit section".
​

Next, we're going to label the objects in the section - as can be seen above, they're currently red and contain a question mark, indicating they're not labeled. Using the "Select tool", drag a rectangle to cover all the seats, and they will become highlighted and the labeling tools will become active in the inspector.

This reference chart does not have any row or seat labeling information, which is of course very important when it comes to selling assigned seats. For this example, we're going to use a consistent labeling scheme but for a production chart it's important to have accurate information.
​
Using the inspector, we're going to assign row and seat labels. For rows, "A, B, C..." will be used; for seats, "1, 3, 5...6, 4, 2". This gives a realistic scheme.
​

Using the chart preview, we can see the results.
​

With that, the section is finished. The three steps are:
1. Define the section
2. Scan the seats
3. Label the seats.
​
This will be repeated for each section in the chart.
​

Again using the preview, we can see all the seats in the chart.
​

It's important to note a major difference with simple charts here. This chart contains multiple objects whose label is, for example, A-1. This is not possible in a simple chart, because there are no sub-divisions provided by sections. In this chart, any A-1 seat is actually <section label>-A-1.

As we can see in the chart report in the top right, there are no categories assigned. In seats.io, the category of a seat determines its price. Let's define a few categories and assign them to sections.

Selecting one section, we can assign a category to it.

It's also possible to select multiple sections and apply a category to them.

On the reference chart, we can see there are two rows of seats in "Orchestra center left" that are a different colour. These seats might belong to a different category, or belong to a channel, but for the purposes of this example we will assume they are accessible seats.

Using the "Selection brush tool", select each seat that you want to make accessible, and you'll see we can edit the seat properties in the inspector.

Define the accessible values of the seats, and these will automatically be represented in the seating chart. We can see the results in the preview.

Next, let's add some furniture to the chart.

Using the rectangle tool, we can draw a shape where the stage is. Once done, you can select the shape, set the type to "Stage" - this automatically adds an icon - and choose a colour for it.

Finally, we can add some more information that's useful to customers. In this case, we'll add a couple of entrances, matching where there are arrows on the reference chart.

The chart is now ready to have events assigned to it, and for booking to start. The following view is from the public preview available for every chart from the chart detail.

We can now see the full label of any object - <section label>-<row label>-<seat label>, and the category of the seat.

To get started with events, take a look at the First Steps guide.