Visualizing Data with a Custom Restaurant Floor Plan Control

When working with large sets of data, it can quickly become overwhelming to understand the critical metrics, trends, and KPIs of your data. Gathering, cleaning, modeling, and aggregating this data is only one piece of business intelligence; visualizing the resulting data is an entirely different concept and can often be challenging for dashboard authors.

With Wyn Enterprise v4.0, dashboard authors can effectively visualize their spatial data using floor maps. Floor maps enable dashboards authors to plot their aggregated data against any custom image to show trends and key takeaways in their data to inform data-driven business decisions.

In this article, we will showcase the benefits and usage of the Floor Map control using a restaurant's sample data.

In the hospitality/restaurant industry, managers strategically determine food specials, limited time offers, seating plans, server/table group assignments, and more based on historical data of previous years and seasons.

The sample dashboard built in this blog is an example of how managers can visualize this data to help inform these decisions. The dashboard will visualize revenue by table grouping.

Creating the Floor Plan Resource

The first step in this process is to navigate to the Resource Portal, click "New" represented by a "+" icon, and select "Create floor plan."

This will open a dedicated native design environment for creating the floor plan for our dashboard.

Visualizing Data with a Custom Restaurant Floor Plan Control

Next, click the marked image icon in the floor map designer to load a background image of the target floor map. In this sample, it will be the seating layout of our sample restaurant. Most image formats are supported, such as .svg, .gif, .png, .jpg, .jpeg, and more.

Visualizing Data with a Custom Restaurant Floor Plan Control

After we have the floor map background image loaded, we can now draw custom shapes to represent the objects in our floor map to which we want to bind data. We have the option to use Rectangles or Ellipses to pair our desired data binding objects to the layout of the floor map.

In this sample, we have marked our tables with Ellipses, and the Kitchen with a Rectangle.

Visualizing Data with a Custom Restaurant Floor Plan Control

As shapes are being drawn in the Floor Map, you will notice default names, such as "Shape1."

For your data to be bound to the correct shapes, these shapes must be renamed to be identical to the value in your data, which determines the location of the data. In this sample, we have data with locations like "Table1," "Table2," etc.

We must have shapes with the name of "Table1", "Table2", etc. so that the Floor Map knows which data aggregations should be bound to which shapes.

Once the floor plan image has been imported, the shapes are drawn, and the shape names have been established, we can save the floor plan so that it can be used in the Dashboard Designer.

If you would like to Group shapes together, you can do so by right-clicking in the floor plan Designer.

In this sample, we have grouped sets of tables together to represent a server's "section" of tables for which they are responsible for during their shift. You can also choose to remove the background image of the floor plan if you desired.

This may be useful if the shapes you have drawn represent the target floor plan sufficiently.

Visualizing Data with a Custom Restaurant Floor Plan Control

Using Floor Plans in the Dashboards

In the Dashboard Designer, you can insert a floor plan under the "Maps" section from the Data Visualization panel.

Once the floor plan control is inserted, you can load the custom floor plan you have created through the visualization toolbar, or through the "Inspector" properties panel on the right-hand side.

Visualizing Data with a Custom Restaurant Floor Plan Control

Once the floor plan is on the dashboard design surface, and the custom floor plan has been bound to it, we need to bind data to the floor plan. There are two data buckets with the floor plan control:

  • Area
    • This defines the location field in the data. It is responsible for binding the shapes to the spatial data column in your dataset.
  • Color
    • This defines the data point to be aggregated against the Area data field above. In our sample, we can aggregate the Revenue field.

The end-result of our implementation above will give us the Sum of Revenue field represented in the shapes with the Location field, where each shape defined in the floor plan is identical to the values in our Location column.

Visualizing Data with a Custom Restaurant Floor Plan Control

After the data is bound to the floor plan, we can make additional configurations to the visualization, showing differences in the aggregated data point with a Gradient color scale or a Palette color scale.

With Gradient, higher data points will be represented by a more vibrant color hue (e.g., dark blue) and lesser data points by a lighter hue (e.g., light blue).

With the Palette, data points will be represented by different colors all together, which can help highlight the different shapes and groups of shapes on the floor plan.

See the final floor plan below: Visualizing Data with a Custom Restaurant Floor Plan Control

The screenshot shows the end result of our floor plan with some additional visualizations to help tie the dashboard together. A restaurant owner or manager can utilize this dashboard to view how much revenue is generated by individual sections of tables, or by various combinations of sections.

Revenue can be shown in the tooltip and be sliced/filtered by different dining hours (lunch or dinner rush).

View the Restaurant Revenue Assessment Sample

Visualizing Data with a Custom Restaurant Floor Plan Control

For questions on using floor plans in Wyn Enterprise 4.0, scheduling a demo, or finding out how Wyn can meet your BI requirements, please reach out to us at

Are you interested in implementing an advanced BI system into your business? Try us out or request a demo to learn more about Wyn Enterprise.