Skip to main navigation Skip to main content Skip to social media links Skip to footer navigation
Sign In

Datorama Tips & Tricks: Custom Visualizations

Blair Wang

This post is part of our Tips & Tricks series, highlighting some of Datorama’s most interesting or useful features. This series features guest authors from our Client Success team, who are hard at work every day helping Datorama customers with everything from data prep to visualization.

This post is by Blair Wang, Client Success Executive.

Datorama comes with a huge collection of widgets out of the box for you to use on your dashboards. However, you might have some very specific ideas about how you want to visualise your data, or you may simply want to explore more possibilities. For situations like this, you can utilize Custom Visualisations.

What do Custom Visualisations look like?

Here are some exciting examples of what you can do:

Sunburst chart

Hourly heatmap

Pacing bars

Where do I get Custom Visualisations from?

One of the widgets that come with Datorama out of the box is called the Rich Text widget.

The Rich Text widget allows you to make a query –same as any other widget, like the Table widget– and then load the results of that query in a variety of formats.. For example, you can write {Query.Impressions} in the text that, when displayed shows your total impressions straight from your data source. (For more Rich Text Widget Templates, visit our support knowledge base.)

However, these Templates are really just skins for individual figures. Custom Visualisations take this to the next level by introducing some computer programming logic. The specific language involved is JavaScript.

How can I plug the Datorama data into my JavaScript?

This section assumes knowledge of JavaScript.

In your JavaScript, you can access the query data using {Query.JSON}. As an example to get started, you can set up a blank Rich Text Widget, enable Use Custom CSS/JS in the widget’s settings (under Custom CSS/JS), and then add the following code:

The second image shows Google Chrome developer console, where we can see an object with two components: headers and rows. The headers are just the list of fields (dimensions and measurements) of the query, and the rows are each resulting row of the query. Now you can use your classic JavaScript syntax to manipulate the dataset as you see fit for the widgets that you are building.

By making use of CDNs (Content Distribution Networks), you can even insert external libraries. Some of the best ones are Underscore (for sorting and filtering the dataset), jQuery (for manipulating components of a page/widget), Bootstrap (for buttons and dropdown boxes), and of course, graphing libraries like d3 and plotly.

The potential ways to visualize your data are endless– and most importantly, can be tailored to your use case. For assistance exploring this feature, feel free to reach out to your Account Manager.

Make sure you stay up-to-date with all the latest AdTech, MarTech, Data and Datorama-related news by following us on TwitterFacebook and LinkedIn.

Marketing Intelligence Report

Marketing Intelligence Report

Explore the first edition the Marketing Intelligence Report for an inside look into how the new growth imperative is affecting marketers across every industry.

Download Now