Visual Design Best Practices for TIBCO Spotfire®
Even the most sophisticated TIBCO Spotfire® dashboards, addressing all technical requirements of the customer, will not be effective unless their visualdesign is well coordinated.
Dashboards need to be carefully designed to be visually appealing and clearly deliver information to their end users.
The materials gathered in the subpages will help you design beautiful and effective Spotfire analyses.
Dashboard Design Best Practices Examples
LARGE TITLES on each page:
Calculated values in text area to display KPI`s:
DARK THEMES for simple dashboard:
CUSTOM DESIGN for customer:
DRILL DOWN from TOP RIGHT TO BOTTOM/LEFT:
Relevant Filter in text areas:
BOOKMARKS as a guided through the analysis:
HTML to align controls in text areas:
Here you can download Custom Themes and apply them to your Spotfire Analyses.
Click on the name of any Custom Theme below to download the US Homeless analysis styled in that theme.
You can then apply the theme to your Spotfire analysis through View -> Visual Theme -> Import Theme from File...
Creating a custom theme is only possible with the Analyst Client. As a business author you can change the themes between the defaults white or black however if the custom theme was created by the analyst you have the option custom as well.
|Gray Piece of Paper Theme
||Burgundy Piece of Paper Theme
|Gray Tile Theme
||Gray and Gold Tile Theme
|Dark Blue Piece of Paper Theme (Light)
|Black Tile Theme
||Gray Tile Blue Title Theme
|Dark Blue Piece of Paper Theme (Dark)
||Black Piece Of Paper Theme
Here you can download pre-prepared color schemes and apply them to your visualizations in Spotfire.
Click on the colour schemes to download them as zip files.
For instructions visit the following Spotfire help pages:
- Color Schemes Overview: The entire setup of colors for a visualization is referred to as its color scheme. Which colors and threshold values you choose, as well as the color mode you select, are all part of a visualization's color scheme. The current color scheme of a visualization can be viewed in the legend, and on the Colors page of the Visualization Properties. This is also where you edit a color scheme.
- Opening a Color Scheme: You can open a color scheme that has previously been saved to disk or to the library. You can also apply a color scheme from another visualization in the analysis, or open a document color scheme. The color scheme must be in the same scale mode as the visualization in which you want to use it.
- Applying a Color Scheme to Another: When you have set up a color scheme for a visualization, you can apply it to another visualization, provided that the two visualizations are colored by a column in the same scale mode.
- Saving a Color Scheme: You can save a color scheme for later reuse or to share it with others. If you save the color scheme to disk or in the library, you can use it in other analyses. If you save it as a document color scheme, you can use it again within the analysis. A document color scheme can be selected for a specific visualization in the analysis from the Colors page of the visualization properties. You can also select it as the default color scheme to use for a specific column as well as for new visualizations in the analysis. See Column Properties – Properties, Column Properties Descriptions, and Options – Visualization to learn more about using default color schemes.
- Coloring Overview
HTML in Text Areas
Using HTML in Spotfire Text Areas is a great way to enhance the look and feel of your dashboards.
- Title pane with KPIs: in this example, an HTML table is used to control the layout of the top pane of the dashboard, including a title, KPIs and a slider.
Table boarder set to one:
HTML lookup (click on the image to zoom in):
- Aligned Text and Controls: In this example, an HTML table is used inside a text area to align text and Spotfire controls for a more readable and user friendly format.Also, a cellpadding attribute is used inside the tag to control the distance between text and controls and the Text Area borders.
- This customized html table is a good example how to put and align dynamic labels in a table.
Link to dxp: Customized table
- Scorecard Layout: This HTML code is used within a text area to align text and a Spotfire control in the middle of the box.
- You can usue other techniques such as Div and Section tags which are more commonly used on web pages. In combination with styles such as float or flex you can achieve modern layouts in a text area: https://www.smashingmagazine.com/2018/05/guide-css-layout/
Spotfire Design Cheat Sheet
The Cheat Sheet is a one page document with checkboxes that will help you design beautiful, user-friendly dashboards.
Please download the pdf version or view the image below.
From Data to beautiful dashboards (Best practices for creating customized, beautiful, and effective dashboards (with Eszter Takacs))
- , A Picture is Worth a Thousand Tables: Graphics in Life Sciences, Springer, ISBN-13: 978-1461453284
Frank E Harrell Jr
- (2014), PRINCIPLES OF GRAPH CONSTRUCTION
- Making data look good - TIBCO Community Blog by Dejan Zamurovic
- Six Key Tips for Impactful Data Analytics - TIBCO Community Blog by Colin Gray
- Creating Powerful Analytics and Dashboards through Parameterization - TIBCO Community Blog by Colin Gray
- 7 Basic Rules for Making Charts and Graphs
- The functional art, blog on visualization, infographics, and data journalism
- R (2001) , The Visual Display of Quantitative Information (2nd ed.), Cheshire, CT: Graphics Press, ISBN 0-9613921-4-2.
- (2001b) , Envisioning Information, Cheshire, CT: Graphics Press, ISBN 0-9613921-1-8.
- R (1997), Visual Explanations: Images and Quantities, Evidence and Narrative, Cheshire, CT: Graphics Press, ISBN 0-9613921-2-6.
- (2003), The Cognitive Style of PowerPoint, Cheshire, CT: Graphics Press, ISBN 0-9613921-6-9.
- (2006), Beautiful Evidence, Cheshire, CT: Graphics Press, ISBN 0-9613921-7-7.
- (2009), Now You See it: Simple Visualization Techniques for Quantitative Analysis: Analytics Press, ISBN - 13: 978-0970601988.
- (2012), Show me the numbers: Analytics Press, Second Edition, ISBN - 13: 978-0970601971.
- (2006), Information Dashboard Design: The Effective Visual Communication of Data: O'Reilly Media, Incorporated, ISBN - 13: 978-0596100162.
- (2007), Why Most Dashboards Fail: Perceptual Edge.
- (2004-2012), Designing Effective Tables and Graphs: Perceptual Edge.
- (2014), Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design: Morgan Kaufmann, Second Edition, ISBN-13: 978-0124079144.
Dona M. Wong
- (2010), The Wall Street Journal Guide to Information Graphics: The Dos and Don'ts of Presenting Data, Facts, and Figures: W. W. Norton & Company; 1St Edition edition, ISBN-13: 978-0393072952