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?
Solved! Go to 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:
Hi Team,
Any suggestions/ideas for this layout/design?
Regards!
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:
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 ;;
}
}
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> ;;
}
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!