How to Create a Number in a Shape Visualization

This article describes how to use Displayr's various number visualizations. We'll go from any number - in a table, Calculation, or entered directly into the visualization controls, to the same number shown on the screen in a shape, like this:

Requirements

The input for number visualizations needs to be a single value. This can come from:

• A single value from a table or Calculation
• Entering an R-based calculation
• Entering a value manually

Additionally, for the Number in Donut, Number in Gauge, and Number in Bar visualizations, the number represented should be a percentage or proportion out of some maximum value. For the more basic functions Number, Number in Oval, and Number in Rectangle, there is no such requirement.

In this article, we will be using the following table as our input:

Method 

1. Fro the toolbar, go to Visualization > Number > [type of number in shape visualization you would like].
   
   Note: You can also pre-select a cell in a table or table-like Calculation before selecting the visualization type. If you do, you can skip to the last step.
2. Click and drag Plus (+) on the page to place the visualization.
3. In the object inspector on the right under Data > Data Source > Data select the data source of the visualization. You can select: a table, a Calculation, type in an R-based calculation, or manually enter a value.
   
   
   Note: the Data box only accepts numbers as values. If type a % sign in the input box (e.g. 10%), you will get an error. Percentage signs in the minimum/maximum and data label thresholds are now simply ignored. To add a % sign to your data value, in the Object Inspector, use Chart > Data Labels > Data label suffix

If your selected input is a table or Calculation formatted like a table, select the column and row that has the single value you want to use in the visualization.

The results are as follows:

Optional: Use the Chart menu in the object inspector to change the appearance of the visualization. For example, you could use Chart > Minimum/Maximum to set the maximum value the donut, gauge, or bar uses to fill the shape. By default, the value is set to 100.

You could also predefine different fill colors depending on the size of the percentage.
1. From the object inspector, select Chart > Fill Color.
2. Select a Default Fill Color and Threshold 1 level.
3. Specify subsequent Fill Colors and Threshold levels.

The 37% in the following Number in Donut chart represents the percentage of Coke drinkers who said they also like Pepsi. The light blue color in the graph is the one we defined for values between 25 and 50%.

Formatting options

These settings can be found on the Chart tab within the object inspector:

Shape

• Base color - The color of the segment remaining after the value of the input data is subtracted from the maximum value.
• Radius size - Available for Number in Donut and Number in Gauge. The size of hole in the donut/gauge as a proportion of the total diameter.
• Angle of first slice - Available for Number in Donut. Specifies where the segment representing the input data is represented along the donut.
• Border width - Available for Number in Oval and Number in Rectangle. The width of the border around the shape is a fraction of the size of the shape. A value of zero indicates no border.
• Border color - Available for Number in Oval and Number in Rectangle. The color of the border.

Minimum/Maximum

• Minimum value - The value representing the lower bound of the shape/icon.
• Maximum value - The value representing the upper bound of the shape/icon.

(Number) Fill Color

• Default fill color - The default color used to fill the shape or icon. This color will be used if no threshold(s) are supplied, or the input value is lower than any of the thresholds.
• Threshold i - The cut-off above which to use different fill colors. These should be provided in increasing order.
• Fill color i - The fill color to use if the input value is above threshold i. For example, if threshold 1 = 1, threshold 2 = 2, and default fill color is red, fill color 1 is yellow, and fill color 2 is green. Then for an input value of 0.5, we would color the shape/icon red (default fill color), but for an input value of 5, we would use green (fill color 2) instead.

Data Labels

• Data label prefix - Optional string which will be prepended to the data label.
• Data label suffix - Optional string which will be appended to the data label.
• Decimals shown - The number of decimal places to show in the data labels.
• Horizontal alignment - One of Left, Center, Right.
• Vertical alignment - One of Top, Middle, Bottom.
• Horizontal padding - Adjusts the horizontal position of the data label in pixels. Negative values will move the data label left while positive values will move the data label right.
• Vertical padding - Adjusts the vertical space of the data label in pixels. Negative values will move the data label down while positive values move it higher.
• Font:
  • family - Controls the font of the data label text.
  • color - Controls color of the data label text.
  • size - Font size of data labels in points.
  • weight - One of Normal or Bold.

Text Above/Below

• Text above/below - Optional text to place above or below the data label. This differs from the prefix in that it can have different font settings to the prefix.
• Horizontal alignment - One of Left, Center, Right.
• Horizontal padding - Adjusts the horizontal position of the text in pixels. Negative values will move the text left while positive values will move the text right.
• Vertical padding - Adjusts the vertical space between the text and the center of the shape/icon in pixels. Increase to move the text away from the data label.
• Font:
  • family - Controls the font of the data label text.
  • color - Controls color of the data label text.
  • size - Font size of data labels in points.
  • weight - One of Normal or Bold.

Hover

• Hover text - Optional text that can be shown when the mouse is placed over the data label.
• Hover background color - The fill color of box containing the hover text.
• Hover font size - Font size of the hover text.
• Hover font family - Font family of the hover text.

Background

• Background color - Controls color of the background.
• Margins - Controls how much space between the edge of the iframe and the shape or text. When Display is Number in a rectangle, you may need to increase the margins to see the background color. In some cases, if the Text above/below is truncated, you may also need to manually increase the margins.

Next

How to Create a Single Icon Pictograph