To begin, let's look at what a very simple chart consists of. While Seats.io supports many chart elements such as general admission areas and tables, in this article we will look purely at rows of seats. To make the chart more cohesive, we will finish it with some shapes that round out the design.
If you want to follow along with this guide, you can download the reference chart.
Creating and calibrating a chart
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 "Simple".
It's highly recommended to use a reference chart to base your chart on. This will help give a more accurate representation of the venue.
Seats.io has a chart scanner that can help convert a reference chart to a seating chart, but in this example we're going to do everything manually to give a better view on each stage of chart design.
After clicking on "Simple", you will be offered the choice to scan a chart. Click on "Skip", and you will be presented with the scary sight of a blank canvas. Luckily, take a look at the highlighted blue area on the right - the reference chart can be set here.
Click on the reference chart area to open a file dialog, or drag a reference chart image into the area.
Once again, there is an option to scan the chart, and once again we're going to skip it by clicking on the "X" in the top left corner.
While we're not going to scan the chart, we do need to calibrate against it to make drawing on it easier. This helps the designer to determine things such as the space between seats, and between rows. Go ahead and click on "Calibrate".
Click on "Next" to get started with the calibration.
Here we can see a zoomed-in piece of the reference chart. Set the zoom level to something you're comfortable with, and at which you can easily see individual seats and rows.
Click on "Next" when you're ready. You can always go back to this step if you want to adjust the zoom level.
Click on a seat, and a circle will appear. Change the seat size until it represents the space of an individual seat - if you need to reposition the seat, you can drag it. Once this is done, add a few more seats in the same row. The circle size will remain the same, but if you need to adjust it the size will change for all the circles. Once this is done, click on "Next".
Now we're going to show the designer what another row looks like. Drag the orange circles until they represent seats in another row.
Click on "Next", and the calibration is complete.
Populating the chart
Now we're ready to start drawing the chart. The blank canvas has been replaced with something you can now draw on top of with a clear guide on where things are.
We'll start by adding seats to one block of reference seats at a time, using the Row tool. This has three options - a single row, a segmented row which allows for rows that are not straight lines, and multiple rows. It's the last one we will primarily be using here.
By clicking on the top left seat of the block of seats we want to define, we can anchor where a corner of the block is. From here, we can move across and down until a regular-shaped block of seats is defined. Note the seats align with both the seats and the rows because of the calibration step.
We can then repeat this until all reference seats are represented by seat objects within the charts. For seats that are outside of the regular-shaped blocks, such as the bottom four seats in the following image, we can use the single-row tool to create rows.
Next, we can label the seats. Select a block of seats, and set the "Row labeling" and "Seat labeling" options for them. For rows, we can use the "A, B, C..." labeling scheme.
Note there is no row I - we can instruct the chart to skip row I, leading to row H being followed by row J.
We can then use the seat labeling scheme that skips every other number, and set the direction of the labeling. In this case, higher numbers are to the left.
We can then continue to label the rest of the chart. Because row P of the centre block has a slightly different layout, this row can be labeled separately to ensure it remains consistent with the reference chart.
Once all the seats have been placed and labeled, we can take a look at what the chart looks like in the preview.
It's accurate, but it's pretty bland.
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 seats to them.
Categories are called whatever makes sense for your chart, but in this case I'll just use visibly different words.
Selecting the seats we want to assign to a category, we can then use the category drop-down in the top-right corner to assign them.
Once all the seats have a category, we can again look at the preview and see how things look now. Hovering over a seat, we can see it not only has a row and seat label, but also a category.
Accessible seats
There are some seats that have been missed because they don't appear as seats on the reference chart. Zooming in, we can see a couple of rows defined as ADA - these are accessible places that don't have actual seats but appear to be spaces for wheelchairs. The actual type of space will be known by the venue, but for this example we'll add some wheelchair spaces.
To do this, click on the row of seats U1 and U3, and drag horizontally to add new seats. Note that labeling, colour, and category are automatically assigned. Next, the "Select seats tool" is used to select only the ADA places.
We can then define the seat properties to match what the space offers.
Checking the preview, we can now see these seats have additional information available.
Finishing touches
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.
Now let's add the stairs. These could be represented by text as in the reference chart, but there's also an icon tool available. Here, rectangles have been added to give a different background colour and the "Icon tool" is used to place the stairs icon.
Finally, let's add the light and sound room, and a few more labels using the "Text tool" to round out the chart. The reference chart has been hidden in the following screenshot to give a full view of what we've created.
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.
To get started with events, take a look at the First Steps guide.