visualization

Usage

visualization:{  id:"unique-id"  label:"Visualization Label"  url:"visualization_url"  sri_hash:"SRI hash"  dependencies: ["dependency_url_1","dependency_url_2"]  file:"visualization_file_path"}
Hierarchy
visualization
Default Value
None

Special Rules
Thevisualization must have either aurl or afile parameter, but not both

Definition

Thevisualization parameter adds a custom visualization to your LookML project that users can access from theVisualization tab in the project's Explores. The custom visualization must be defined in a JavaScript file, which can be included in your LookML project files, or hosted elsewhere.

Thevisualization parameter has the following subparameters:

ParameterDescription
idSpecifies a unique identifier for the visualization that is displayed in theVisualizations page of Looker'sAdmin menu.
labelProvides the label for the visualization that is displayed in theVisualization tab of your project's Explores and in theVisualizations page of Looker'sAdmin menu.
urlTheurl parameter provides the URL to the visualization's JavaScript file, if the file is stored on a server outside the Looker instance. Instead of using theurl parameter, you candrag and drop the file into the Looker IDE and then use thefile parameter to point to the file.

NOTE: The application must have either aurl parameter or afile parameter, but not both.
sri_hashThe SRI hash is used only when the visualization's JavaScript file is specified with theurl parameter. If the site hosting your custom visualization code uses asubresource integrity (SRI) hash for verification purposes, enter the SRI hash in thesri_hash field.
dependenciesProvides a comma-separated list of dependency URLs required to load the visualization.
fileSpecifies the path to a JavaScript file (with a.js extension) that defines the visualization. The path is relative to the project root. The example in the next column points to thecalendar-heatmap.js file in thevisualizations directory of the LookML project.

NOTE: The application must have either aurl parameter or afile parameter, but not both.

Example: Adding a custom visualization URL to your LookML project

One option for adding a custom visualization to your LookML project is to use the URL of a custom visualization file. For example, adding this LookML to a project's manifest file adds a multiple-value CDN custom visualization to the Looker project. This visualization is defined in a JavaScript file located on Looker's Marketplace:

visualization: {  id: "spider-marketplace-dev"  label: "Spider Viz"  url: "https://marketplace-api.looker.com/viz-dist/spider.js"  sri_hash: "oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"  dependencies: ["https://code.jquery.com/jquery-2.2.4.min.js","https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js","https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js","https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.min.js"]}

Once youcommit your changes anddeploy them to production, Looker displays the name of the custom visualization as an option in theVisualization tab of your project's Explores.

The visualization will also be listed on theVisualizations page in thePlatform section of Looker'sAdmin menu; see theAdmin settings - Visualizations documentation page for information.

Example: Adding a custom visualization file to your LookML project

Another option is to add the custom visualization JavaScript file to your LookML project using the Looker IDE:

  1. In the Looker IDE,drag and drop the JavaScript file that defines your custom visualization into your LookML project.
  2. Optionally,move the visualization file into a folder in the Looker IDE, orcreate a new folder for the visualization file.
  3. Click on the visualization file in the file browser panel to display the file contents, then clickSave to save the file.
  4. In the project'smanifest file, define the visualization parameters. For example, this LookML adds a radial gauge custom visualization to the Looker project. The visualization is defined in a JavaScript file located in thevisualizations directory of the LookML project:
  visualization: {  id: "radial_gauge"  label: "Radial Gauge"  file: "visualizations/radialgauge_v2.js"   }

  1. Commit your changes anddeploy them to production.

    You must deploy the visualization updates to see the customer visualization option in an Explore (saving the updates is not sufficient, even in Development Mode).

Once you have deployed your updates, Looker displays the name of the custom visualization as an option in theVisualization tab of your project's Explores.

The visualization is also listed on theVisualizations page in thePlatform section of Looker'sAdmin menu; see theAdmin settings - Visualizations documentation page for information.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-07-22 UTC.