A sparkline is a little line-graph with no axes or other unnecessary details. They're useful for getting quick understanding of what the data is showing.
They're also really easy to create programmatically.
This uses the SVG "polyline" which takes a list of x,y co-ordinate pairs. But can you spot the small problem?
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 124"> <polyline fill="none" stroke="#0074D955" stroke-width="3" points="12,48 83,84 154,79 226,90 297,79 369,65 440,78 512,80 583,88 654,12 726,56 797,92 869,93 940,97 1012,106"></polyline> </svg>
The SVG co-ordinate system has position 0,0 at the top left. Most graphics formats are like that. That's fine for our x value - but it means higher y values will appear lower on the graph.
Getting the x co-ordinate of each data point is easy. Take the width of the SVG image and divide it by the number of data-points.
The y co-ordinate is harder. The algorithm is:
- Find the height of the SVG.
- Find the maximum value in the data.
- Find the minimum value in the data.
- Divide the maximum value by the height of the graph.
- For each data point, either:
- To have the lowest value at the bottom of the graph, subtract the minimum from the value, then multiply by the ratio in (4).
- Or, to retain the gap between zero and the lowest value, multiply the value by the ratio in (4).
- The y co-ordinate is calculated by subtracting the value in (5) from the height in (1).
Here's some code showing how it works. I've added a little padding to the inside of the graph - you'll see why later:
PHP
// Max and min of views. $max_views = max( $svg_views_data ); $min_views = min( $svg_views_data ); $svg_data_length = sizeof( $svg_dates_data ) - 1; // SVG details for scaling. $svg_padding = 12; $svg_width_graph = 1000; $svg_width = $svg_width_graph + ( $svg_padding * 2 ); $svg_height_graph = 100; $svg_height = $svg_height_graph + ( $svg_padding * 2 ); // Calculate where each point should be. $x_per = $svg_width_graph / ( $svg_data_length ); $y_per = $svg_height_graph / $max_views; // Loop through the data. foreach ( $svg_views_data as $index=>$views ) { // X is from the left. $x_pos = intval( $x_per * $index ) + $svg_padding; // Y is from the top. $y_pos = $svg_height - intval( $y_per * $views ) - $svg_padding; // Add a point to the line. $polyline_points .= "{$x_pos},{$y_pos}\n"; } echo <<< SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 $svg_width $svg_height" class="chart"> <polyline fill="none" stroke="#F00" stroke-width="3" points="{$polyline_points}"/> </svg> SVG;
Suppose someone suggests stupidly simple sparklines suffer seriously so someone should supplement statistics several circles?
Using the same co-ordinates, we can place an SVG circle on top of the point. Give it a "title" attribute and you have a little bit of interactivity.
<circle cx="12" cy="48" r="5" fill="#0074D955"><title>4,707 Views</title></circle>
Here's how it looks (view source to understand how it is constructed).
Hover over any of those little circles and you'll see some pop-up text giving you information about that datapoint.
…that's it! If you have an array of data points, you can easily create a graph with no graphing library, no plugins, no 3rd party dependencies. Just super simple SVG.
10 thoughts on “Stupidly Simple SVG Sparklines”
@Edent instead of transforming every point could you apply a matrix transform to the root element to flip it upside down? Think it would still need to know the height of the view port but it would not need to be known outside the image so much
| Reply to original comment on mastodon.me.uk
@Edent Because I know you will be very pleased with it (and I am genuinely very impressed), I feel I have to tell you that using an /ʃ/ feels like cheating in a sentence of /s/-alliteration.
But I'm mainly replying just to say that I saw what you did there and it is indeed very impressive 🥰
| Reply to original comment on dataare.cool
@Edent As an aside: Chrome is surprisingly slow at showing those tooltips, but very cool; I didn't realise that was a thing one could do!
| Reply to original comment on dataare.cool
Worth noting that the title attribute is extremely inaccessible, so it shouldn't be relied upon for presenting information.
Good write-up from @aardrian.bsky.social explaining it (in the context of <abbr> but largely applies generally): adrianroselli.com/2024/01/usin...
| Reply to original comment on bsky.app
@Edent @emily_s This was my thought as well! It would require setting the right transform origin (SVG defaults to, you guessed it, top left of the image), which means doing calculations probably very similar to the ones you’re doing for the data points, but once you find the correct origin point, flipping the line should be relatively straightforward.
| Reply to original comment on mastodon.social
I use that for my "Books per Year" graph on my reading page! 😄 https://thomasrigby.com/reading/
Glen Mailer
I wonder if it would be simpler to draw it upside down and then apply a flip transform?
That sounds overly complicated. How about something like this?
viewBoxto something like this:minX minY (maxX-minX) (maxY-minY).transform="scaleY(-1)"at the polyline.I'm typing it down from memory, so some tweaks are still needed either in the
viewBoxor in thetransform. I'll leave such tweaking as an exercise for the reader.Likewise, adding a padding around it should be trivial by just adjusting the four values inside
viewBox.Nu nóg archiever!
| Reply to original comment
@Edent Tufte was quite clear when he coined the term that a "sparkline" was a graph *that fit in the space of words in a printed sentence*. He used examples of Galileo drawing the outlines of Saturn's silhouette (with rings bulging from its sides) in the middle of a paragraph of notes: clear enough to shrink down to the space that Saturn's own name could have taken up.
Now, he came up with different *types* of sparklines, one of which was sort of like the line diagram you give. But the point was about optimising the design so that they worked well in-line in paragraphs of text. He used some examples showing baseball statistics or stock prices printed right in the middle of sentences analysing events in those topics: a stock ticker or player's performance metrics could just be another word on the page.
A lot of people at the time wrote a lot of really huge and really ugly line graph libraries and called them "sparklines" to cash in on the buzz, but most of them missed the point entirely.
| Reply to original comment on teh.entar.net
More comments on Mastodon.