Skip to main content

How do I build Pictograph components?

Updated

Highlights

Component Pictograph
Overview Use a Pictograph to tell a story about your data using images or symbols.
Key Features Select from a library of images, or upload your own image.
Display the whole image or a percentage of an image. 
Apply visual impact to highlight your data.

Overview

The Pictograph component allows you to display data in a graphical way. Using symbols and patterns to represent values and percentages, the Pictograph component adds visual impact to your data. For example, you can use stars as a rating system to highlight the importance of different groups of data. The Pictograph component gives you the option to choose from a number of different built-in symbols or images, or to upload your own image.

Component Structure

Here is the structure of the Pictograph component:

Key Features

This section highlights some of the key features associated with the Pictograph component.

Images

You can select from a library of images, or you can upload your own image.

Built-in images include star, circle, diamond, square, check mark, X, up (triangle), down (triangle), neutral (line), man, woman, happy face, sad face, document, fire, Sir Bentley, and custom.

With custom, you can upload your own images to an Image Library. An image must not be more than 2 MB in size and is available for others to use in the company account. When an image is uploaded, it is automatically resized for you. 

In order to change the color of an uploaded image using the Colorize option in Properties, use one with a transparent background. For best results images using alpha transparency are ideal.

Change image or symbol display

You can make adjustments to how an image or symbol displays.

Apply a color to a number of images

You can display the whole image, or you can change the color of a number of images.

  1. Select the Image Set sub-component from the tree.
  2. Select the Properties panel, at Type select Quantity.
  3. Leave Increment as 1.

Increment lets you assign a weight for each image. For example, you can assign 1 symbol to represent 100 images.

  1. Select an Image type. For example, Sir Bentley.
  2. Select the Data panel. Select the number 5, the default number of images for an Image Set, and type 2.5 to display to two and half images.
  3. Optional: Select the Properties panel and a Cropping of Crop image and show base color to display the background/base color.

Apply a percentage fill to a number of images

You can display all images, or you can color a percentage of images by typing in value between 0 and 1.

  1. Add another Image Set from the Pictograph, Properties panel.
  2. Select the Properties panel, Type, select Percentage.
  3. From the Steps field, increase or decrease the number of images you want to display.
  4. Select an Image type. For example, Man.
  5. Select the Data panel. Select the number, type 0.5 (50%) to display half the number of images.
  6. Optional: From the Properties panel, Rounding, select Round values to prevent cropping to round off any fraction values.

Add color to symbols or images

You can add colors to symbols or images. For example, in the Properties panel, select:

  • A Base color to apply a different background color.  The default base color is grey.
  • A Color overlay to apply a color filter.
  • A Solid color to change the color to one that you prefer.

To set padding

You can adjust the white space around an image. This is useful if you need to align an image with another image.

  1. Select the Properties panel.
  2. Select a Padding option for all sides, or for left, right, top and bottom.

You can also move images to the next row by enabling the wrapping option in the Properties panel of the Pictograph component.

The default padding option is 2 pixels.

Important concepts

These articles provide essential information about components that you can apply to your own Dashboard:

 

Related articles