Sparklines, more information in less space

For details on the upcoming Sparklines online workshop, see the end of this article, or click here.

Edward Tufte, who coined the term “sparklines”, describes them as “data-intense, design-simple, word-sized graphics.”
While traditional charts aggregate information from a full list, and are set off the flow of text, a sparkline pictures an individual item, and is directly embedded in the list.
You’ll find a good introduction to sparklines on this page from BonaVista.

The most common type is a line graph (hence the name), like in this screenshot from Google Finance. But sparklines come in various other shapes, as you can see from the (jQuery) samples on this page.

For example, you’ll use:
– line and bar graphs to track data against time
– progress bar or bullet chart to assess data against thresholds or objectives
– pies for categories (e.g. region, product line)
– discrete charts for status (project phases, game results)

Sparklines apply to many situations:
– enterprise dashboards (revenue, expenses, market share, all within one list)
– healthcare (patient stats)
– education (attendance rate, success rate)
– project management (issues resolution, costs)
– products/services dashboard (sales, support calls)
– transportation (passenger traffic, delayed flights)
– sports and games (won, lost or drawn)
– website stats: pageviews, visitors (cf. Google Analytics)
baby name trends for a given year
– etc.

Sparklines can also be placed on supports other than lists, like maps, although I find this more difficult to read. Here is an example with the New-York subway.

How about SharePoint?

I already published last year a tutorial showing how to include Google sparklines in SharePoint lists. The Google approach is very convenient, but has its downside. First, in your corporate environment, you may not have access to the Google charts website. Then, even if you can access it, you may not like the idea that your data goes public, as you send it on the Internet to get the charts in return. If so, you’ll have to find an in-house solution to build your sparklines.
In a couple days, I’ll publish a tutorial to explain how to I created simple, homemade graphs for SharePoint lists (see screenshot below).

If you are wondering how I built the pie charts, check out this picture for a clue. More details after Thanksgiving…

To apply the tutorials, you’ll need to know about the “HTML Calculated Column”. For a refresher on this method, start with the post I published last week, and follow the links.

The above bar graphs and pies are basic solutions, but their great advantage is that they don’t have any external dependency.

If you are looking for more advanced charting capabilities, check out Gareth Watts’ sparklines plugin for jQuery. Back in March, I showed an example combining this plugin with SharePoint.

Inline charts are the central theme of our upcoming live online SharePoint workshop, scheduled on December 2nd at 1 pm (EST). Mark Miller and I will guide you through the steps to implement these customizations. Like for the other workshops, you’ll receive a SharePoint sandbox, where you can directly try out the solutions.

3 thoughts on “Sparklines, more information in less space

  1. Pingback: uberVU - social comments

  2. Pingback: A New Kind of SharePoint Chart and Graph Solution | End User SharePoint

  3. Pingback: Sparklines in SharePoint (part II) – A homemade bar graph « Path to SharePoint

Comments are closed.