Skip to main content

KPI table

The code for this example can be used in the Markdown visualization to create a table of KPIs. In this example, each column is specific to a different source (ex: email).

Example code​

<table>
<thead>
<tr>
<th>Display</th>
<th>Email</th>
<th>Facebook</th>
<th>Organic</th>
<th>Search</th>
</tr>
</thead>
<tbody>
<tr>
<td>**{{result.0.Display.users.count.value}} Users**<br>
<ChangeArrow current="{{result.0.Display.users.count.value_static}}" comparison="{{result.1.Display.users.count.value_static}}"></ChangeArrow> (last month {{result.1.Display.users.count.value}})</td>
<td>**{{result.0.Email.users.count.value}} Users**<br>
<ChangeArrow current="{{result.0.Email.users.count.value_static}}" comparison="{{result.1.Email.users.count.value_static}}"></ChangeArrow> (last month {{result.1.Email.users.count.value_static}})</td>
<td>**{{result.0.Facebook.users.count.value}} Users**<br>
<ChangeArrow current="{{result.0.Facebook.users.count.value_static}}" comparison="{{result.1.Facebook.users.count.value_static}}"></ChangeArrow> (last month {{result.1.Facebook.users.count.value_static}})</td>
<td>**{{result.0.Organic.users.count.value}} Users**<br>
<ChangeArrow current="{{result.0.Organic.users.count.value_static}}" comparison="{{result.1.Organic.users.count.value_static}}"></ChangeArrow> (last month {{result.1.Organic.users.count.value}})</td>
<td>**{{result.0.Search.users.count.value}} Users**<br>
<ChangeArrow current="{{result.0.Search.users.count.value_static}}" comparison="{{result.1.Search.users.count.value_static}}"></changearrow> (last month {{result.1.Search.users.count.value}})</td>
</tr>
<tr>
<td> <Sparkline field="Display.users.count" color="cornflowerblue" reverse="true" height="80%"></Sparkline></td>
<td> <Sparkline field="Email.users.count" color="MediumSeaGreen" reverse="true" height="80%"/></td>
<td> <Sparkline field="Facebook.users.count" color="gold" reverse="true" height="80%"/></td>
<td> <Sparkline field="Organic.users.count" color="darkorange" reverse="true" height="80%"/></td>
<td> <Sparkline field="Search.users.count" color="crimson" reverse="true" height="80%"/></td>
</tr>
</tbody>
</table>