Every Fire Needs a Sparkline

The Eleventy API ecosystem is growing. It started with a screenshot service. Now, we have a very simple service to generate SVG images for sparklines. This is using the sparkline-svg package from CharlesStover.

My version is running on https://v1.sparkline.11ty.dev/ using the same versioning via Netlify Branch Subdomains strategy as the screenshot service.

URLs support the following formats:

/[height]x[width]/[values]/
/[height]x[width]/[values]/[color]/

Deploy your own #

Demos #

You can also view this on the sidebar of this very website (at larger viewport sizes).

Generating the values from an Eleventy collection #

eleventyConfig.addLiquidFilter("getYearlyPostCountList", (posts, startYear = 2007) => {
  let years = [];
  for(let year = startYear; year <= (new Date).getFullYear(); year++) {
    let count = posts.filter(function(post) {
      return post.data.page.date.getFullYear() === parseInt(year, 10);
    }).length;

    years.push(count);
  }
  return years.join(",");
});

via source code on zachleat.com

Usage: #

<img src="https://v1.sparkline.11ty.dev/120x30/{{ collections.posts | getYearlyPostCountList }}/" width="120" height="30" alt="Frequency of posts written every year on zachleat.com">