Visualization - Pictographs - Conditional Image

A Conditional Image is an image that can be altered based on numeric, categorical, or text inputs. The fill and image can be automatically set to better depict the data it is representing.

Examples

Conditional images can be conditioned on a single value, R output, table, or variable. The examples below are conditioned on an R output that is linked to a combo box, allowing you to change the image in realtime.

Conditional images can either use images provided by Displayr or link to custom images stored online.

Conditional Image with Displayr Images

Displayr provides a variety of inbuilt pictures and icons that can be used in conditional images. The example below shows how conditional images can be used to present satisfaction data.

Create a Conditional Image with Displayr images

1. Go to Insert > Visualization > Conditional Image

2. Under Inputs > DATA SOURCE > Data source, select the method to condition the image

3. Under Inputs > OUTPUT > Image type, select Displayr images from the dropdown

4. Set your conditions by customizing the image and threshold options.

Conditional Image with Custom Images

Any image can be included in a conditional image as long as it has a URL. The example below shows how logos and icons can be altered depending on the input.

Create a Conditional Image with custom images

1. Go to Insert > Visualization > Conditional Image

2. Under Inputs > DATA SOURCE > Data source, select the method to condition the image

3. Under Inputs > OUTPUT > Image type, select Custom images from the dropdown

4. Set your conditions by pasting image URLs into the image box and setting the threshold options

Object Inspector Options

The following is an explanation of the options available in the Object Inspector for this specific visualization. Refer to Visualization Options for general chart formatting options.

Inputs

DATA SOURCE

One of the following options:

Type or paste value

Use an existing R output

Table

Variable - Average

Variable - Sum

Variable - Percentage

Variable - Most frequent

OUTPUT

Image type Either Displayr images or Custom images. If Displayr images is chosen then the users can chose from the dropdown of available images, which can be re-colored. If Custom images, then users can enter a URL to their own image.

Threshold i A value which the input data will be compared with to determine the image to show. If the input data is numeric or ordered, the thresholds should be numeric values supplied in increasing order. If the input data is categorical or text then categories can be supplied in any order. Any number of thresholds can be supplied.

Image i The image to show if the input value is equal to Threshold i (for text or categorical) or equal to and greater than Threshold i (for numeric or ordered inputs).

See Visualization - Number Options for other options.

In the examples above, we used Type or paste value for simplicity, but users can also link to variables or other outputs which can automatically update.

More Information

How to switch logos and images based on user selections

Code

