Cloud Function to generate SVG Sparklines

Zach Leat recently created a cloud function that dynamically generates sparklines. Under the hood sits the the sparkline-svg package to generate the SVG. The datapoints themselves can be passed in via the URL. Image URLs have the formats: /[height]x[width]/[values]/ /[height]x[width]/[values]/[color]/ The code is meant to be deployed as a Netlify Serverless Function. Every Fire needs …

Continue reading “Cloud Function to generate SVG Sparklines”


This content originally appeared on Bram.us and was authored by Bramus!

Zach Leat recently created a cloud function that dynamically generates sparklines. Under the hood sits the the sparkline-svg package to generate the SVG. The datapoints themselves can be passed in via the URL.

Image URLs have the formats:

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

The code is meant to be deployed as a Netlify Serverless Function.

Every Fire needs a Sparkline →
Sparkline API (GitHub) →

? This reminded me of Spark SVG which I covered back in 2013.

<embed src="https://sparksvg.me/line.svg?0,4,7,10,8,12,9,7,3,0" type="image/svg+xml">

It’s an SVG file with a snippet of JS contained inside it, a technique originally developed by Stuart Langridge. On load it will draw the sparkline, using the values as passed in the via the querystring.

Upside with this approach is that you can host this SVG file on your own servers, without needing a cloud function. Downside however is that you need to include the SVGs via <embed> — to allow script execution — and require JS on the client to show them properly.


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2021-09-16T19:17:51+00:00) Cloud Function to generate SVG Sparklines. Retrieved from https://www.scien.cx/2021/09/16/cloud-function-to-generate-svg-sparklines/

MLA
" » Cloud Function to generate SVG Sparklines." Bramus! | Sciencx - Thursday September 16, 2021, https://www.scien.cx/2021/09/16/cloud-function-to-generate-svg-sparklines/
HARVARD
Bramus! | Sciencx Thursday September 16, 2021 » Cloud Function to generate SVG Sparklines., viewed ,<https://www.scien.cx/2021/09/16/cloud-function-to-generate-svg-sparklines/>
VANCOUVER
Bramus! | Sciencx - » Cloud Function to generate SVG Sparklines. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/16/cloud-function-to-generate-svg-sparklines/
CHICAGO
" » Cloud Function to generate SVG Sparklines." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/09/16/cloud-function-to-generate-svg-sparklines/
IEEE
" » Cloud Function to generate SVG Sparklines." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/09/16/cloud-function-to-generate-svg-sparklines/. [Accessed: ]
rf:citation
» Cloud Function to generate SVG Sparklines | Bramus! | Sciencx | https://www.scien.cx/2021/09/16/cloud-function-to-generate-svg-sparklines/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts