Using visualization components to build a custom visualization

This tutorial is intended for experienced JavaScript developers and assumes some familiarity with functional programming techniques.

In this example, we begin with a query that is related to hypothetical quarterly sales information for some brands. First we will filter the query for specific brands and then pivot the results by sales quarter. See the following table for an example.

Results from a query for order counts by brand, with a pivot on the Orders Created Quarter dimension.

Then, we will use visualization components to build a custom visualization that shows how each brand's products have been trending over the past quarter. The result will be a new kind of visualization that is composed of a series of sparklines nested within a table, which looks like this example:

A custom-built visualization showing a table with a row for each brand, and an embedded sparkline visualization showing orders by quarter in each row.

Along with showing you how to create a custom visualization, this example demonstrates some best practices for working with the Looker API within a React application.

To build a customized visualization with Looker components, make sure your setup meets the requirements, and then perform the following steps:

  1. Build a query in an Explore and copy the qid value
  2. Pass the data to a custom visualization component
  3. Build out the CustomVis component
  4. Transform the normalized data
  5. Insert the transformed data into CustomVis
  6. Generate the custom visualization

Using visualization components to build a custom visualization is appropriate when the custom visualization is intended for an embedded application or extension. If you want to make the custom visualization available to Looker users across a Looker instance, follow the instructions on the visualization documentation page. If you want to develop a custom visualization and upload it to the Looker Marketplace, follow the instructions on the Developing a custom visualization for the Looker Marketplace documentation page.

Requirements

Before you start, a few elements are needed:

  • You must have access to a Looker instance.
  • Whether you're building in the extension framework or your own stand-alone React application, it is important to authenticate with Looker's API and have access to the Looker SDK object. Read about Looker API authentication or our extension framework for more information.
  • Make sure you have installed the Looker Visualization Components NPM package and the @looker/components-data