BitWorking

Joe Gregorio's writings (archives), projects and status updates.

Welcome to the sparkline generator. You can start right away by dynamically creating a sparkline using the Sparkline Generator Web Application, or you can read more about sparklines and decide if you want to use the sparkline web service or if you would be better off downloading the code and running the sparkline service on your own server.

Generator

Type of Sparkline
Raw Data: A comma separated list of values to plot.
Height of Image: pixels
Limits of Data: (min,max)

Special Markers: Minimum; Maximum; Last
Spacing: pixels between points.

Your Sparkline
The URI of your sparkline

Web Service

The service that generates these sparklines is available for you to use on your own site. The service is just a simple Python CGI program. If you have the skills you should consider installing the script on your own server. If you don't, then feel free to use this service.

The service consists of a single CGI program that takes query parameters that describe the sparkline.

            http://bitworking.org/projects/sparklines/spark.cgi

Common Parameters
Parameter	Description
d	The data for the plot. All data values must be between 0 and 100, or within the range of 'limits' if that parameter is set.
height	The height of the image in pixels.
limits	The valid range of input data as a comma separated list of min, max.
type	"discrete" - One vertical bar per data point. "smooth" - all the points plotted as a continuous line. "impulse" - Like discrete, but all the lines start at zero.

If the type is "smooth" then the following parameters apply:

"Smooth" Parameters
Parameter	Description
min-m	If set to 'true', then place a special market at the smallest value in the data set.
max-m	If set to 'true', then place a special market at the largest value in the data set.
last-m	If set to 'true', then place a special market at the last value in the data set.
min-color	The color of the marker placed at the smallest value in the data set.
max-color	The color of the marker placed at the largest value in the data set.
last-color	The color of the marker placed at the last value in the data set.
step	The points are to be plotted every n'th pixel.

If the type is discrete then the following parameters apply:

"Discrete" Parameters
Parameter	Description
upper	Data values ≥ upper will be plotted in the `above-color`, otherwise data points will be plotted in the `below-color`.
above-color	The color for data points ≥ `upper`.
below-color	The color for data points < `upper`.
width	The width, in pixels, of each bar.

Here are some example sparklines and their URIs to get you started.

***Examples***
Sparkline	URI
	`http://bitworking.org/projects/sparklines/spark.cgi? type=smooth&d=10,20,30,90,80,70&step=4`
	`http://bitworking.org/projects/sparklines/spark.cgi? type=smooth&d=10,20,30,90,80,70&step=4 &min-m=true&max-m=true`
	`http://bitworking.org/projects/sparklines/spark.cgi? type=discrete&d=10,20,30,90,80,70`
	`http://bitworking.org/projects/sparklines/spark.cgi? type=impulse&d=2,-1,1,3,-2&width=4&limits=-2,3`

[top]

Source Code

The full source code for this web service is freely available. It is a single Python CGI spark.cgi

Requirements: Python Imaging Library
License: The sparkline web service is licensed under the MIT License.

[top]

About

Sparklines, as defined by Tufte, are intense, simple, word-sized graphics. Kind of like this: . I found them fascinating and useful and needed a way to generate them. At first I published some simple Python scripts to produce Sparklines, but since then I have added this page for interactively designing them, a web service you can use to add them to your own site, and finally the source code to the web service.

A longer and more detailed description of this web service and application can be found in my article on XML.com, A Bright, Shiny Service: Sparklines.

Feedback: This site and service is by no means complete. If you have suggestions on how it can be improved please contact me.

Embeddeding: Since sparklines are in general small images, you can embed them directly in HTML with a data: URI. A detailed explaination of how do that, along with Python code, is available in Sparklines in data: URIs in Python.

All of the scripts are written in Python. If Python isn't your language then checkout the sparkline code available in other languages:

PHP: http://sparkline.org
Ruby: RedHanded: Sparklines for Minimalists
.NET: A direct port of this service to .NET.

To Do

This service is constantly evolving and the following are the enchancements I want to make:

Up-Down Threshhold: Add a type of graph like these.
Second Range: Add a second threshhold and a new color for points below that threshhold.

[top]