In this article, you will find the following sections:
Example Klip
Download the sample Klip for examples discussed below. You must run it in Klipfolio Dashboard 5.5 or later.
Important Notes
- Sparkline charts are supported in Klipfolio Dashboard version 5.1 and later.
- Depending on the version of Klipfolio Dashboard you are running, the data source from which the chart is generated can be in one of the 2 formats. See the Expected data format article for details.
Overview
- Use type: graph and format: "sparkline" to generate a sparkline. (See example 1)
- Use format: "range(x,y)" to specify the sparkline to be drawn within the borders with the bottom-most value at x and the top-most at y. Note, however, that if the data precedes or exceeds the specified range, those data values will be used as the range. (See example 2)
- There are many format options that can be used for the sparkline. See examples below for available values.
- When using multiple values for format, the order in which they appear is not restricted. However, be sure to list them all with commas with no spaces, in a set of double-quotes.
- Use maxwidth to specify the maximum width of the column.
- The default height of the chart is height: 1, which is the height of one line. The height may be set to 2 or 3 to span 2 or 3 lines within each item, respectively. In the screenshots below, height: 2 is used.
- The colours are predetermined by the skin and its hue and cannot be specified through the Klip.
Expected data format
See the Expected data format article for details.
Examples
Regardless of how the data source is provided to the chart, the available formatting options are the same.
1. Simple sparkline
type: graph;
itemcol: 13;
format: "sparkline";
2. Using a range
In this column, the range is specified to
-100 as the bottom and
100 as the top of the charts. This is why the sparklines in this column are flatter.
type: graph;
itemcol: 14;
format: "sparkline,range(-100,100)";
3. Points
type: graph;
itemcol: 15;
format: "points";
4. Sparkline with points
You can indicate the individual data points in a sparkline by adding
points.
type: graph;
itemcol: 16;
format: "sparkline,points";
5. With colour points
This one is just like 4 above, but with the points more highlighted.
type: graph;
itemcol: 17;
format: "sparkline,points,strong";
6. With end points
Ends of the sparkline are highlighted.
type: graph;
itemcol: 18;
format: "sparkline,endpoints";
7. With high and low points
You can specify
highpoints and
lowpoints together or just one or the other. All of the highest/lowest values are highlighted if there is more than one in the collection.
type: graph;
itemcol: 19;
format: "sparkline,highpoints,lowpoints";
8. With a reference line
A reference line at 0 can be useful when there are negative and positive data values as in this example, but it can be set to any value.
type: graph;
itemcol: 20;
format: "sparkline,refline(0)";
9. With a reference band
To give an additional context, a reference band can be drawn horizontally from value
a to value
b.
type: graph;
itemcol: 20;
format: "sparkline,refband(30,70)";
10. With periods
Here, you see a band from the beginning of the period (0) to the 2nd, another from the 5th to the 7th, and one from the 10th to the 11th.
type: graph;
itemcol: 22;
format: "sparkline,period(0,2,5,7,10,11)";
11. With area
The area from the bottom of the graph to the sparkline is filled.
type: graph;
itemcol: 23;
format: "sparkline,area";
12. Combination 1
The following graphs use combinations of the above options:
type: graph;
itemcol: 24;
format: "sparkline,area,points";
13. Combination 2
type: graph;
itemcol: 25;
format: "sparkline,area,endpoints";
14. Combination 3
type: graph;
itemcol: 26;
format: "sparkline,area,refline(0)";
