Creating charts

Step-by-step walkthrough

Follow these steps to add a chart to your content page.

1. Add the DV Dashboard component

• Open your Storyblok content page

• Add a new block

• Select DV Dashboard

This component acts as the container for your data visualizations.

2. Add a chart block

• Inside the DV Dashboard component, in the "Charts" section add the "DV Dashboard Chart" blok

• This is where you will configure your visualization

You can add multiple chart blocks if you want to display different datasets or chart types.

3. Paste your Google Sheets URL

• Copy the URL of your Google Sheet

• Paste it into the designated field in the chart block

Make sure:

• The sheet is accessible (e.g. shared properly)

• The data is structured in a clear table format (headers + rows)

Example:

A sheet with property data: click here

4. Trigger sync

• Click Sync Button next to the Data Source URL field

This connects your chart block to the Google Sheet and prepares the data for use.

What happens during sync

When you trigger the sync, the system processes your Google Sheet automatically.

Data processing steps

• The system reads all sheets in the Google Sheets file

• It detects the structure of the data table of the selected sheet

• It extracts:

  • Dimensions (e.g. City)

  • Metrics (e.g. Listings, Avg Price)

Understanding dimensions vs. metrics

• Dimensions = descriptive fields (categories)

  • Example: City, Property type

• Metrics = numerical values

  • Example: Price, Number of listings, Size (sqm)

This distinction is important for building charts correctly.

Chart configuration basics

Once your data is synced, you can configure how it is displayed.

1. Choose a chart type

Start by selecting how you want to visualize your data:

• Bar chart → compare values across locations

• Line chart → show trends over time

• Pie chart → show proportions

• Table → display raw data

Real estate examples:

• Bar chart: Listings per city

• Line chart: Price development over months

• Pie chart: Property type distribution

2. Select dimensions and metrics

After choosing the chart type:

• Select the dimension(s)

• Select the metric(s)

The available options depend on your synced data and chosen chart type.

Example:

• Chart type: Bar

• Dimension: City

• Metric: Listings

3. Understand chart limitations

Each chart type supports specific data combinations.

Common limitations:

• Pie charts:

  • One dimension

  • One metric

• Line charts:

  • Often require a time-based dimension

• Some charts:

  • Limit the number of metrics

If a combination is not supported, options may be unavailable or the chart may not render correctly.

Best practices

Do

• Use clear and consistent column headers

• Structure your sheet as a simple table

• Choose the chart type first, then match your data to it

• Focus on relevant real estate metrics (price, listings, size)

Don’t

• Don’t mix text and numbers in one column

• Don’t overload charts with too many metrics

• Don’t use pie charts for complex comparisons

Summary

Creating charts in Storyblok involves:

1. Adding the DV Dashboard

2. Connecting a Google Sheet

3. Syncing data

4. Selecting a chart type

5. Choosing matching dimensions and metrics

Following this order ensures your chart works correctly and communicates your data clearly.