Documentation Index Fetch the complete documentation index at: https://docs.omni.co/llms.txt
Use this file to discover all available pages before exploring further.
A row in the Markdown table corresponds to a row in the results.
Setup These charts use the Mustache iterator syntax to draw a chart for each row in the results. Your query should have a column for each bar that you want to display and then a calculation column for each bar that determines the height of each bar. The calculation in this example calculates the bar height as a percentage of the total for all the traffic sources. Adjust your calculation as needed for different analyses, but make sure you use the % formatting on the calculation column.
The following table explains each field used in the example, including the calculation formulas.
Col Name Description or formula Purpose A State Groups query field used to make cute little badges in each row B State query field main label for the row C Events Count query field Total events used in table for displaying and to calculate denominator for bar height D Adwords query field Blue bar E Adwords % (calc_7) =D1 / C1 % fill for blue bar (make sure to format as %) F Facebook query field Yellow bar G Facebook % (calc_8) =F1 / C1 % fill for yellow bar (make sure to format as %) H Email query field Pink bar I Email % (calc_9) =H1 / C1 % fill for pink bar (make sure to format as %) J Organic query field Teal bar K Organic % (calc_10) =J1 / C1 % fill for teal bar (make sure to format as %) L YouTube query field Orange bar M YouTube % (calc_11) =L1 / C1 % fill for orange bar (make sure to format as %)
Example code < style > article .fancy-table { --color-adwords : 41 , 139 , 229 ; --color-email : 247 , 181 , 78 ; --color-facebook : 255 , 98 , 145 ; --color-organic : 29 , 185 , 185 ; --color-youtube : 255 , 133 , 21 ; --bar-height : 40 px ; --color-source : 0 , 0 , 0 ; --color-opacity : 0.1 ; --color-west : 80 , 144 , 70 ; --color-south : 79 , 89 , 218 ; --color-midwest : 210 , 66 , 58 ; --color-northeast : 176 , 76 , 186 ; & . adwords { --color-source : var ( --color-adwords );} & .email { --color-source : var ( --color-email );} & .facebook { --color-source : var ( --color-facebook );} & .organic { --color-source : var ( --color-organic );} & .youtube { --color-source : var ( --color-youtube );} & .west { --color-tag : var ( --color-west ); } & .south { --color-tag : var ( --color-south ); } & .midwest { --color-tag : var ( --color-midwest ); } & .northeast { --color-tag : var ( --color-northeast ); } & ul { list-style : none ; margin : 0 ; padding : 0 ; & li { padding : 0 ; margin : 0 ; } } } article .fancy-table ul .source-legend { display : flex ; flex-direction : row ; gap : 16 px ; padding : 0 0 8 px 12 px ; & li { display : flex ; flex-direction : row ; gap : 4 px ; align-items : center ; color : var ( --color-text1 ); font-size : var ( --font-xs ); & span { display : block ; width : 12 px ; height : 12 px ; background-color : rgb ( var ( --color-source )); } } } article .fancy-table table { width : 100 % ; border-collapse : collapse ; & thead { display : none ;} & th { white-space : nowrap ; } & td { padding-block : 12 px ; padding-inline : 12 px ; border-bottom : 1 px dotted var ( --color-border2 ); vertical-align : bottom ; } & td .metrics , & th .metrics { text-align : right ; } & td .metrics { font-size : var ( --font-md ); } & td .summary ul { display : flex ; flex-direction : column ; gap : 8 px ; justify-content : center ; & . type span { display : inline-block ; background : rgba ( var ( --color-tag ), 0.1 ); padding : 0 px 2 px ; border-radius : 3 px ; font-size : var ( --font-xxs ); text-transform : uppercase ; color : rgb ( var ( --color-tag )); } & .title { color : var ( --color-text4 ); font-size : var ( --font-md ); } } & td .sources ul { display : flex ; flex-direction : row ; height : var ( --bar-height ); gap : 2 px ; justify-content : center ; & li { width : 8 px ; height : 100 % ; background-color : rgba ( var ( --color-source ), var ( --color-opacity )); border-radius : 2 px 2 px 0 0 ; display : flex ; flex-direction : column-reverse ; position : relative ; --tooltip-width : 100 px ; --tooltip-height : 36 px ; --translate-tip : calc ( -1 * var ( --tooltip-width )); & span . bar { display : block ; width : 100 % ; height : 1 % ; border-radius : 2 px 2 px 0 0 ; background-color : rgb ( var ( --color-source )); } & span .tooltip-content { visibility : hidden ; opacity : 0 ; position : absolute ; z-index : 1 ; bottom : 100 % ; left : calc ( 0 % - 8 px ); top : calc ( 50 % - var ( --bar-height ) / 2 ); transform : translateX ( var ( --translate-tip )); height : var ( --tooltip-height ); width : var ( --tooltip-width ); background-color : #333 ; color : white ; text-align : center ; border-radius : 5 px ; padding : 4 px 6 px ; font-size : 10 px ; font-weight : normal ; transition : opacity 0.15 s ; box-shadow : -2 px 2 px 8 px rgba ( 0 , 0 , 0 , 0.2 ); line-height : 1.4 ; word-wrap : break-word ; white-space : normal ; border-left : 8 px solid rgb ( var ( --color-source )); } & span .tooltip-content::after { content : "" ; position : absolute ; top : Calc ( 50 % - 5 px ); right : -5 px ; margin-right : -5 px ; border-width : 5 px ; border-style : solid ; border-color : #333 transparent transparent transparent ; transform : rotate ( -90 deg ); } } & li :hover .tooltip-content { visibility : visible ; opacity : 1 ; } } } </ style > < article class = "fancy-table" > < ul class = "source-legend" > < li class = "adwords" >< span ></ span > Adwords </ li > < li class = "email" >< span ></ span > Email </ li > < li class = "facebook" >< span ></ span > Facebook </ li > < li class = "organic" >< span ></ span > Organic </ li > < li class = "youtube" >< span ></ span > YouTube </ li > </ ul > < table > < thead > < tr > < th class = "summary" > Article </ th > < th class = "metrics" > Total Views </ th > < th class = "sources" > Source </ th > </ tr > </ thead > < tbody > {{#result}} < tr > < td class = "summary" > < ul > < li class = "type {{events.state_groups.raw}}" >< span > {{events.state_groups.value}} </ span ></ li > < li class = "title" > {{events.state.value}} </ li > </ ul > </ td > < td class = "metrics" > {{events.count.value}} </ td > < td class = "sources" > < ul > < li class = "adwords" > < span class = "bar" style = "height: {{calc_7.value_static}}" ></ span > < span class = "tooltip-content" > {{fields.events.count_adwords.label}} < br /> {{events.count_adwords.value}} • {{calc_7.value_static}} </ span > </ li > < li class = "email" > < span class = "bar" style = "height: {{calc_8.value_static}}" ></ span > < span class = "tooltip-content" > {{fields.events.count_email.label}} < br /> {{events.count_email.value}} • {{calc_8.value_static}} </ span > </ li > < li class = "facebook" > < span class = "bar" style = "height: {{calc_9.value_static}}" ></ span > < span class = "tooltip-content" > {{fields.events.count_adwords.label}} < br /> {{events.count_adwords.value}} • {{calc_9.value_static}} </ span > </ li > < li class = "organic" > < span class = "bar" style = "height: {{calc_10.value_static}}" ></ span > < span class = "tooltip-content" > {{fields.events.count_organic.label}} < br /> {{events.count_organic.value}} • {{calc_10.value_static}} </ span > </ li > < li class = "youtube" > < span class = "bar" style = "height: {{calc_11.value_static}}" ></ span > < span class = "tooltip-content" > {{fields.events.count_you_tube.label}} < br /> {{events.count_you_tube.value}} • {{calc_11.value_static}} </ span > </ li > </ ul > </ td > </ tr > {{/result}} </ tbody > </ table > </ article >
