Visual Design Best Practices for TIBCO Spotfire®
By:
Last updated:
4:47am Apr 06, 2017

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:

Link to dxp: Warehouse Shipment Analysis

Calculated values in text area to display KPI`s:

Link to the public analysis on Cloud: CFO Analyis

DARK THEMES for simple dashboard:

Link to the public analysis on Cloud:
US Child Hunger

COORDINATED COLOURS:

Link to the public analysis on Cloud:
California Drought

CUSTOM DESIGN for customer:

Link to dxp: Time Series Forecasting Automotive Theme

 


Link to dxp: World Analysis

 

DRILL DOWN from TOP TO BOTTOM/LEFT to RIGHT:

Relevant Filter in text areas:

BOOKMARKS as a guided through the analysis:

HTML to align controls in text areas:

Custom Themes

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)
Light Blue Tile Theme
Black Tile Theme
Gray Tile Blue Title Theme
Dark Blue Piece of Paper Theme (Dark)
Black Piece Of Paper Theme

Color Schemes

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.

CATEGORICAL:

      

CONTINUOUS:

 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 – PropertiesColumn 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.

Assets

Examples

  • 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.

    Before:

    Html lookup (click to get the html)

    After:

     

  • 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.

    HTML lookup:

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.

Videos

Recommended Reading

Disable rich-text

Michael O'Connell

Frank E Harrell Jr

Blogs

Edward Tufte

  • R (2001) [1983], The Visual Display of Quantitative Information (2nd ed.), Cheshire, CT: Graphics Press, ISBN 0-9613921-4-2.
  • (2001b) [1990], 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.

Stephen Few

Jeff Johnson 

  • (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

Feedback (4)

Great article Eszter - concise and very helpful - thanks!

harald.dauwa-stummer 4:10am Mar. 30, 2017
Great that all these themes and colors can be downloaded and applied to Spotfire dashboards in less than a minute !!
Michael OConnell 6:08am Apr. 12, 2016
Love it ! Thanks for all the great samples and advices. This is an art.
so now: like recommendations helps you figure out the best visualisation for your data set, how about recommending the best visual template and color scheme :-) ?
Nicolas Marzin 8:27am Mar. 22, 2016
This is great! Good job to the team on posting these. Looking forward to customer contributions as well to build up our library of great visualizations!
Mark Palmer 4:22am Mar. 22, 2016