BloX Template: Indicators With Sparkline

[intapiuser]

Introduction

In many use cases, the most current state of your KPI is as important as the trend of that KPI over time (for example, the trend of stock price, impressions or reach of your social media campaigns, etc), so you want to show both an indicator and a sparkline chart next to it.

Creating multiple indicator and line chart widgets is not the most efficient way to implement this requirement considering the performance (multiple widgets and queries) and the complexity of the UI design (fonts size, layout etc).

The Indicators with Sparklines template allows you to implement this requirement easily using BloX. This template is structured in 3 columns, one for the sparkline (shows history of the value), one for the indicator (shows the current value), and one for the name of the KPI.

Installation Instructions

1. Download the template. Change the extension from txt to json
2. Import the template and choose the downloaded file.

3. Refresh your browser.
4. Create a new Blox Widget and open the Templates menu under the design panel.

You should now be able to see and choose the new template.

If you cannot see the template in the All Templates menu, please restart the Sisense.Blox service on your Sisense server.

5. Populate the Items and Values panels with relevant fields and aggregations. Please note that any change in panel item names should be reflected in the card editor.

In Items, add the date column.

In Values, add two columns for each KPI: one column for the unfiltered KPI to show the trendline, e.g. SUM(Impressions), and another column for the current value of the KPI using measured value, e.g. (SUM(Impressions), Date) where Date is set to Today.

Technical Notes

CAROUSEL & CAROUSEL BUTTON

The "showCarousel" parameter should always be set to True, otherwise, the entire block will be repeated vertically for all the different dates in the data (all the numbers will be exactly the same). To remove the carousel button, please use this widget script below.

widget.on('ready', function(sender, ev){
 
 //remove carousel button
 $('.carousel-button', element).remove();
 
});

COLORS

To modify the color of the sparkline, search for this piece of code in the Editor. You can then modify the line-color, fill-color, and point-color. You can also modify other parameters such as the width of the graph.

<span class='blox-sparkline' type='line' line-color='#3a5694' width='220' height='40' line-width='3' fill-color='#c6d8f8' point-color:'#28467a'>{spark:Organic}</span>

To change the color of the fonts, search for this piece of code in the Editor. You can then modify the color paramater.

"style": {
    "color": "#395795"
}

PDF EXPORT

This template works with PDF Export.

To hide the carousel arrow buttons:

place below the "showCarousel": true,

"carouselAnimation": {
"showButtons": false
},