Juicebox
Preparing your dataStory DesignerVisual design tips
  • Juicebox Documentation
  • What is Juicebox?
    • Technology requirements
  • Getting Started
    • Getting a Workspace
    • Reach out to us
  • Building Reports
    • Creating and Editing Reports
    • Data
      • Loading data
      • Managing data
      • The data preview
    • Design
      • Slices
        • Dynamic text
        • Customizing what shows
        • Multiple data tables
        • Charts
          • Headline
          • Filters
          • Chooser
          • Table
          • Card
          • Reports Navigation
          • Bar
          • Scatterplot
          • Leaderboard
          • Map
          • Trend
          • Pie
        • Selections as Variables
        • Debug
      • Ingredients
        • The ingredient editor
          • The dimension ingredient editor
          • The measure ingredient editor
        • Adding new ingredients
        • Advanced field formulas
        • Time formats
        • Number formats
    • Share
      • Publishing a report (or report changes)
      • Inviting viewers
      • Insights
    • Tips and Tricks
      • Telling data stories
      • Visual design
      • Preparing your data
      • Useful resources
  • Viewing Reports
    • Signing In
    • Navigating Reports
    • Focus and Filter
  • Managing Users
    • Adding Users
    • User Roles and Management
    • Limiting what data users can see
    • Access Views
    • Embedding Juicebox Apps
      • How embedding works
      • Juicebox Embedding API
      • Juicebox API
    • Requesting data from embedded apps
  • Managing my workspace
    • Workspace Settings
    • Subscription and Billing
  • Changelog 🎁
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Building Reports
  2. Design
  3. Slices
  4. Charts

Card

PreviousTableNextReports Navigation

Last updated 6 months ago

Was this helpful?

The Card slice is used to display selected columns and measures on cards. Users can select cards to filter downstream results. Here's an example of a Card slice:

On the Configure tab, you can add the following:

Title. A dimension ingredient with values to display as card titles.

Long text. A dimension ingredient with values to display as card text.

Secondary data. Up to 3 measure ingredients to display on each card.

Image. A dimension ingredient with urls to images to display on each card.

All configuration fields are optional, but you must make a selection in at least one of the fields. In most cases, you will want to configure at least the Title field. There will be a card for each distinct combination of Title, Long text, and Image.

Here's the Configure tab for the example above:

On the Style tab, you can adjust how the elements display in the slice. Here's the Style tab for the example above:

Displaying cards with measure gauges

There are two gauge card styles: Detail Gauge and Simple Gauge. These require a special configuration.

At least one measure ingredient will need to be added to the Card slice configuration. Each measure ingredient will need to have ranges defined in the Advanced/Ranges section of the measure ingredient editor, like so:

- color: lightgray
  label: Poor
  endValue: 0.4
  startValue: 0
- color: gray
  label: Meh
  endValue: 0.7
- color: lightblue
  label: Top Tier
  endValue: 1

In this example, we have three ranges: "Poor", "Meh", and "Top Tier". Each range is represented by a different color and has a specific start and end value. The "Poor" range starts at 0 and ends at 0.4, the "Meh" range ends at 0.7, and the "Top Tier" range ends at 1.

Here's a Card slice with the Simple Gauge card style:

The Sales measure used in this example has the following ranges defined under Advanced/Ranges in the measure ingredient editor:

- color: "#ee6055"
  label: Below
  endValue: 4000000
  startValue: 0
- color: "#eaf4f4"
  label: On Target
  endValue: 5500000
- color: "#60d394"
  label: Above
  endValue: 20000000

In this example, there are three ranges: "Below", "On Target", and "Above". Each range is represented by a different color using hex codes and has a specific start and end value. The "Below" range starts at 0 and ends at 4 million, the "On Target" range ends at 5.5 million, and the "Above" range ends at 20 million.

Example Card slice
Card slice Configure tab
Card slice using the Simple Gauge card style