Sparklines
Usage
<Sparkline InputData="60,0,16,25,48,45,1,0,6,37,78,79,90,90,91,99,80,0,40,0,0,56" GenerateText="true" SegmentWidth="30"> </Sparkline>
Parameters
GenerateText - Generate the optional text that displays the Start, Stop, Min and Max of the Sparkline.
SegmentWidth - The length or width of a segment of the Sparkline.
Project
Source Code
- GitHub - Blazor Sparklines
Font Name
- Sparklines.ttf
How the Sparkline is drawn using a font?
At its simplest, you can imagine the Sparkline font to consist of a series of characters representing dots (pixels) at different height. The input data is mapped to a series of different dots in the font to draw a Sparkline. This enables the use of a font and code without SVG or Canvas to draw a Sparkline on the web.
Font Map
- 0x0030 - Character representing a dot at 0 percent.
- .
- .
- .
- 0x0062 - Character representing a dot at 100 percent.
Algorithm
The following illustrates the algorithm for drawing the Sparkline using the font. The variable pcy0 is the current y value while pcy1 is the next y value. To draw the sparkline, the Bresenham algorith is used to calculate a series of dots required to draw a line from pcy0 to pcy1.
private string DrawSparkline(string inputLine)
{
.
.
.
for (int y = 0; y < inputDataArr.Length; y++)
{
if (y < inputDataArr.Length - 1)
{
double pcy0 = 0, pcy1 = 0;
double.TryParse(inputDataArr[y],out pcy0);
pcy0=pcy0 / max * 100;
double.TryParse(inputDataArr[y+1],out pcy1);
pcy1=pcy1 / max * 100;
if (y == 0)
{
//Start Dot
sparklineStr=drawLine(pcy0, pcy1, 0, sparklineStr,y);
}
else if (y + 1 == inputDataArr.Length - 1)
{
//End Dot
sparklineStr=drawLine(pcy0, pcy1, 1, sparklineStr,y);
}
else
{
//Use Bresenham Algorithm to draw the line
sparklineStr=drawLine(pcy0, pcy1, -1, sparklineStr,y);
}
}
}
return sparklineStr;
}
The CSS class values used by the Sparkline chart.
@font-face {
font-family: Sparklines;
src: url("Sparklines.otf") format("opentype");
}
.Sparklines {
font-weight: normal;
font-style: normal;
line-height: normal;
font-family: 'Sparklines', sans-serif;
font-size: 18px;
animation: pulse;
animation-duration: 0.01s;
animation-iteration-count: 1;
}
.Sparklines .segment{
color:#000000
}
.Sparklines .sparkline-start{
color:#ce4b99
}
.Sparklines .sparkline-stop{
color:#27A844
}
.Sparklines .text-start{
font-family:sans-serif;
font-size:18px;
color:#000000;
}
.Sparklines .text-stop{
font-family:sans-serif;
font-size:18px;
color:#000000
}
.Sparklines .text-min-max{
font-family:sans-serif;
font-size:18px;
color:#000000
}
@keyframes pulse {
0% {
font-size: 0px;
}
100% {
font-size: 18px;
}
}
Road Map
- Sparklines2X.ttf - A single font character is used to represent two dots. This will reduce the number of font characters that needs to be generated.
- SparklinesX.ttf - A single font character is used to represent a line segment at a specific angle.