Directory

← Back

Sparklines

Sparklines for GWT and Vaadin

Author

Rating

Popularity

<100

Sparklines is a component for GWT and Vaadin that implements sparklines as described by Edward Tufte. A sparkline is essentially a small linegraph and some numbers, but it's best described by Tufte himself; see Tufte's book "Beautiful Evidence" or view the chapter about sparklines online at his site http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR

Sparklines is highly configurable, and almost all features can be turned on or off.

  • linegraph, the actual sparkline
  • caption same color as line
  • current/last value, indicated by dot of same color as value
  • min/max values
  • min/max dots, same color as respective value
  • average indicator line
  • 'normal' range indicator

Please really read Tufte's explanation in order to maximize the usefullness of this component. Especially, if you have multiple sparklines that can be compared, make sure that they have the same scale - it is often best to set the graphWidth, graphHeight and display range.

Sparklines depends on the gwt-graphics library; you can use the one included in this package, or get a fresh package from http://vaadin.com/addon/gwt-graphics

For 'plain' GWT usage, extract SparklinesGWT.java - it's the only file you need in addition to gwt-graphics. You may want to check VSparklines.java for usage hints.

Sample code

table.v-sparkline {
	font-family: Georgia, serif;
	text-transform: none;
}

.v-sparkline .v-sparklinecaption {
	border-bottom: 2px solid #ccc;
}

.v-sparkline .v-sparklinevalue {
	border-bottom: 2px solid #69f;
}

.v-sparkline .v-sparklineminmax {
	background-color: #444;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 3px;
	border-bottom: 2px solid #6f9;
}
s = new Sparklines("Stuff", 0, 0, 50, 100);
s.setDescription("Everything turned on");
s.setValue("15,26,23,56,35,37,21"); 
s.setAverageVisible(true);
s.setNormalRangeColor("#444"); 
s.setNormalRangeMax(80);
s.setNormalRangeMin(60);
s.setNormalRangeVisible(true);
s.setMaxColor("#f69");
s.setMinColor("#6f9");
mainWindow.addComponent(s);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Updated to work with Vaadin 7 final. Removed text-transform:uppercase style. (Still uses 'legacy' API, a more complete v7 rewrite planned at some point - though this one should work fine).

Released
2013-02-14
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0+
Vaadin 6.0+ in 0.5
Browser
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser

Sparklines - Vaadin Add-on Directory

Sparklines for GWT and Vaadin Sparklines - Vaadin Add-on Directory
Sparklines is a component for GWT and Vaadin that implements sparklines as described by Edward Tufte. A sparkline is essentially a small linegraph and some numbers, but it's best described by Tufte himself; see Tufte's book "Beautiful Evidence" or view the chapter about sparklines online at his site http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR Sparklines is highly configurable, and almost all features can be turned on or off. - linegraph, the actual sparkline - caption same color as line - current/last value, indicated by dot of same color as value - min/max values - min/max dots, same color as respective value - average indicator line - 'normal' range indicator Please really read Tufte's explanation in order to maximize the usefullness of this component. Especially, if you have multiple sparklines that can be compared, make sure that they have the same scale - it is often best to set the graphWidth, graphHeight and display range. Sparklines depends on the gwt-graphics library; you can use the one included in this package, or get a fresh package from http://vaadin.com/addon/gwt-graphics For 'plain' GWT usage, extract SparklinesGWT.java - it's the only file you need in addition to gwt-graphics. You may want to check VSparklines.java for usage hints.
Online Demo
Issue Tracker
Source Code
Edward Tufte's sparklines
GWT Graphics (included dependency)

Sparklines version 0.5
null

Sparklines version 7.0.0
Converted to work with Vaadin 7

Sparklines version 7.0.1
Fixed one unintentional change regarding caption handling while converting to Vaadin 7.

Sparklines version 7.0.2
Updated to work with Vaadin 7 final. Removed text-transform:uppercase style. (Still uses 'legacy' API, a more complete v7 rewrite planned at some point - though this one should work fine).

Online