KPI/Visualization design in below format

[DickyMohanty]

Hi All,

I have already a KPI/Measure in my Views, to use in Data section/Visualization in Explore. I can try adding that as a ‘Single Value’ in visualization section in Explore. 

I need to show/customize that as a Look like shown in the attached image format. Do I need to use any other Visualization charts or any other out of box components to achieve such ? 

Can some please help a novice like me, how to achieve in such format? Any sample Looks or Tiles available to refer? 

[DickyMohanty]

Hi Team,

Any suggestions/ideas for this layout/design? 

Regards!

[brecht · Accepted solution]

You can do this with a combination of some html on your measure and selecting a single value viz.

Sample LookML:

measure: example {
type: count
html: 
<div style="border-radius: 10px; background-color: #d3363d; color: #fff;">
    <div style="font-size: 4rem; display: inline-block;">{{ value }} (20%)</div>
    <div style="display: inline-block;">
    <p style="font-size: 1.5rem;"><strong>Your latest rebate status</strong></p>
    <p style="font-size: 1.5rem;">(Next tier increases to 22%)</p>
    </div>
</div> ;;
}

Result:

[DickyMohanty]

Thank you @brecht .

This helps a lot for a novice like me. Gives me a good learning. Any good learning portals to learn more about these HTML usage in LookML scripts? 

Also What if - I want to have my numbers ($1234, 20%, 22% etc.) dynamically changed as per selections, how those can be incorporated in the HTML? 

I already have a KPI build which can show the $1234. Lets say its the 20% of the total sales. So 20% is the dynamic percentage as per scale range and would show. 

22% is the next number in the scale range also. 

A derived table, I have used like this below - 

view: rebate_table {
  derived_table: {
    sql:
      SELECT
        0 AS low,
        500 AS high,
        20 AS percent
      UNION ALL
      SELECT 501, 1000, 22
      UNION ALL
      SELECT 1001, 5000, 24 ;;
  }

  dimension: low {
    type: number
    sql: ${TABLE}.low ;;
  }

  dimension: high {
    type: number
    sql: ${TABLE}.high ;;
  }

  dimension: percent {
    type: number
    sql: ${TABLE}.percent ;;
  }
}
 

[brecht]

In general, any inline styling on html tags works I believe. So common css will work, but you won’t be able to use pseudo-classes and such.

To reference other fields on your tile, you can use the {{ other_field._value }} syntax,  e.g:

measure: example {
type: count
html: 
<div style="border-radius: 10px; background-color: #d3363d; color: #fff;">
    <div style="font-size: 4rem; display: inline-block;">{{ value }} ({{ percent._value }})</div>
    <div style="display: inline-block;">
    <p style="font-size: 1.5rem;"><strong>Your latest rebate status</strong></p>
    <p style="font-size: 1.5rem;">(Next tier increases to {{ min._value }})</p>
    </div>
</div> ;;
}

[DickyMohanty]

Thank you @brecht , for the support. 

 I will continue working as guided, and will let you know for any findings. 

Meanwhile, can you also help me with this query in this thread: 

https://community.looker.com/lookml-5/calculate-week-days-days-elapsed-and-days-remaining-for-curren...

Regards!