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
},

[Jake_Raz]

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.

What other parameters are there for the Sparkline? You mention a few above, and there's a few that show up automatically when you use the "Indicator Sparkline" template. Some slightly different ones show up if you instead copy from the Sparkline Chart "snippet" (e.g. min-point-color and max-point-color).

I'm trying to figure out what else we can modify or customize with the Sparkline. For instance, can we change the vertical scale of the chart? Like, not the actual size on the screen, but the axis of the chart, like what the minimum Y value is. By default it shows the lowest value in the chart as the minimum, but what if we want the chart to always be anchored to zero for the minimum?

Also, what values do the different parameters support? One of them is type, which by default is set to "type='line'". I noticed you can change that to "type='bar'" to get a bar chart instead. What other chart types are supported? I tried "column" and "area" but those didn't do anything. After googling around a bit, I also saw something about a "winloss" chart but that value didn't work either. Are "line" and "bar" the only supported values here, or are there more? If so, where is this documented? Is there a reference of some sort that I can consult? (Note: I already checked the Sisense BloX Reference but the entry on Sparkline Charts only mentions the overall <span> element, and does not explain any of the parameters within.)

EDIT - Here's what I've surmised from combining the various different sources (template code, code snippet, examples of code on various pages...)

Parameter	Example	My notes
fill-color	fill-color='#B2D4DF'	For line charts, this is the color of the area underneath the line. Not sure if this applies to bar charts.
height	height='50'	Controls the height of the sparkline element itself (how tall the chart is)
line-color	line-color='#117899'	Color of the line on the sparkline. Not sure if this applies to bar charts.
line-width	line-width='3'	How thick the line on the sparkline is. Not sure if this applies to bar charts.
point-color	point-color='#117899'	Unclear what this controls. Judging by the name you would think this sets the default color for all points, but that's not the case. Instead, it seems to only affect the color of the last point on the chart? Like, not the min or max, but just the right-most point.
max-point-color	max-point-color='#000000'	Controls the color of the max point (highest value in chart)
min-point-color	min-point-color='#000000'	Controls the color of the min point (lowest value in chart)
type	type='line'	Main parameter that controls what kind of graph is used for the sparkline. Default seems to be 'line', but you can also use 'bar' for a vertical bar chart.
width	width='200'	Controls the width of the sparkline element itself (how long the chart is)

I'm wondering if there's more possible parameters, though, given the other elements in the sparkline. For instance, is it possible to set the formatting for hover-over text? Or, when you hover over a point, the point on the line is highlighted a certain color (seems to be green by default), and there's also a vertical line that appears and intersects with the point (seems to be red by default). Can you change these? Can these perhaps be changed in a different area, like in the "Configuration" tab (i.e. where all the CSS stuff is)?

Also, since you can change the chart 'type' from line to bar, I'm wondering if there are entirely different parameters for bar charts, since things like "line-width" wouldn't apply.