In the world of data visualization and reporting, having the flexibility to customize how data is presented is crucial. Handlebars, a powerful templating engine, provides this flexibility by allowing users to create dynamic and customizable templates. In this article, we'll explore what Handlebars is, and how you can use the Handlebar chart in Preset to create customized data visualizations.

What is Handlebars?

Handlebars is a simple templating language that allows you to generate HTML dynamically. It uses a template and an input object to produce a formatted HTML output. Handlebars is known for its simplicity and power, making it a popular choice for creating dynamic web content.

Key Features of Handlebars:

• Logic-less Templating: Handlebars is designed to be logic-less, meaning it keeps the templates clean and easy to understand by separating logic from design.
• Simple Syntax: The syntax is straightforward and easy to learn. It uses double curly braces ({{}}) to denote placeholders that will be replaced with values from the input object.

How to use Handlebars in Preset?

Use the Handlebars chart type as you do with any other visualization type:

Understanding the main two sections

If you already played with other chart types (especially the FEATURED ones), you’re already familiar with the DATA and CUSTOMIZE tabs in the Chart Builder:

The DATA Tab

Here you can configure the data that should be retrieved from your database. Similar to the Table Chart, the Handlebars chart allows you to run aggregations (with Metrics and Dimensions), or to just pull raw records from the dataset.

Let’s create an aggregated example using the Vehicle Sales dataset (from the examples DB connection) — use product_line as a dimension and SUM(sales) as your metric:

Clicking on UPDATE CHART returns a bullet list of arrays. Each array here is an actual row that was returned by the generated SQL query:

The dimension and metric names are also returned exactly as configured, so feel free to add labels with user friendly names (in case these aren’t defined at the dataset level):

Great, now let’s understand why we’re getting a bullet list, and how to change it.

The CUSTOMIZE Tab

This tab allows us to modify the Handlebars Template and the CSS Styles fields:

• The Handlebars Template field allows you to combine HTML with Handlebars templates and helpers to produce the desired visual result.
• The CSS Styles field allows you to apply CSS rules to these elements.

The reason you see all rows displayed as arrays in a bullet list is due to the default template value:

<ul class="data-list">
  {{#each data}}
    <li>{{stringify this}}</li>
  {{/each}}
</ul>

This code is a combination of HTML tags + Handlebars helpers.

HTML knowledge

We’re not going to cover HTML syntax and tags as part of this tutorial. If you’re not familiar with these concepts, we encourage you to take a short HTML course to understand how to create many different outputs using this “language”. Here is a good resource you can check before continuing with this tutorial.

Handlebars Helpers

Helpers in Handlebars are functions that you can call from within your templates to perform specific tasks. They help keep your templates clean and logic-less by moving the logic to helper functions. Preset ships the Handlebars chart with this collection of helpers, that can be used to perform many operations such as evaluation, comparison, modification, etc.

Let’s understand the two simplest helpers you will use the most:

1. {{#each data}} YourCode {{/each}}: The #each helper is used for iterating over arrays or objects. Preset uses the object data to store all the data displayed from your chart configuration (Do you remember that the other tab at the left of the Customize tab is named Data? Now you know why).
2. {{this.columname}} : The helper this. is used to access the objects inside your object data. Which are the objects you know exist inside your main object called data? Exactly, your columns. That’s why you will always use the column name with the this. helper (this.columnname) to let Preset know you want to call a specific column.

For example, we previously named two columns: Product_Type and Total_Sales. If you want to display all the values of your Total_Sales column you need to write something like this:

If you want to display both columns you will write something like this:

Nevertheless, the way the data is displayed is not the best. To fix this we need to add HTML code to those helpers depending on the way you want to display the data.

For instance, let's add a simple <li> tag:

But at this point, we know you have a lot of HTML knowledge, so let’s apply a table format instead:

As you see, we have changed the main class from a <ul> tag to a <table> tag and assigned a different class name (class=”data-table”). The main tag and class name assigned doesn’t matter as long as they follow the structure you are looking for.

Here you may think:

But it doesn’t look like a chart I'd love to share with people…

You are totally right, and this is because you need to write the CSS Style you want to apply to your chart.

CSS Styles

As we mentioned before with HTML, in order to effectively create amazing Handlebars charts, you need to have CSS knowledge as well. So to make the best charts in the world, we recommend you take a CSS course to help you achieve what you have in your mind. Here is an excellent free resource to start with.

Once you have CSS knowledge, you probably will want to apply styles like these:

And congratulations, you have created your first amazing Handlebars chart in Preset. In an upcoming post, we plan teach you how to create more complex charts using other Helpers and Styles you can apply to Preset.