Tags: charts

15

sparkline

Thursday, November 9th, 2017

Frappé Charts

A JavaScript library for displaying charts’n’graphs.

Monday, September 25th, 2017

Constellation charts

Refresh to get a new randomly generated constellation.

A lovely bit of creative JS from Emily

Friday, April 22nd, 2016

chartd - responsive, retina-compatible charts with just an img tag

This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.

I bet it wouldn’t be too tricky to use this to make some sparklines.

Sunday, August 23rd, 2015

Making Charts with CSS | CSS-Tricks

What a lovely bit of progressive enhancement—styling data tables to display as charts.

Sunday, February 15th, 2015

Progressive Enhancement and Data Visualizations | CSS-Tricks

A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.

Saturday, October 4th, 2014

Tabletop Whale

Beautiful visualisations of science and nature.

Made with love by a designer with a molecular biology degree.

Sunday, January 6th, 2013

phuu/sparksvg · GitHub

Remember when I made that canvas sparkline script? Remember when Stuart grant my wish for an SVG version? Well, now Tom has gone one further and created a hosted version on sparksvg.me

Not a fan of sparklines? Bars and circles are also available.

Sunday, December 30th, 2012

Canvas sparklines

I like sparklines a lot. Tufte describes a sparkline as:

…a small intense, simple, word-sized graphic with typographic resolution.

Four years ago, I added sparklines to Huffduffer using Google’s chart API. That API comes in two flavours: a JavaScript API for client-side creation of graphs, and image charts for server-side rendering of charts as PNGs.

The image API is really useful: there’s no reliance on JavaScript, it works in every browser capable of displaying images, and it’s really flexible and customisable. Therefore it is, of course, being deprecated.

The death warrant for Google image charts sets the execution date for 2015. Time to start looking for an alternative.

I couldn’t find a direct equivalent to the functionality that Google provides i.e. generating the images dynamically on the server. There are, however, plenty of client-side alternatives, many of them using canvas.

Most of the implementations I found were a little heavy-handed for my taste: they either required jQuery or Processing or both. I just wanted a quick little script for generating sparklines from a dataset of numbers. So I wrote my own.

I’ve put my code up on Github as Canvas Sparkline.

Here’s the JavaScript. You create a canvas element with the dimensions you want for the sparkline, then pass the ID of that element (along with your dataset) into the sparkline function:

sparkline ('canvasID', [12, 18, 13, 12, 11, 15, 17, 20, 15, 12, 8, 7, 9, 11], true);

(that final Boolean value at the end just indicates whether you want a red dot at the end of the sparkline).

The script takes care of normalising the values, so it doesn’t matter how many numbers are in the dataset or whether the range of the numbers is in the tens, hundreds, thousands, or hundreds of thousands.

There’s plenty of room for improvement:

  • The colour of the sparkline is hardcoded (50% transparent black) but it could be passed in as a value.
  • All the values should probably be passed in as an array of options rather than individual parameters.

Feel free to fork, adapt, and improve.

The sparklines are working quite nicely, but I can’t help but feel that this isn’t the right tool for the job. Ideally, I’d like to keep using a server-side solution like Google’s image charts. But if I am going to use a client-side solution, I’m not sure that canvas is the right element. This should really be SVG: canvas is great for dynamic images and animations that need to update quite quickly, but sparklines are generally pretty static. If anyone fancies making a lightweight SVG solution for sparklines, that would be lovely.

In the meantime, you can see Canvas Sparkline in action on the member profiles at The Session, like here, here, here, or here.

Update: Ask and thou shalt receive. Check out this fantastic lightweight SVG solution from Stuart—bloody brilliant!

Monday, January 2nd, 2012

angry, productive birds (tecznotes)

Mashing up Angry Birds and spreadsheets to better visualise project time-tracking.

Monday, September 26th, 2011

10 Charts About Sex « OkTrends

This is may just be the best thing on the internet about data visualisation and statistics. And sex.

Thursday, February 18th, 2010

The Case For An Older Woman « OkTrends

A thoroughly well-researched and data-heavy blog post ...complete with interactive charts!

Monday, December 1st, 2008

Best of 2008 – Last.fm

End of the year charts based on real data: "Based entirely on your scrobbling, this is a real look at what you've been listening to (not just buying). The charts are ranked by total number of listeners."

Friday, July 11th, 2008

Google Code Blog: QR Codes now available on the Google Chart API

The Google Chart API can produce QR codes. Neato!

Thursday, December 6th, 2007

Developer's Guide - Google Chart API - Google Code

All the code you need to add charts and graphs to your site.

Wednesday, October 17th, 2007

Last.fm – the Blog · Spot the difference

Compare and contrast Last.fm's chart with the "official" UK chart. It's as if Radiohead doesn't even exist in meatspace.