var allow_control_groups = Q.fileFormatVersion() > 10.9;
var font_list = !!Q.GetAvailableFontNames ? Q.GetAvailableFontNames() : ["Arial", "Arial Black", "Century Gothic", "Comic Sans MS", "Courier New", "Georgia", "Impact", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
var default_font_color = "#2C2C2C";


if (allow_control_groups);
    form.group("DATA SOURCE");
var datOpt = form.comboBox({name: "formDataSource", label: "Data source", alternatives: ["Type or paste value", "Use an existing R output", "Table", "Variable - Average", "Variable - Sum", "Variable - Percentage", "Variable - Most frequent"], default_value: "Type or paste value"}).getValue();

var showPercent = false;
if (datOpt == "Type or paste value") 
     form.textBox({name: "formInputText", label: "Input data", prompt: "Enter a numeric or text value", required: true}) // for shapes, this can be text
else if (datOpt == "Use an existing R output")
{
     var inputR = form.dropBox({name: "formInputR", label: "Input data", types: ["RItem:integer,numeric,character,factor"], required: true});
    if (inputR.getValue() != null)
    {
        form.textBox({name: "formTableRow", label: "Select Row", prompt: "Enter name or index of row of the entry you want to display. Leave blank to show first entry", required: false});
        form.textBox({name: "formTableColumn", label: "Select Column", prompt: "Enter name or index of column of the entry you want to display. Leave blank to show first entry", required: false});
    }
}else if (datOpt == "Table")
{
    var inputTable = form.dropBox({name: "formInputTable", label: "Input data", types: ["Table", "RItem:matrix,array,data.frame,table"]});
    if (inputTable.getValue() != null)
    {
        form.textBox({name: "formTableRow", label: "Select Row", prompt: "Enter name or index of row of the entry you want to display"});
        form.textBox({name: "formTableColumn", label: "Select Column", prompt: "Enter name or index of column of the entry you want to display. Leave blank for 1-d table.", required: false});
    }
}
else if (datOpt == "Variable - Percentage")
{
	showPercent = true;
    var percentVar = form.dropBox({name: "formInputVariable", label: "Input data", types: ["Variable: Numeric, Date/Time, Money, Text, Categorical, OrderedCategorical"]});
    if (percentVar.getValue() != null)
        form.textBox({name: "formCategory", label: "Category", required: false, prompt: "Enter name of category you want to display percentage of"});
}
else
    form.dropBox({name: "formInputVariable", label: "Input data", types: ["Variable: Numeric, Date/Time, Money, Text, Categorical, OrderedCategorical"]});

if (allow_control_groups);
    form.group("OUTPUT");

var imageType = form.comboBox({name: "formImageType", label: "Image type", alternatives: ["Displayr images", "Custom images"], default_value: "Displayr images"}).getValue();
var imageList = ["Apple","Baby", "Beer", "Bread","Cake", "Car", "Chicken", "Circle", "Cross", "Elephant", "Face - Happy", "Face - Neutral", "Face - Sad", "Globe", "Gun", "Heart", "House", "Money", "Soldier", "Square", "Star", "Sick person", "Stick man", "Stick woman", "Symbol - Cross", "Symbol - Minus", "Symbol - Plus", "Symbol - Tick", "Thumbs up", "Thumbs down", "Tick", "Truck",  "User", "Water drop", "Weight", "Wine"];
if (imageType == "Custom images")
    var condImageForm = function(i) { form.textBox({name: "formImageURL" + i, label: i == 0 ? "Default image": "Image " + ci, prompt: i == 0? "URL of image to show if the input value is not equal to or greater than any of the thresholds below " : "URL of image to show if input value is equal to or greater than Threshold " + i}); }
else
    var condImageForm = function(i) { form.comboBox({name: "formImage" + i, label: i == 0 ? "Default image" : "Image " + ci, alternatives: imageList, default_value: "Stick man", prompt: i == 0 ? "Image to show if the input value is not equal to or greater than any of the thresholds below" : "Image to show if input value is equal to or greater than Threshold " + i});
    form.colorPicker({name: "formColor" + i, label: "Fill color", default_value: "#3E7DCC"});
 }


condImageForm(0);
var cond = "";
var ci = 1;
while (ci == 1 || cond != "")
{
   cond = form.textBox({name: "formImageThres" + ci, label: "Threshold " + ci, required: false, prompt: "Optional threshold value. If the input value is equal or greater than this threhold, Image " + ci + " will be used."}).getValue();
   if (cond != "")
        condImageForm(ci);
   ci = ci + 1;
}

if (allow_control_groups)
    form.page("Format")

if (allow_control_groups)
    form.group("BACKGROUND")
bgOpt = form.checkBox({name: "formTransparent", label: "Transparent background", default_value: true}).getValue();
if (!bgOpt)
    form.colorPicker({name: "formBgColor", label: "Background color", default_value: "#FFFFFF"});
form.numericUpDown({name: "formMarginRight", label: "Right margin", maximum: 1000, default_value: 0});
form.numericUpDown({name: "formMarginLeft", label: "Left margin", maximum: 1000, default_value: 0});
form.numericUpDown({name: "formMarginTop", label: "Top margin", maximum: 1000, default_value: 0});
form.numericUpDown({name: "formMarginBottom", label: "Bottom margin", maximum: 1000, default_value: 0});

library(flipTransformations)
library(flipTables)
library(flipPictographs)

value <- NULL
warnFilterOrWeight <- TRUE
getIndex <- function(index)
{
    if (nchar(index) > 0)
        return(index)
    else
        return(1)
}

if (formDataSource == "Type or paste value") {
   # ParseUserEnteredTable has extra parsing for '$', ',', '%', etc 
   value <- ParseText(formInputText) 
} else if (formDataSource == "Use an existing R output") {
   value <- SelectEntry(formInputR, getIndex(formTableRow), getIndex(formTableColumn), return.single.value = TRUE)
} else if (formDataSource == "Table") {
    value <- SelectEntry(formInputTable, formTableRow, formTableColumn, return.single.value = TRUE)
} else {
    warnFilterOrWeight <- FALSE
    value <- SummarizeVariable(formInputVariable, type = formDataSource, category = get0("formCategory"),
                weights = QPopulationWeight, subset = QFilter) 
}

if (warnFilterOrWeight && length(QFilter) > 1)
    warning("Filters have not been used. They can only be applied to variables.")
if (warnFilterOrWeight && length(QPopulationWeight) > 1)
    warning("Weights have not been used. They can only be applied to variables.")

ci <- 1
image <- NA
fill.color <- NA
imagebase <- if (formImageType == "Custom images") "formImageURL" else "formImage"
is.value.ordered <- is.numeric(value) || is.ordered(value) || inherits(value, "Date") || inherits(value, "POSIXct") || inherits(value, "POSIXt")
while (is.na(image))
{
    thres.str <- get0(paste0("formImageThres", ci), ifnotfound = "")
    thres.val <- ParseText(thres.str, same.as = value)

    if (thres.str  == "" && ci == 1)
        image <- paste0(imagebase, "0")
    else if (thres.str == "" && !is.value.ordered)
        image <- paste0(imagebase, "0")
    else if (thres.str == "")
        image <- paste0(imagebase, ci - 1)
    else if (is.value.ordered && isTRUE(value < thres.val))
        image <- paste0(imagebase, ci - 1)
    else if (value == thres.val)
        image <- paste0(imagebase, ci)
    else
        ci <- ci + 1
}
if (formImageType != "Custom images")
    fill.color <- get0(gsub(imagebase, "formColor", image))
image <- get0(image)

viz <- VisualizeNumber("",
    display = "Icon",
    image = image,
    is.custom.url = isTRUE(formImageType == "Custom images"),
    fill.color = fill.color,
    hide.base.image = TRUE,
    background.color = get0("formBgColor", ifnotfound = "white"),
    background.opacity = if (formTransparent) 0.0 else get0("formBgOpacity", ifnotfound = 1.0),
    margin.left = formMarginLeft,
    margin.right = formMarginRight,
    margin.top = formMarginTop,
    margin.bottom = formMarginBottom)