Data visualization allows you to display structured information—such as prices, trends, or comparisons—in a clear and visual way using charts. On the Engel & Völkers website, this is typically used for real estate insights like market trends, price developments, or regional comparisons.
This guide introduces how data visualization works in Storyblok, what editors are responsible for, and what to expect when working with charts.
Data visualization transforms raw data into visual formats like line charts, bar charts, or similar components. Instead of explaining trends in text, charts help users quickly understand patterns and comparisons.
Typical use cases:
Property price development over time
Comparison of average prices across locations
Market trends for specific property types
These charts are embedded directly into Storyblok content pages and are configured by editors.
Charts in Storyblok are not created manually point by point. Instead, they are powered by external data and controlled through predefined components.
As an editor, you will:
Select a chart component in Storyblok
Link it to a data source (Google Sheets)
Configure basic settings (e.g. titles, labels, display options)
The actual data (numbers, categories, timelines) comes from a structured spreadsheet, not from manual input in Storyblok.
Read more about how to set up dashboards, charts and filters.
To understand the workflow, it helps to see the system as two connected parts:
Where you build and edit content pages
Where charts are added and configured
Controls how the chart looks and appears on the page
Stores the data behind each chart
Contains structured tables used by the chart
Is maintained separately from Storyblok
In simple terms:
Storyblok defines how the chart looks, while Google Sheets defines what data is shown.
Before working with data visualization, keep these core principles in mind:
Charts only work if the data follows a clear structure (e.g. columns for dates, values, categories).
No free text or mixed formats
Consistent labeling is essential
Small formatting issues can break the chart
Read more about data preparation in Google Sheets, including access and setup, data structure for different chart types, and how to avoid data issues.
Getting started
Follow these essential guidelines to get started with data visualizations: prepare your data in Google Sheets, store files in the designated folder, set up access, and structure your data to match different chart types.
&w=1920&q=75)
This guideline helps content editors structure datasets correctly in Google Sheets so they can be used reliably for data visualizations on the Engel & Völkers website. Well-prepared data ensures that charts display correctly, update smoothly, and remain easy to maintain.
To ensure data visualizations display correctly, always use the designated data sources stored in the specified folder.
Different chart types need different data structures. Even if your sheet is clean and technically valid, a chart may still not work if the columns are arranged in the wrong way.
The system is intentionally structured to ensure consistency and performance.
You cannot fully customize chart behavior
Only predefined chart types and settings are available
This ensures charts remain reliable and consistent across pages
This guide will help you:
Understand how to structure data for the different chart types
Configure different chart types and filters:
By the end, you should be able to confidently add and manage charts that enhance your content and support users in understanding real estate data.
You may also be interested in
&w=1920&q=75)
You may also be interested in
You may also be interested in
&w=1920&q=75)
&w=1920&q=75)
You may also be interested in
