Using HTML and Liquid to create 'progress' bars inside a Table Vis

[shiggins]

There are a number of great use cases for being able to have a progress bar or a way to visually represent when a project moves from one stage to the next. With Looker we can achieve this using the html parameter. Thanks to @Bryan_Weber for doing all the heavy lifting designing this approach.

In Looker, the html parameter provides a lot of flexibility to allow for more customised rendering within visualisations. Before Conditional Formatting, using Liquid with html was used widely to highlight variances in data. Since we’ve expanded our formatting options, it’s used a little less, but still has some very powerful applications as shown by @jax1 in his article on Great Uses For Parameter Fields.

Below, I’ve provided an example of how to generate a progress bar using the html parameter and some (semi) real-world applications.

Example
In this scenario, imagine we run a website development company and each webpage is a project our staff is working on. When approaching key regulatory compliance deadlines, we would likely want to see how far along each website is on individual pages etc.

Single Record for one website:

Table for all websites:

Here is the example LookML of one of the shown Measures.

  measure: percent_complete {type: number sql: 1.0*(${pages_finished});;
        html: <div style="float: left
          ; width:{{ value | times:100}}%
          ; background-color: rgba(0,180,0,{{ value | times:100 }})
          ; text-align:left
          ; color: #FFFFFF
          ; border-radius: 5px"> <p style="margin-bottom: 0; margin-left: 4px;">{{ value | times:100 }}%</p>
          </div>
          <div style="float: left
          ; width:{{ 1| minus:value | times:100}}%
          ; background-color: rgba(0,180,0,0.1)
          ; text-align:right
          ; border-radius: 5px"> <p style="margin-bottom: 0; margin-left: 0px; color:rgba(0,0,0,0.0" )>{{value}}</p>
          </div>
      ;;
} 

NOTE: The important part of this is really the html parameter. The type and sql can be adjusted, however some of the Liquid may also need some tweaking if you’re not dealing with percentages and rather a volume-to-goal calculation using integers.

One of my favourite aspects about this is that the rendering still permeates through other vis types such as Maps so you can quickly check up on individual offices or regions on how they’re doing:

Or just find out if that trip I’m taking next week is likely to arrive on time:

I guess we’ll postpone dinner…

Check out our docs pages below for more uses of HTML and Liquid:
Liquid Variables
HTML

And some excellent Discourse articles on similar topics:
Conditional Formatting Using HTML
All Things Liquid