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 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…
No comments yet. Log in to reply on the Fediverse. Comments will appear here.