How to create a funnel chart visualization in Looker?

How to do conditional formatting of color or images within table cells using HTML in Looker?

  • January 25, 2018

Please consider there is a field called order_status, which gives the status of each order. The possible values for order_status can be:

  • order_is_paid
  • order_is_shipped
  • order_is_returned

While Exploring the data, it may be helpful to display a separate background color for each status. This can be done in LookML using liquid syntax in the html: parameter of a dimension. 

Code Sample 1: 

dimension: order_status {
  type: string
  sql: ${TABLE}.o_status ;;
  html: {% if value == 'order_is_paid' %}
<p style="color: black; background-color: lightblue; font-size:100%; text-align:center">{{ rendered_value }}</p>
{% elsif value == 'order_is_shipped' %}
<p style="color: black; background-color: lightgreen; font-size:100%; text-align:center">{{ rendered_value }}</p>
{% else %}
<p style="color: black; background-color: orange; font-size:100%; text-align:center">{{ rendered_value }}</p>
{% endif %} ;;
}

In a Looker table this code will result as follows:

Now we can use the same syntax to add icons or images based on cell values. Consider the example below.

Code Sample 2: 

dimension: order_status { 
sql: ${TABLE}.o_status ;;
html: {% if value == 'order_is_shipped'%}
<p><img src="http://findicons.com/files/icons/573/must_have/48/check.png" height=20 width=20>{{ rendered_value }}</p>
{% elsif value == 'Processing' %}
<p><img src="http://findiimages.com/files/icons/1631/128/clock_blues.png" height=20 width=20>{{ rendered_value }}</p>
{% else %}
<p><img src="http://findiimages.com/files/icons/1692/129/cancel.png" height=20 width=20>{{ rendered_value }}</p>
{% endif %}  ;;
}

In a Looker table this code will result as follows:


Up Next:

Read How to add image from my local drive (or location) into Looker dashboard?

More Resources We Think You Might Like

How to create a funnel chart visualization in Looker?

How to add image from my local drive (or locati...

We can use the HTML parameter in the LookML of the Dimension / Measure to have Looker render the ...

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

How to create a rolling average with table calc...

Let’s understand this in two parts. Part 1: What is a Moving Average?  If we want to calcul...

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

How to change the order of stacks in a stacked ...

A stacked area chart is an extension of a basic area chart. It is used to group values of multipl...

  • January 25, 2018