Sparklines
Sparklines for GWT and Vaadin
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);
Links
Compatibility
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 VaadinIssue Tracker
Source Code
Edward Tufte's sparklines
GWT Graphics (included dependency)
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).