Get Started Transforming Your Data in Snowflake

How to add custom visualization in Looker using javascript?

  • Looker FAQs
  • January 15, 2018

In Looker, there are two ways to add custom visualizations using Javascript:

  1. Adding a custom visualization for all projects
  2. Adding a custom visualization for a specific project

Adding a custom visualization for all projects:

  1. Expand the “Admin” panel and click on the “Visualizations” page under the Platform header.
  2. The Visualizations page will display all of the custom visualizations that are already added to your Looker instance.
  3. On the top left corner of the page, click on the Add Visualization button. This would take you to the New Visualization page. Fill in the following line items:
    1. ID field: This is the unique ID of the visualization, which will be defined in JavaScript.
    2. Label field: The name of the visualization will be displayed in the visualization menu in explore.
    3. Main field: The URL of the visualization’s main JavaScript file in the code repository.
    4. Subresource Integrity (SRI) hash: This Advanced Option lets you enter the SRI hash if the site hosting the custom visualization code uses a Subresource Integrity for verification purposes. 
    5. Dependencies field: This is also an advanced option that lets you enter the URLs of any files that the visualization JavaScript may depend upon. You can enter multiple URLs separated by commas, or you can add multiple URLs one at a time by clicking the “Add” button. 
  4. Once submitted, you should see the new visualization type in the visualization menu of an Explore, and you may use it like any other existing visualization type.

 

Adding a custom visualization for a specific project:

Alternatively, you can add a custom visualization to your LookML project by adding the following LookML to a project’s manifest file. Enter the same details as listed in point 3 of the above section (Adding a custom visualization for all projects):

visualization: {
  id: "demo-visualization-dev"
  label: "Demo Viz"
  url: "https://abc-test.com/viz-destination/demo.js"
  sri_hash: "xyz"
  dependencies: ["https://xyz/jquery.min.js","","",""]
}


Up Next:

Read How to show the column value labels without changing value label format for percent change in Looker?

 

More Resources We Think You Might Like

How to create a funnel chart visualization in Looker?

How to create a funnel chart visualization in L...

A Funnel chart is best used to understand the linear sequence of events, such as search movement ...

  • Looker FAQs
  • January 15, 2018
How to create a funnel chart visualization in Looker?

How to merge two Explores in Looker?

To merge two or more explores in Looker, we can use the Looker Merge functionality. We will creat...

  • Looker FAQs
  • January 21, 2018
How to create a funnel chart visualization in Looker?

How to comment on an entire block of code in th...

In Looker, one can follow the below instructions to comment a block of code in LookML editor:  Se...

  • January 22, 2018